easyUI datagrid 动态绑定列名称

easyUI 基于Jquery ,所以需要引用Jquery文件

easyUI自带了很多样式文件,可以根据需要,引用相应的css文件。

其中datagrid是一个根据json数据,js前端生成前端显示的table,功能很强大,可以编辑,删除,修改,对应的操作。

既然datagrid是根据json绑定数据的,那么json返回的格式是怎样的呢?

datagrid表头json格式:

     第一种,在前端页面直接写columns属性:

  1. <script type="text/javascript">
  2.             $('#tab').datagrid({  
  3.                 width:810,  
  4.                 height:400,  
  5.                 idField:'xsbh',  
  6.                 url:url,  
  7.                 singleSelect:true,  
  8.                 columns:[[  
  9.                    {field:'xsbh',title:'编号',width:80},  
  10.                   {field:'UserName',title:'姓名',width:100},  
  11.                   {field:'Sex',title:'性别',width:30},  
  12.                   {field:'SchoolYear',title:'年份',width:50},  
  13.                   {field:'opt',title:'操作',width:100,align:'center'}  
  14.                 ]]
    });
  15. </script>

   第二种,有的时候需要从后台读取列名称,在$("#tab").datagrid({})时,并不指定url属性,columns也为空 也就是说,不向服务器端发送请求,
      在datagrid之后,向服务器发送请求,并接受绑定列名称,和内容的json

    1. <script type="text/javascript">
    2.             var dg=null;
    3.             dg=$('#tab').datagrid({  
    4.                 width:810,  
    5.                 height:400,  
    6.                 idField:'xsbh',  
    7.                 //url:url,  
    8.                 singleSelect:true,  
    9.                 columns:[[  
    10.                  /*
    11.                    {field:'xsbh',title:'编号',width:80},  
    12.                   {field:'UserName',title:'姓名',width:100},  
    13.                   {field:'Sex',title:'性别',width:30},  
    14.                   {field:'SchoolYear',title:'年份',width:50},  
    15.                   {field:'opt',title:'操作',width:100,align:'center'}  
    16.                 */
    17.                 ]]
    18.               
    19.             //开始发送请求,并绑定数据
    20.             $.ajax({
    21.                   url:url,
    22.                   type:post,
    23.                   dataType:"json",
    24.                   success:function(msg){
    25.                        dg.datagrid({columns:msg.columns});
    26.                        dg.datagrid({"loaddata",msg.rows});
    27.                   }
    28.             });
      });
    29. </script>

      msg.columns格式:
      {"columns":[
      {"field":"id","title":"公寓编号","align":"center","width":100},
      {"field":"name","title":"公寓名称","align":"center","width":100},
      {"field":"info","title":"公寓信息","align":"center","width":100},
      {"field":"area","title":"所在校区","align":"center","width":100}
      ]}
      msg.rows格式:
      {"total":4,"rows":[
      {"id":"B1","name":"1号楼","info":"一公寓(女生)","area":"小营"},
      {"id":"B2","name":"2号楼","info":"二公寓(女生)","area":"小营"}, {"id":"B2","name":"2号楼","info":"二公寓(女生)","area":"小营"}, {"id":"B2","name":"2号楼","info":"二公寓(女生)","area":"小营"}
      ]}
    30. 全文完 2013/06/23 17:51 与武汉汉口

你可能感兴趣的:(datagrid)