esayui datagrid 动态列

今天碰到一个需求,查询数据列表的列会根据查询条件而变化.有多少组区域(区域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+'\');"><font color="red"><u>'+value+'</u></font></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+'\');"><font color="red"><u>'+value+'</u></font></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进去.但是你可以看到违法信息和操作也作为动态的字段了.其实这两个是变的,但是要放到最后,所以我就直接拼到最后去了.你可以尝试一下,看看怎么能放到最开始的初始化里面.