zoukankan      html  css  js  c++  java
  • 使用easyui将json数据生成数据表格

         1.首先需要用script引入jquery和easyui文件。如图所示:

        2.html页面设置如下:

    data-options里面设置的属性可根据需要自己定义,是否单选,是否设置分页等等。

       3.引入easyui的css样式。

       4.用ajax方法加载出数据。

    注意:在成功以后的回调函数中给页面id为dg的盒子绑定数据。

       5.配置datagrid方法:

    function fLoadTable(){
            $('#dg').datagrid({
                 title: '用户列表',
                700,
                height: 300,
               fitColumns: true,

    //对应json数据中的每一列
               columns : [ [ {
                     field : 'id', //每一列的名字
                     width : '100',
                     title:'ID',
                    checkbox:true
                 },{
                   field : 'flag',
                   title : '职位',
                   width : '100',
                   align : 'center'
                }, {
                   field : 'userName',
                   title : '姓名',
                   width : '100',
                  align : 'center',
               },{
                   field : 'gender',
                   title : '性别',
                   width : '100',
                   align : 'center',
              },{
                  field : 'email',
                  title : '邮箱',
                  width : '100',
                  align : 'center',
               }
            ] ],
         idField:'id',
         loadMsg:'Processing, please wait …',
         pagination:true
    });
    }

      6.最后调用这两个函数。

     

      7.效果截图

    下面是我的json数据:

  • 相关阅读:
    为jquery添加扩展标准思路
    linux 相关命令
    通过设置PHPSESSID保存到cookie实现免登录
    CentOs7 配置nfs 系统
    ajax 异步 跨域上传图片
    php下载并安装pear脚本
    php基于swoole扩展的WebSocket
    php冒泡排序
    微信公众号验证TOKEN
    CSS清浮动处理(Clear与BFC)
  • 原文地址:https://www.cnblogs.com/my-freedom/p/6485403.html
Copyright © 2011-2022 走看看