easyui datagrid 动态生成列

 最近有项目需求,显示动态列,也就是根据配置的列,进行动态加载

项目原型为:

实现效果:

 

------获取列,用ajax去动态获取 

    function getCols() {
        var masterid = '666666';
        var bizType = '整车';
        var columns = [];
        $.ajax({
            url: '../../CVRM/DT_PurchaseQuote/GetDynamicColumnByMasterID?masterID=' + masterid + '&quoteType=采购价' + '&bizType=' + bizType,
            type: 'GET',
            async: false,
            dataType: 'json',
            success: function (data) {
                if (data != null && data.length > 0) {
12                     $.each(data, function (i, item) {
13                         columns.push({ "field": 'ID_' + item.ColumnID.toString(), "title": item.ColumnTitle, "width": 100, editor: { type: 'numberbox' } });
14                     });
15                 }
            }
        });

        return columns;
    }

-----动态拼接组合成 array  并赋值就可以了

  //加载运费表格
    function GetFRTGrid(pqid) {

        var colss = getCols();
      


        var cols = [
                { field: 'ck', checkbox: true },
                { title: 'FRTID', field: 'FRTID', align: 'center',  60, hidden: true },
                { title: '采购报价ID', field: 'PQID', align: 'center',  60, hidden: true },
                { title: '起运区域ID', field: 'LoadingLocID', align: 'center',  60, hidden: true, editor: { type: 'text' } },
                { title: '目的区域ID', field: 'UnloadingLocID', align: 'center',  60, hidden: true, editor: { type: 'text' } },
                { title: '品名ID', field: 'MaterialNo', align: 'center',  60, hidden: true, editor: { type: 'text' } },

                {
                    title: '起运区域', field: 'LoadingLocName', align: 'center',  210, editor: {
                        type: 'combogrid', options: {
                            panelWidth: 210,
                            mode: 'remote',
                            method: 'get',
                            idField: 'AreaName',
                            textField: 'AreaName',
                            method: 'get',
                            url: '/Master/TransportationArea/GetListFromComGrid',
                            columns: [[
                                { field: 'TransportationAreaID', title: 'ID',  '60', hidden: true },
                                { field: 'AreaName', title: '装箱/罐区域',  '200' },
                            ]]
                        }
                    }
                },
                {
                    title: '目的区域', field: 'UnloadingLocName', align: 'center',  210, editor: {
                        type: 'combogrid', options: {
                            panelWidth: 210,
                            mode: 'remote',
                            method: 'get',
                            idField: 'AreaName',
                            textField: 'AreaName',
                            method: 'get',
                            url: '/Master/TransportationArea/GetListFromComGrid',
                            columns: [[
                                { field: 'TransportationAreaID', title: 'ID',  '60', hidden: true },
                                { field: 'AreaName', title: '拆箱/罐区域',  '200' },
                            ]]
                        }
                    }
                },

                {
                    title: '箱型', field: 'ContainerType', align: 'center',  110, editor: {
                        type: 'combogrid', options: {
                            panelWidth: 110,
                            mode: 'remote',
                            method: 'get',
                            idField: 'StandarCode',
                            textField: 'StandarCode',
                            method: 'get',
                            url: '/Master/ContainerType/GetContainerTypeListForGrid',
                            columns: [[
                                { field: 'ContainerTypeNo', title: 'No', hidden: true },

                                { field: 'StandarCode', title: '箱型',  '100' },
                            ]]
                        }
                    }
                },
                {
                    title: '货物类型', field: 'GoodsType', align: 'center',  100, editor: {
                        type: 'combobox',
                        options: {
                            valueField: 'ItemValue',
                            textField: 'ItemName',
                            method: 'get',
                            url: "/SysManage/CodeDetail/GetCodeJson?codetype=VRM_CT_MarketQuoteFRT_GoodsType",
                        },
                    }
                },
                { title: '最低收费( 元 )', field: 'Rate',  120, align: 'left', editor: { type: 'numberbox', options: { precision: 2, required: true } } },

                { title: '时效（天）', field: 'LeadTime', align: 'center',  150, editor: { type: 'numberbox' }, options: { precision: 1 } },
                { title: '里程 ( 公里 )', field: 'Distance', align: 'center',  150, editor: { type: 'numberbox', options: { required: true } } },
                {
                    title: '危险品等级', field: 'DGClass',  100, align: 'left', editor: {
                        type: 'combobox',
                        options: {
                            valueField: 'ItemValue',
                            textField: 'ItemName',
                            method: 'get',
                            url: "/SysManage/CodeDetail/GetCodeJson?codetype=DangerClass",
                        }
                    }
                },
                {
                    title: '品名', field: 'MaterialNameC',  150, align: 'left', editor: {
                        type: 'combogrid', options: {
                            panelWidth: 430,
                            delay: 500,
                            mode: 'remote',
                            method: 'get',
                            idField: 'MaterialNameC',
                            textField: 'MaterialNameC',
                            method: 'get',
                            url: '/Master/Commodity/GetCommodityListForGrid',
                            columns: [[
                                { field: 'MaterialNo', title: '品名编号',  '100' },
                                { field: 'UNCode', title: 'UNNo',  '100' },
                                { field: 'MaterialNameC', title: '品名',  '100' },
                                { field: 'ClassNo', title: '危险品等级',  '120' },
                            ]]
                        }

                    }
                },
                { title: 'UNNo', field: 'UNNo',  120, align: 'left', editor: { type: 'text' } },
                { title: '备注', field: 'Comment',  200, align: 'left', editor: { type: 'text' } },
        ];


121         if (colss.length > 0) {
122             $.each(colss, function (i, item) {
123                
124                 cols.push(item);
125             });
126         }


        $('#gridTableFRT').datagrid({
            pageSize: 50,
            pageList: [50, 100, 200, 500, 1000],
            pagination: false,
            singleSelect: false,
            selectOnCheck: true,
            sortName: 'FRTID',
            sortOrder: 'asc',
            url: '../../CVRM/PurchaseQuote/GetPurchaseQuoteDFFListById',
            queryParams: { keyValue: pqid },
            method: 'get',
     columns: [cols],

            onLoadSuccess: function (data) {
                $("#gridTableFRT").datagrid("resize");
            },
        })
        gridEditFRT = new com.editGridViewModel($('#gridTableFRT'));

        $('#gridTableFRT').datagrid('resize', {  ($('.gridPanel').width()), height: ($(window).height() - $('.gridPanel').height() - 240) });}
}

标记为红色的部分就是关键部分代码,提供了简单思路.