easyui datagrid 动态添加columns属性

公司在项目设计的时候，有一个需求，就是查出来的表的字段不唯一，一张表的字段可能是三个，也可能是五个，但是却要把它显示到页面，这个给我做ui的带来一点麻烦。因为以前一般用easyui 的datagrid里的columns属性都是对应数据库表里的字段，现在字段都不知道，怎么用datagrid显示数据呢？本人在这里介绍最笨的办法，就是拼接出columns 属性的格式，我承认，我的办法效率不高，但是当你无从下手的时候，，这未尝不是解决问题的办法，当然在解决这个问题之前，我也百度了一下，试了一些办法，有的是是去更改datagrid里的方法，以及从新构造里的的方法，本人是菜鸟，太高深的东西看不懂，所以只用了这个本办法。

第一步：获取这个张表的所有列，（表名你应该知道的），我用的是mysql数据库，所以根据表名获取的sql是：

select column_name from INFORMATION_SCHEMA.columns where table_name='tableName'  and TABLE_SCHEMA='dbName'；

tableName：是你的表的名字：dbName：是你的数据库的名字。该条sql语句执行的是结果是（这是本人表）：

这样就获取表的字段。

第二步：编写js代码,获取后台的方法我就不在此介绍。

var array =[];
var columns=[];
$.ajax({
        url:_ctx+'/nodeManage/getMysqlFields',
        type:'POST',
        data:'id='+node['id'],
        success:function(data){//data后台的传过来的表字段数组
              $(data).each(function(){
                  array.push({field:'',title:'',width:''});
               });
               columns.push(array);
               $(data).each(function(index,el){
                      columns[0][index]['field']= el['column_name'].toLocaleLowerCase();
                      columns[0][index]['title']= el['column_name'];
                      columns[0][index]['width']= "130";
               });
               $('#dg').datagrid({
                         fit:true,checkOnSelect:true,  selectOnCheck:true,   singleSelect:true,toolbar:'#queryToolbar',
                         pageSize : 5,
                         columns:columns,
                         dataType: 'json',
                         pageList: [5,10,30,50,70,100],
                         pageNumber : 1,
                         pagination:true,
                         queryParams:{id:node['id']},
                         url:_ctx+'/nodeManage/getMd5Datagrid'
               });
            },
            dataType:'json'
 });

 

解题思路：
首先我们知道datagrid colums的属性格式是：[[{field:'createtime',title:'创建时间',width:130},{field:'updatetime',title:'更新时间',width:130},]]。

一开始我以为是字符串，但是当我用console.info()输出带控制台的时候，发现它是个对象，所以一开始字符串拼接就是错了。所以要想动态构造column 的属性格式，必备按照它原来的格式来。
所在我定义两个数组，array[],colums[](这个columns 是我自定的数组对象，不是datagrid的属性)。

$(data).each(function(){
    array.push({field:'',title:'',width:''});
 });这个方法是为了给array添加一定长度的内容，让后在将这个array通过push()放进自己定义的columns里，这样我们的得到的columns的对象格式就是跟datagrid 一样，然后将自定义的columns付给dagagrid的columns属性（别晕呀）。

$(data).each(function(index,el){
       columns[0][index]['field']= el['column_name'].toLocaleLowerCase();（因为field的值必须是小写，用过的都知道，为了防止数据库里建字段的时候你的是大写，所以在这里做个转换）
       columns[0][index]['title']= el['column_name'];
       columns[0][index]['width']= "130";
});这一步是给刚定义的columns数组赋值，也就是你从后台获取的字段名。像formatter：functions(value,row,index){}也可以在次添加，这里用了两次循环，比较烦。
 我再次承认效率上是存在问题的，欢迎请大家品评与指正！