首页 > 代码库 > 使用easyui将json数据生成数据表格

使用easyui将json数据生成数据表格

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

技术分享

    2.html页面设置如下:

技术分享

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

   3.引入easyui的css样式。

技术分享

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

技术分享

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

   5.配置datagrid方法:

function fLoadTable(){
        $(‘#dg‘).datagrid({
             title: ‘用户列表‘,
            width: 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数据:

技术分享

 

使用easyui将json数据生成数据表格