easyui中datagrid动态加载列表

本文介绍了一种在Datagrid中动态设置列显示及排序的方法,通过拼接columns属性实现列的动态加载,并提供了具体实现代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在工作中遇到需求:用户可以根据自身的需求设置列表显示哪些列的信息并且这些列的顺序也是可以改变的。而以往正常的datagrid的列的书写是这样的:
 columns:[[    
        {field:'code',title:'Code',width:100,hidden:false},    
        {field:'name',title:'Name',width:100,hidden:false},    
        {field:'price',title:'Price',width:100,align:'right'}    
    ]]   

正常情况下显示哪些列是定死的,无法满足要求。我一开始的想法是借助columns中的hidden属性,这样可以动态控制列的显示或者隐藏,可这样的做法虽然能满足动态加载列这以需求,但无法满足列排序的功能。所以放弃这一做法。

然后我就想可以通过拼接上述columns中的内容来达到我的需求。通过在网上查询拼接方法,网上主要有2种方式,第一种方式就是通过字符串的方式拼接上述的格式,但是我通过这种方式拼接好后无法实现,后来试了第二种方式,也是网上最多的一种方式,其实我感觉就是一个版本大家改了改,我参照了这种方式,这是链接。但是这用方式有些繁琐,经过同事的指点,稍微简化了一些。

		columns = function renderColumns(columns_){//columns_是你想显示的列的数据集合包括顺序
 				var _columns = [
					{field:'_checkbox','checkbox':true }
	 			];
 	 			$.each(columns_,function(index,el){
 	 				if(el['atterName']=="bomType"){//这里是当你想对某列进行格式化时,可以对此列额外添加(bomType,pBomInstanceId都是列属性名
 	 					_columns.push({field:el['atterName'],title:el['titleName'],width:120,sortable:true,
 	 						formatter:function(value,dataRow){
								if(1==value){
									return "<s:text name='main_parts'/>";
								}else if(2==value){
									return "<s:text name='associated_parts'/>";
								}
							}
 	 					});
 	 				}else if(el['atterName']=="pBomInstanceId"){
 	 					_columns.push({field:el['atterName'],title:el['titleName'],width:120,sortable:true,
 	 						formatter:function(value,dataRow){
 								if(""!=value&&null!=value){
 									return "是";
 								}else{
 									return "否";
 								}
 							}
 	 					});
 	 				}else{
 	 					_columns.push({field:el['atterName'],title:el['titleName'],width:120,sortable:true});
 	 				}
 	 			});
 				return _columns;
 			}
上述方法其实只是动态添加了一个一维数组,离目标要求的还差一步。不急只要再在columns外加上[ ]就行了

$('#dg').datagrid({    
    url:'datagrid_data.json',    
    columns:[columns]    
}); 
这样就不用像链接方法里的拼接2层数据结构了。但核心还是拼接要求的字符串。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值