easyui之datagrid動态修改列

easyui datagrid 定義列的方式通常是：

$('#grid').datagrid({columns:[[  
    {field:'f1',title:'字段1',width:160},  
    {field:'f2',title:'字段2',width:160}  
]]}); 
           

但在實際項目中，我們會經常需要datagrid能動态生成列。

在網上搜了一篇文章：再次談談easyui datagrid 的資料加載

很佩服這個作者，他居然能在easyui那一堆滿是數字和字母組合的變量的被混淆的源碼中，找到自己想要擴充的功能。。。強！

但是我不喜歡這種方式。畢竟修改源碼有很多副作用，還是喜歡原生态。

動态生成列，這個很常見的需求，easyui不太可能不支援。

隻是官方文檔沒有提到而已，可能作者是想靠這些進階功能賺咨詢費。。。

說了很多廢話，現在貼出我費了不少周折搞定的方法：

var options={};  
$(function(){  
    var myNj = 9;  
    //初始化  
    $("#disgrid").datagrid({  
        type: 'POST',  
        nowrap: false,  
        striped: true,  
        fit:true,  
        width:1024,  
        height:500,  
        url:'',  
        pageSize:30,  
        remoteSort: false,  
        pagination:true,  
        rownumbers:true,  
        singleSelect:true,  
        queryParams:{  
            nj:myNj,  
            unitType:1  
        }  
    });   
      
    fetchData(myNj);  
});  
  
function fetchData(nj) {  
    var s = "";  
    s = "[[";  
    s = s + "{field:'unitname',title:'單元',width:160},{field:'practicetime',title:'測試時間',width:160},{field:'userid',title:'userid',width:120,hidden:'true'},{field:'serial',title:'serial',width:120,hidden:'true'},{field:'unitid',title:'unitid',width:100,hidden:'true'},";  
      
    //lu todo 列的定義可從伺服器獲得  
    if (nj==9) {  
        s = s + "{field:'aipanel_text_exam',title:'短文朗讀',width:80},{field:'aipanel_scene_exam',title:'情景對話',width:80},{field:'aipanel_oral_exam',title:'簡短說話',width:80}";  
  
        //lu 加一個計算列  
        s = s + ",{field:'tatal_score',title:'總分',width:60,formatter:function(value,rec){return paraseIntValue(rec.aipanel_text_exam)+paraseIntValue(rec.aipanel_scene_exam)+paraseIntValue(rec.aipanel_oral_exam);}}";  
    }else if (nj==7||nj==8){  
      //....  
  }  
    s = s + "]]";  
    options={};  
    options.url = '/app/search.do';  
    options.queryParams = {  
        nj:nj,  
        unitType:1  
    };  
    options.columns = eval(s);  
    //lu 增加一列  
    options.columns[0].push(  
        {  
            field:'desc',title:'檢視詳情',width:60,  
            formatter:function(value,rec){  
                return "<a href=\"javascript:showDescInfo(\'"+rec.serial+"\',\'"+rec.scene_score+"\',\'"+rec.total_score+"\');\">詳情</a>";  
            }  
        }     
    );  
      
    $('#disgrid').datagrid(options);  
    $('#disgrid').datagrid('reload');     
      
}  
           

是不是覺得很簡單？優雅的原生支援。。。

需要注意的是，列定義的JSON格式，很重要，不能錯！如果格式不對，就不能正常工作。