`
gougouqihao
  • 浏览: 6909 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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

    博客分类:
  • js
阅读更多

代码功能:

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);
	
	});

});

 

0
0
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics