EasyUI中DataGrid動態(tài)參數(shù)的實(shí)現(xiàn)

騫諱護(hù) 發(fā)布于2019-08-20 13:45 / 1088人閱讀

摘要：在的表頭列特別多的情況下，不可能一個(gè)個(gè)的手寫，這時(shí)就需要使用動態(tài)創(chuàng)建的方式，把表頭列創(chuàng)建出來。正在加載，請稍候組裝動態(tài)參數(shù)，可以是后臺返回的注意是數(shù)組對象，不能采用拼接字符串的方式構(gòu)造應(yīng)采用下面方式進(jìn)行構(gòu)造設(shè)備型號

在datagrid的表頭列特別多的情況下，不可能一個(gè)個(gè)的手寫，這時(shí)就需要使用動態(tài)創(chuàng)建的方式，把表頭列創(chuàng)建出來。

下面是datagrid中columns的格式

    columns:[[
        {field:"id",title:"組織機(jī)構(gòu)編號",width:"7%"},
        {field:"name",title:"組織機(jī)構(gòu)名稱",width:"15%"},
        {field:"computer",title:"計(jì)算機(jī)設(shè)備類",width:"7%",
            styler: function(value,row,index){
                return "background-color:#ffee00;color:red;";
        }},
        {field:"SG_AUT_SERVER_B",title:"服務(wù)器",width:"7%"}
    ]]

下面例子是treegrid，和datagrid是一樣的。
采用 $("#treegrid1").treegrid(options)方法，生成表格。

    var options ={};
    options.url = "<%=basePath %>back/intequery/getDevModelList";
    options.rownumbers = true;
    //options.pagination = true;
    options.singleSelect = true;
    //options.pageList = [10];
    //options.striped = true;
    options.fit = true;
    options.loadMsg = "正在加載，請稍候……";
    options.idField = "ID";
    options.treeField = "NAME";
    var tableName = $("#devtab").tabs("getSelected").panel("options").id;
    options.queryParams = {tableName:tableName.substring(0,ableName.lastIndexOf("_B"))};
    var array2 = [];
    array2.push(array1); //組裝動態(tài)參數(shù)，array1可以是后臺返回的JSONArray
    options.columns = array2;
    $("#treegrid1").treegrid(options);

注意：columns是數(shù)組對象，不能采用拼接字符串的方式構(gòu)造！

應(yīng)采用下面方式進(jìn)行構(gòu)造

    var array3 = [];
    array3[0] = new Object(); 
    array3[0].field = "NAME";
    array3[0].title = "設(shè)備型號";
    array3[0].align = "left";
    array3[0].width = "400";
    var array4 = [];
    array4.push(array3);