在工作中遇到需求:用户可以根据自身的需求设置列表显示哪些列的信息并且这些列的顺序也是可以改变的。而以往正常的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层数据结构了。但核心还是拼接要求的字符串。