easyui之datagrid:动态生成列(动态报表)

我们都知道,使用easyui可以很容易的生成datagrid,代码如下:

_queryGrid = $("#datagrid_queryReport").datagrid({
		url:urljson,
		queryParams:parData,
		fitColumns:true,
		width:$(window).width() - 5,
		height:$(window).height()-45,
		showFooter:true,
		rownumbers:true,
		loadMsg:"玩命加载中。。。",
		fit:false,
		columns:[[{
ield:'id',
align:'center',
title:'ID',
sortable:true,
width:10
},{
field:'name',
title:'名称',
sortable:true,
width:50
}]]
});

但实际项目中,有一个动态报表的需求,根据前太页面的选择列,然后生成动态的表格数据。于是,需要解决easyui如何动态创建列的问题,参考博客:http://blog.csdn.net/tonytfjing/article/details/40001547

我的解决方法是:

1、根据选择的列,后台动态生成easyui的columns对象,传到前端;

2、根据动态生成的columns对象,构建一个动态datagrid

var col = [];
$(function(){
	var urljson = '';
		
	$.doAjax({
			   url :'<%=basePath %>report/generateGrid',
			   async : false,
			   data:qf+"&gourpFields="+$.toJSONString(gf),
			   callback: function(_data){
				   //alert($.toJSONString(_data));
				   col.push(_data);
				   //alert($.toJSONString(col));
			   }
	});
	urljson = '<%=basePath %>report/generateReport?'+qf+"&buyerFilter="+bf+"&adFilter="+af;
	var parData = {
			"timeType":ttc,
			//"buyerFilter":bf,
			//"adFilter":af,
			"buyerIsNot":isNotB,
			"adIsNot":isNotA,
			"startTime":strc,
			"stopTime":stc,
			"timeRange":trc,
			"groupFields":$.toJSONString(gf)
	};
	
	
	_queryGrid = $("#datagrid_queryReport").datagrid({
		url:urljson,
		queryParams:parData,
		fitColumns:true,
		width:$(window).width() - 5,
		height:$(window).height()-45,
		showFooter:true,
		rownumbers:true,
		loadMsg:"玩命加载中。。。",
		fit:false,
		columns:col
	});
	_queryGrid.datagrid('doCellTip',{   
        onlyShowInterrupt:false,   
        position:'bottom'
	});
	
	
});




你可能感兴趣的:(web前端)