esayui datagrid 动态列

ゝ一世哀愁。 2022-08-22 12:21 224阅读 0赞

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

网上搜索实践后,发现最简单的就是将会变动的列抽出来,使用columns:\[dynamicColumn\]来初始化.不变的列使用frozenColumns:\[\[\{field:'test1',title:'',width:10,align:'center'\}\]\]来初始化化.在查询时,根据当前需要来重新给dynamicColumn赋值,其实dynamicColumn就是一个map,自己组装.在数据加载成功后,执行$('\#tt').datagrid(\{columns:\[\[dynamicColumn\]\]\});

我们来看一下具体的实例

首先,初始化datagrid:

getDynamicColumn();
 $('#tjDatagrid').datagrid({
 url: '',
 title: '轨迹统计',
 nowrap:false,
 rownumbers:true,
 striped:true,
 toolbar:'#toolbar',
 fitColumns:true,
 pageSize:20,
 pagination:true,
 frozenColumns:[[
 	 {field:'ck',title:'',width:fixWidth(0.08),align:'center', //checkbox:true,
 	 				formatter:function(value,row,index){
 return '<input type="checkbox" name="checkId_son" id="'+row.GCXH+'" value="'+value+'" >';
 			 }
 	 },	
 		 {field:'hphm',title:'号牌号码',width:fixWidth(0.12),align:'center'},
 		 {field:'HPZLMC',title:'号牌种类',width:fixWidth(0.12),align:'center'},
 		 {field:'HPYSMC',title:'号牌颜色',width:fixWidth(0.12),align:'center'}/* ,
 		 {field:'WFXX',title:'违法信息',width:fixWidth(0.12),align:'center',
 		 formatter:function(value,row,index){
 		 if(value==null){
 		 value=0; 
 		 return value;
 		 }
 		 return '<a href="#" class="link" οnclick="jcbkComm.forwardViolation(\''+row.hphm+'\',\''+row.hpzl+'\');">'+value+'</a>';
 		 }
 		 	 		},
 		 		{field:'OPERATION',title:'操作',width:fixWidth(0.12),align:'center',
 			formatter:function(value,rec,index){
 				return "<a href=\"javascript:queryGjImage('"+rec.hphm+"','"+rec.hpzl+"','"+rec.hpys+"')\"><img src='images/Iicon7.gif' title='图片浏览' /></a>"
 			}
 		 	 		} */
 	 ]],
 	 columns:[dynamicColumn],
 onClickRow:function (rowIndex,rowData){
 	$('#lastVehDiv').slideDown();
 	 	var fxlx= $('#g_fxlx').val();
 	var condition=$("#g_jsontext").val();
 		jcbkComm.lastVehDetail('lastVehDiv',rowData.hphm,rowData.hpzl,rowData.hpys,fxlx,condition);
 },
 onBeforeLoad:function (param) {
 tjkssj = new Date().getTime();
 },
 onLoadSuccess:function (data) {
 	 dynamicGjDatagrid();
 if(data.pagesign == "0") {
 tjjssj = new Date().getTime();
 $("#tjhs").html(formatFloat((tjjssj-tjkssj)/1000,1)+"秒"); 
 }
 } 
 });

我们可以看到,在onLoadSuccess里面执行dynamicGjDatagrid()方法.这个方法是用来重载列的,我们只需要对变动的东西重新渲染,还是十分方便的,省了很多事情,来看看代码:

// 重载动态区域地段
    		function dynamicGjDatagrid(){
    			getDynamicColumn();
    			$('#tjDatagrid').datagrid({
    				columns:[dynamicColumn]
    			});
    		}

在dynamicGjDatagrid()里面调用了getDynamicColumn()方法,这个方法就是用来组装动态的column的:

// 动态区域字段组装
 function getDynamicColumn(){
 	dynamicColumn.length = 0;
 	for(var v=1; v<=k; v++){ 
 	 var column={}; 
 	 var field = "area"+v;
 	 column["title"]="区域"+v; 
 	 column["field"]=field; 
 	 column["width"]=fixWidth(0.24/k);
 	 column["align"]="center";
 	 dynamicColumn.push(column);//当需要formatter的时候自己添加就可以了,原理就是拼接字符串. 
 	} 
 	var columnWfxx={}; 
 	var field = "area"+v;
 	columnWfxx["title"]="违法信息"; 
 	columnWfxx["field"]="WFXX"; 
 	columnWfxx["width"]=fixWidth(0.12);
 	columnWfxx["align"]="center";
 	columnWfxx["formatter"]=function(value,row,index){
 	 if(value==null){
 	 value=0; 
 	 return value;
 	 }
 	 return '<a href="#" class="link" οnclick="jcbkComm.forwardViolation(\''+row.hphm+'\',\''+row.hpzl+'\');">'+value+'</a>';
 	 };
 dynamicColumn.push(columnWfxx); 
 	var columnOpreation={}; 
 	var field = "area"+v;
 	columnOpreation["title"]="操作"; 
 	columnOpreation["field"]="OPERATION"; 
 	columnOpreation["width"]=fixWidth(0.12);
 	columnOpreation["align"]="center";
 	columnOpreation["formatter"]=function(value,rec,index){
 		return "<a href=\"javascript:queryGjImage('"+rec.hphm+"','"+rec.hpzl+"','"+rec.hpys+"')\"><img src='images/Iicon7.gif' title='图片浏览' /></a>"
 	};
 dynamicColumn.push(columnOpreation); 
 }

到这里,程序就结束了.解释一下里面fixWidth(precent)是工具js里面的一个计算宽度的方法.

一开始的时候,我是在点击查询后,就调用重载动态字段dynamicGjDatagrid()方法.这样不好.如果上次查询区域数与当前查询区域数不一样,在查询数据等待的过程中,由于表头提前加载了,会导致页面不和谐.所以把dynamicGjDatagrid()方法放在数据加载成功之后调用比较好.

在动态字段组装的方法getDynamicColumn()里面, 每次要把dynamicColumn清空,将拼好的column push进去.但是你可以看到违法信息和操作也作为动态的字段了.其实这两个是变的,但是要放到最后,所以我就直接拼到最后去了.你可以尝试一下,看看怎么能放到最开始的初始化里面.