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' οnclick='javascript:removeMaterialRow(" + index + ");'>移除</a>"; } } ]; return cols; } function getStoreCaption() { var s = ""; if (workTable != null) s = workTable.sStorerCaption; if (s == null || s == "") return "仓库"; return s; }