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数据:

  • 相关阅读:
    关于Spring的destroy-method和scope="prototype"不能共存问题
    关于引入文件名字问题
    技术学习路
    web.xml文件配置
    性能测试中的TPS与HPS
    设计模式简介
    Cause of 400 Bad Request Errors
    vim使用技巧
    如何更好地利用Pmd、Findbugs和CheckStyle分析结果
    Java基础知识
  • 原文地址:https://www.cnblogs.com/my-freedom/p/6485403.html
Copyright © 2011-2022 走看看