转载 -- jquery easyui datagrid 动态表头 + 嵌套对象属性展示

时间:2023-03-08 16:36:34
转载 -- 	jquery easyui datagrid 动态表头 + 嵌套对象属性展示

代码功能:

1、datagrid 的表头由后台生成,可以配置在数据库

2、datagrid 的列绑定数据 支撑嵌套对象

$(function() {
var columns = new Array();
var cols = new Array();
var colData = new Object(); $.post("url","params",function(data){
//动态生成表头开始
if(data.xxxx != null){
$.each(data.xxxx,function(){
colData = new Object();
colData.field = this.resCode;
colData.title = this.resName;
colData.width = 100;//也可以配置在数据库,这样整个页面的生成全部是配置的
colData.formatter = function(value,row,index){ //这两句是嵌套对象属性绑定,insideObject 为嵌套的对象,field 为对象的属性
//datagrid 的field不能重复,注意在绑定field 时不能全部用 insideObject,需要使用 insideObject 的属性绑定
var field = this.field;
return row.insideObject[field]; };
cols.push(colData);
});
};
columns.push(cols);
//动态生成表头结束 var gridCfg = {
fit : true,
loadMsg : '数据加载中......',
url : opts.resDataQueryUrl,
nowrap : true,
border : false,
striped : true,
pagination : true,
pageSize : opts.pageSize,
rownumbers : true,
singleSelect: false,
columns : columns,
fitColumns : false,
queryParams : {},
frozenColumns : [[
{field:'ck',checkbox:true}
]],
onLoadSuccess:function(data){
}
};
$('#id').datagrid(gridCfg); }); });