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" onclick="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" onclick="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进去.但是你可以看到违法信息和操作也作为动态的字段了.其实这两个是变的,但是要放到最后,所以我就直接拼到最后去了.你可以尝试一下,看看怎么能放到最开始的初始化里面.