Easui中datagrid實現動態控制columns

轉載自：http://blog.csdn.net/majian_1987/article/details/8126168

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格式，很重要，不能錯！如果格式不對，就不能正常工作。