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 与武汉汉口
posted @ 2013-06-23 17:53  鸡蛋面  阅读(2102)  评论(0)  编辑  收藏  举报