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

素颜马尾好姑娘i 2021-09-10 12:40 476阅读 0赞

我们都知道，使用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'
    	});
    	
    	
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，476人围观）

还没有评论，来说两句吧...

相关阅读

相关 WPF的DataGrid动态生成列

在后台直接创建每一列，并bind 在XMAL的WIndow中，定义一个x:Nam ="dataShow"的DataGrid控件后台，在Load事件中，可以这样写 dat

谁践踏了优雅/ 2023年11月15日 06:01/ 0 赞/ 172 阅读

相关 esayui datagrid 动态列

今天碰到一个需求,查询数据列表的列会根据查询条件而变化.有多少组区域(区域1,区域2...),查询结果就要有多少列区域数(区域1,区域2..),限制区域数最多5组. 网上搜索

ゝ一世哀愁。/ 2022年08月22日 12:21/ 0 赞/ 264 阅读

相关【datagrid】动态加载列

之前我们的项目在前台显示只需要把数据从数据库读出来进行显示就可以，datagrid的表头字段都是写死的，把数据往表里一扔，就基本没什么事儿了，结果客户前几天要求，

亦凉/ 2022年08月19日 04:48/ 0 赞/ 228 阅读

相关 springmvc+easyui实现透视表-动态生成列

项目需求里面要求实现一个类似于excel里透视表的功能，大致意思就是选择对应的数据库之后，行标签和列标签都是可选的，然后在页面上就生成对应的相关记录。例如，我选择“财务信

悠悠/ 2022年08月13日 03:29/ 0 赞/ 183 阅读

相关动态显示/隐藏 DataGrid 的列

在List中选中一个就会显示相应的 DataGrid 的列。 <?xml version="1.0" encoding="utf-8"?> <mx:Applica

快来打我*/ 2022年08月07日 06:48/ 0 赞/ 269 阅读

相关动态创建DataGrid 列

这个例子是根据XML中的节点值来创建DataGrid中的列，并且还包含了一些对列的属性得设置。 <?xml version="1.0" encoding="utf-8"

朴灿烈づ我的快乐病毒、/ 2022年08月07日 06:48/ 0 赞/ 225 阅读

相关【easyui】动态显示datagrid列

以前做法 $("datagridId").datagrid("hideColumn", "columnField"); // 设置隐藏列现在做法

深藏阁楼爱情的钟/ 2022年06月13日 06:18/ 0 赞/ 391 阅读

相关 EasyUI实践之路之datagrid（菜单栏、工具栏、格式化、动态换列）

一、datagrid： 1、table菜单栏：先在div中添加<a easyui-linkbutton>，再在table 属性中设置toolbar=div的id；

傷城~/ 2022年05月24日 06:26/ 0 赞/ 262 阅读

相关 easyui之datagrid：动态生成列(动态报表)

我们都知道，使用easyui可以很容易的生成datagrid，代码如下： _queryGrid = $("datagrid_queryReport").datagri

素颜马尾好姑娘i/ 2021年09月10日 12:40/ 0 赞/ 477 阅读

相关 easyui之datagrid动态修改列

easyui datagrid 定义列的方式通常是： $('grid').datagrid({columns:[[ {field:'f1',tit

水深无声/ 2021年06月24日 14:34/ 0 赞/ 680 阅读