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){}也可以在次添加，這里用了兩次循環，比較煩。
 我再次承認效率上是存在問題的，歡迎請大家品評與指正！