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. $.ajax({
20. url:url,
21. type:post,
22. dataType:"json",
23. success:function(msg){
24. dg.datagrid({columns:msg.columns});
25. dg.datagrid({"loaddata",msg.rows});
26. }
27. });
    });
28. </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":"小营"}
    ]}

全文完 2013/06/23 17:51 与武汉汉口