easyUI 基于Jquery ，所以需要引用Jquery文件
easyUI自带了很多样式文件，可以根据需要，引用相应的css文件。
其中datagrid是一个根据json数据，js前端生成前端显示的table，功能很强大，可以编辑，删除，修改，对应的操作。
既然datagrid是根据json绑定数据的，那么json返回的格式是怎样的呢？
datagrid表头json格式：
第一种，在前端页面直接写columns属性：
- <script type="text/javascript">
- $('#tab').datagrid({
- 810,
- height:400,
- idField:'xsbh',
- url:url,
- singleSelect:true,
- columns:[[
- {field:'xsbh',title:'编号',80},
- {field:'UserName',title:'姓名',100},
- {field:'Sex',title:'性别',30},
- {field:'SchoolYear',title:'年份',50},
- {field:'opt',title:'操作',100,align:'center'}
- ]]
}); - </script>
第二种，有的时候需要从后台读取列名称，在$("#tab").datagrid({})时，并不指定url属性，columns也为空 也就是说，不向服务器端发送请求，
在datagrid之后，向服务器发送请求，并接受绑定列名称，和内容的json
- <script type="text/javascript">
- var dg=null;
- dg=$('#tab').datagrid({
- 810,
- height:400,
- idField:'xsbh',
- //url:url,
- singleSelect:true,
- columns:[[
- /*
- {field:'xsbh',title:'编号',80},
- {field:'UserName',title:'姓名',100},
- {field:'Sex',title:'性别',30},
- {field:'SchoolYear',title:'年份',50},
- {field:'opt',title:'操作',100,align:'center'}
- */
- ]]
- //开始发送请求，并绑定数据
- $.ajax({
- url:url,
- type:post,
- dataType:"json",
- success:function(msg){
- dg.datagrid({columns:msg.columns});
- dg.datagrid({"loaddata",msg.rows});
- }
- });
}); - </script>
msg.columns格式：
{"columns":[msg.rows格式：
{"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}
]}
{"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 与武汉汉口