easyUi的dataGrid動態改變列、列標題等

easyUi的dataGrid動態改變列、列標題等。

參考官方文檔：http://www.jeasyui.net/tutorial/27.html，其中說明：“請記住，我們已經定義了其他屬性，比如：url、width、height 等等。我們不需要再一次定義它們，我們定義那些我們需要改變的。”

實際代碼：

function initList() {
    //初始化表格
    $('#matList').datagrid({
        height: 300,
        url: '', 
        idField: 'sID',
        striped: true,
        fitColumns: true,
        singleSelect: false,
        rownumbers: true,
        pagination: false,
        nowrap: false,
        showFooter: true,
        columns: [
            getColumns()
        ],
        toolbar: [
            {
                text: '選擇項目',
                iconCls: 'icon-add',
                handler: handlerAdd
            }
            ,
            {
                text: '確認選擇',
                iconCls: 'icon-edit',
                handler: handlerAccept
            },
            {
                text: "清空表格",
                iconCls: "icon-cancel",
                handler: function () { $('#matList').datagrid('loadData', { total: 0, rows: [] }); }
            }
        ],
        onBeforeLoad: function (param) {
        },
        onLoadSuccess: function (data) {
        },
        onLoadError: function () {
        },
        onClickCell: function (rowIndex, field, value) {
            onClickCell(rowIndex, field);
        }
    });
}
//列
function getColumns() {
    var cols =
    [
        { field: 'ID', title: '子項ID', width: 90, hidden: true },
        { field: 'sItemID', title: '商品編號', width: 90, hidden: true },
        { field: 'sItemIDName', title: '商品名稱', width: 90, align: 'left' },
        { field: 'sUnit', title: '規格', width: 50, align: 'left' },
        { field: 'sUnitName', title: '單位', width: 50, align: 'left' },
        {   //倉庫編號列，標題從業務類型中讀取，數據來自數據集
            field: 'sStore', title: getStoreCaption(), width: 90, align: 'left',
            editor: {
                type: 'combobox',
                editable: false,
                options: {
                    valueField: 'sID',
                    textField: 'sName',
                    data: storeComboboxDatasource
                }
            },
            formatter: function (value, row, index) {
                for (var i = 0; i < storeComboboxDatasource.length; i++) {
                    if (storeComboboxDatasource[i].sID == value) {
                        return storeComboboxDatasource[i].sName;
                    }
                }
                return row["sStore"];
            }
        },
        {
            field: 'nCount', title: '數量', width: 50, align: 'left',
            editor: {
                type: 'numberbox',
                options: {
                    min: 0,
                    precision: 2
                }
            }
        },
        {
            field: 'nPrice', title: '單價', width: 50, align: 'right', editor: {
                type: 'numberbox',
                options: {
                    min: 0,
                    precision: 2
                }
            }
        },

        {
            field: 'nAgio', title: '優惠金額', width: 50, align: 'right', editor: {
                type: 'numberbox',
                options: {
                    min: 0,
                    precision: 2
                }
            }
        },
        { field: 'nMoney', title: '金額', width: 50, align: 'right' },
        {
            field: 'op', title: '操作', width: 80, align: 'left', formatter: function (value, row, index) {
                return "<a style='color:blue;cursor:pointer' onclick='javascript:removeMaterialRow(" + index + ");'>移除</a>";
            }
        }
    ];
    return cols;
}
function getStoreCaption() {
    var s = "";
    if (workTable != null) s = workTable.sStorerCaption;
    if (s == null || s == "") return "倉庫";
    return s;
}