easyUI datagrid 动态绑定列名称

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

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

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

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

datagrid表头json格式：

第一种，在前端页面直接写columns属性：

<script type="text/javascript">
$('#tab').datagrid({
width:810,
height:400,
idField:'xsbh',
url:url,
singleSelect:true,
columns:[[
{field:'xsbh',title:'编号',width:80},
{field:'UserName',title:'姓名',width:100},
{field:'Sex',title:'性别',width:30},
{field:'SchoolYear',title:'年份',width:50},
{field:'opt',title:'操作',width:100,align:'center'}
]]
});
</script>

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

<script type="text/javascript">
var dg=null;
dg=$('#tab').datagrid({
width:810,
height:400,
idField:'xsbh',
//url:url,
singleSelect:true,
columns:[[
/*
{field:'xsbh',title:'编号',width:80},
{field:'UserName',title:'姓名',width:100},
{field:'Sex',title:'性别',width:30},
{field:'SchoolYear',title:'年份',width:50},
{field:'opt',title:'操作',width: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":[
       {"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 与武汉汉口

秒客网

easyUI datagrid 动态绑定列名称

相关文章