关于动态构造列的问题记录

在开发中，通常会碰到这样的需求，页面表体的列是不固定的，例如：我选择一个类型，表体会根据我选择的类型，构造出对应的列。如何解决这个问题呢？核心思想是两个：

1.第一个是前台js动态生成datagrid配置

2.第二个是后台json动态装配

接下来简单介绍一下动态构造列的过程：

动态生成datagrid:

function constructGrid(grid,dimens){
//这里拼接对象时将双引号替换成单引号，单引号替换成双引号，避免参照界面的访问地址中有用单引号传参
strhtml = '';
strhtml +='columns: ['
        strhtml += '{ type: "indexcolumn" },'
        var strdim = dimens.split(',');
//动态构造列
if(dimens!=''){
for(var i=0;i<strdim.length;i++){
var str = strdim[i].split(':');
//console.log(str);
if(str[1]!=''){
if(strdim[i].pk_name!=''){
var url=str[2].replace(/\"/g, "'");
strhtml += '{ field: "F'+str[1]+'",displayField:"F'+str[1]+'PK",width: 100, headerAlign: "center",type: "datepicker",header: "'+str[0]+'",editor: {name:"'+url+'", type: "buttonedit",onbuttonclick:"onDimenClick(this)",id:"'+str[0]+'"}},'
//header原来的值:header: "'+str[0]+'"
}
}
}
}

strhtml += '{ field: "standardlimit",width: 100, headerAlign: "center",header: "标准限额",editor: { type: "textbox"}},'
      strhtml += '{ field: "standardexplain", width: 100, headerAlign: "center",header: "标准说明",editor: { type: "textbox"}}'
     
        strhtml += ']'
     

  strhtml=eval(strhtml);----eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码

grid.set({columns:strhtml});        

}

后台动态装配json

后台只要根据前台所需的格式进行构造即可，可以借助list和map来实现，这里不做过多说明。