EasyUI+Knockout实现经典表单的查看、编辑
此文章是基于 搭建Jquery+SpringMVC+Spring+Hibernate+MySQL平台
一. 准备工作
1. 点击此下载 ims.rar，解压缩并把文件放到 ims 工程对应的文件夹下
二. 前端框架特色
1. js库为 jquery-1.8.1.min.js
2. UI选用 jquery-easyui-1.3.2
3. 封装了一大部分比较实用的控件和组件，如自动完成控件、弹出控件、日期控件等
4. 选 knockoutjs 为前端mvvm框架
采用Knockout，提供了一个数据模型与用户UI界面进行关联的高层次方式（采用行为驱动开发）
5. css框架选用 960gs、sexybuttons、css3 btn
三. 相关文件介绍
1. jquery.easyui.fix.js
/** * 模块名：easyui方法修改 * 程序名: easyui.fix.js **/ var easyuifix = {}; /** * for easyloader.js * add after row 13 usage: easyuifix.addLoadModules(_1); */ easyuifix.easyloader_addLoadModules = function (modules) { $.extend(modules, { juidatepick: { js: rootPath+"/content/js/jquery-plugin/jquery-ui/js/jquery-ui-datepick.min.js", css: rootPath+"/content/js/jquery-plugin/jquery-ui/css/jquery-ui.css" }, daterange: { js: rootPath+"/content/js/jquery-plugin/daterange/jquery.daterange.js", css: rootPath+"/content/js/jquery-plugin/daterange/jquery.daterange.css", dependencies: ["juidatepick"] }, lookup: { js: rootPath+"/content/js/jquery-plugin/lookup/jquery.lookup.js", dependencies: ["combo"] }, autocomplete: { js: rootPath+"/content/js/jquery-plugin/autocomplete/jquery.autocomplete.js", dependencies: ["combo"] } }); }; /** * for easyloader.js * add after row 181 usage: easyuifix.easyloader_setting(easyloader, src); */ easyuifix.easyloader_setting = function (easyloader,src) { easyloader.theme = "default"; easyloader.locale = "zh_CN"; }; /** * for jquery.parser.js * add after row 89 usage: easyuifix.parser_addplugins($.parser.plugins); */ easyuifix.parser_addplugins = function (plugins) { var arr = ["daterange", "lookup", "autocomplete"]; for (var i in arr) plugins.push(arr[i]); }; /** * for jquery.tabs.js * add after row 415 usage: easyuifix.tabs_showtabonselect(_5d); */ easyuifix.tabs_showtabonselect =function(tab){ tab.show(); //打开时其它页签先隐藏,,提升用户体验，点击时再显示 } /** * for easyui-lang-zh_CN.js * add last row: easyuifix.lang_zh_CN(); */ easyuifix.lang_zh_CN = function () { if ($.fn.lookup) { $.fn.lookup.defaults.missingMessage = '该输入项为必输项'; } }; /** * for jquery.datagrid.js * add after row 1137 usage: easyuifix.datagrid_beforeDestroyEditor(_10a, _10b, row); * for jquery.easyui.min.js * add after row 7622 usage: easyuifix.datagrid_beforeDestroyEditor(_530, _531, row); */ easyuifix.datagrid_beforeDestroyEditor = function (jq, rowIndex, row) { var opts = $.data(jq, "datagrid").options; if (opts.OnBeforeDestroyEditor) { var editors = {}, list = $(jq).datagrid('getEditors', rowIndex) || []; $.each(list, function () { editors[this.field] = this; }); opts.OnBeforeDestroyEditor(editors, row, rowIndex, jq); } }; /** * for jquery.datagrid.js * add after row 1101 usage: easyuifix.datagrid_afterCreateEditor(_104, _105, row); * for jquery.easyui.min.js * add after row 7586 usage: easyuifix.datagrid_afterCreateEditor(_52a, _52b, row); */ easyuifix.datagrid_afterCreateEditor = function (jq, rowIndex, row) { var opts = $.data(jq, "datagrid").options; if (opts.OnAfterCreateEditor) { var editors = {}, list = $(jq).datagrid('getEditors', rowIndex) || []; $.each(list, function () { editors[this.field] = this; }); opts.OnAfterCreateEditor(editors, row, rowIndex, jq); } }; /** * for jquery.combo.js to convert disable to readonly * add after row 210 usage: easyuifix.combo_disableToReadonly(_32, _33); */ easyuifix.combo_disableToReadonly = function (jq, b) { var options = $.data(jq, "combo").options; var combo = $.data(jq, "combo").combo; if (b) { options.disabled = true; $(jq).attr("readonly", true); combo.find(".combo-value").attr("readonly", true).addClass("readonly"); combo.find(".combo-text").attr("readonly", true).addClass("readonly"); } else { options.disabled = false; $(jq).removeAttr("readonly"); combo.find(".combo-value").removeAttr("readonly").removeClass("readonly"); combo.find(".combo-text").removeAttr("readonly").removeClass("readonly"); } }; /** * for jquery.combobox.js to showblank * add after row 138 usage: easyuifix.combobox_showblank(_30, _2e); */ easyuifix.combobox_showblank = function (combobox, b) { if (combobox.showblank) { b.unshift(combobox.blankdefault); } } /** * for jquery.combobox.js to showblank * add after row 350 usage: easyuifix.combobox_defaultblank(); */ easyuifix.combobox_defaultblank = function () { $.fn.combobox.defaults = $.extend($.fn.combobox.defaults, { showblank: false, blankdefault: { value: '', text: '== 请选择 ==' } }); } /** * for datagrid.js * add after row 2065 usage: if (easyuifix) easyuifix.datagrid_editor_extend(); * use such as: using("lookup", easyuifix.datagrid_editor_extend); */ easyuifix.datagrid_editor_extend = function () { if ($.fn.datagrid) { if ($.fn.numberspinner) { $.extend($.fn.datagrid.defaults.editors, { numberspinner: { init: function (container, options) { var input = $('<input type="text">').appendTo(container); return input.numberspinner(options); }, destroy: function (target) { $(target).numberspinner('destroy'); }, getValue: function (target) { return $(target).numberspinner('getValue'); }, setValue: function (target, value) { $(target).numberspinner('setValue', value); }, resize: function (target, width) { $(target).numberspinner('resize', width); } } }); } if ($.fn.autocomplete) { $.extend($.fn.datagrid.defaults.editors, { autocomplete: { init: function (container, options) { var input = $('<input type="text" class="z-text datagrid-editable-input">').appendTo(container); return input.autocomplete(options); }, destroy: function (target) { $(target).autocomplete('destroy'); }, getValue: function (target) { return $(target).val(); }, setValue: function (target, value) { $(target).val(value); }, resize: function (target, width) { $(target).width(width); } } }); } if ($.fn.lookup) { $.extend($.fn.datagrid.defaults.editors, { lookup: { init: function (container, options) { var input = $('<input type="text" class="z-text datagrid-editable-input">').appendTo(container); return input.lookup(options); }, destroy: function (target) { $(target).lookup('destroy'); }, getValue: function (target) { return $(target).lookup('getValue'); }, setValue: function (target, value) { $(target).lookup('setValue', value); }, resize: function (target, width) { $(target).lookup('resize', width); } } }); } $.extend($.fn.datagrid.defaults.editors, { label: { init: function (container, options) { var input = $('<div></div>').appendTo(container); return input; }, destroy: function (target) { }, getValue: function (target) { return $(target).html(); }, setValue: function (target, value) { $(target).html(value); }, resize: function (target, width) { } } }); } }
easyUI方法修改，改善方法，提升用户体验；注释中提示方法作用的位置
2. knockout.bindings.js
/// <reference path="knockout-3.4.1.js" /> /** * 程序名: knockout自定义绑定 **/ (function ($, ko) { var jqElement = function (element) { var jq = $(element); if ($(document).find(element).length == 0) { //处理元素在父页面执行的情况 if ($(parent.document).find(element).length > 0) jq = parent.$(element); } return jq; }; /** * value binding * 例如：comboboxValue、lookupValue、combotreeValue */ ko.creatEasyuiValueBindings = function (o) { o = $.extend({ type: '', event: '', getter: 'getValue', setter: 'setValue', fix: $.noop,formatter: function (v) { return v; }}, o); var customBinding = { init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var jq = jqElement(element), handler = jq[o.type]('options')[o.event], opt = {}; //handle the field changing opt[o.event] = function () { handler.apply(element, arguments); var value = jq[o.type](o.getter); if (valueAccessor() == null) throw "viewModel中没有页面绑定的字段"; valueAccessor()(value); }; //handle disposal (if KO removes by the template binding) ko.utils.domNodeDisposal.addDisposeCallback(element, function () { jq[o.type]("destroy"); }); o.fix(element, valueAccessor); jq[o.type](opt); }, update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { value = ko.utils.unwrapObservable(valueAccessor()); jqElement(element)[o.type](o.setter, o.formatter(value)); } }; ko.bindingHandlers[o.type + 'Value'] = customBinding; }; ko.creatEasyuiValueBindings({ type: 'combobox', event: 'onSelect' }); ko.creatEasyuiValueBindings({ type: 'combotree', event: 'onChange' }); ko.creatEasyuiValueBindings({ type: 'datebox' , event: 'onSelect' , formatter: com.formatDate }); ko.creatEasyuiValueBindings({ type: 'lookup' , event: 'onChange' }); ko.creatEasyuiValueBindings({ type: 'numberbox' , event: 'onChange' }); /* * enable、disable binding * 例如：linkbuttonEnable、linkbuttonDisable */ ko.creatEasyuiEnableBindings = function (o) { o = $.extend({ type: '',method:'Enable', options:function(v){return 'disabled';}, value: function (v) { return !v; } }, o); var customBinding = { update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var enable = ko.toJS(valueAccessor()); $(element)[o.type](o.options(enable), o.value(enable)); } }; ko.bindingHandlers[o.type + o.method] = customBinding; }; ko.creatEasyuiEnableBindings({ type: 'linkbutton', options: function (b) { return {disabled:!b}; } }); ko.creatEasyuiEnableBindings({ type: 'linkbutton',method:'Disable', options: function (b) { return { disabled: b }; } }); _readOnlyHandles = {}; _readOnlyHandles.defaults = function (obj, b) { b ? obj.addClass("readonly").attr("readonly", true) : obj.removeClass("readonly").removeAttr("readonly"); }; _readOnlyHandles.combo = function (obj, b) { obj.combo(b ? "disable" : "enable"); }; /** * readonly binding * 例如：numberboxReadOnly、comboboxReadOnly，或者直接readOnly */ ko.creatEasyuiReadOnlyBindings = function (o) { o = $.extend({ type: '', handler: _readOnlyHandles.defaults }, o); var customBinding = { update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { o.handler($(element),ko.toJS(valueAccessor())); } }; ko.bindingHandlers[o.type ? (o.type + 'ReadOnly'): 'readOnly'] = customBinding; }; ko.creatEasyuiReadOnlyBindings(); //default readonly ko.creatEasyuiReadOnlyBindings({ type: 'numberbox' }); ko.creatEasyuiReadOnlyBindings({ type: 'combobox', handler: _readOnlyHandles.combo }); ko.creatEasyuiReadOnlyBindings({ type: 'datebox', handler: _readOnlyHandles.combo }); ko.creatEasyuiReadOnlyBindings({ type: 'combotree', handler: _readOnlyHandles.combo }); ko.creatEasyuiReadOnlyBindings({ type: 'lookup', handler: _readOnlyHandles.combo }); /** * datasource bingding */ ko.bindingHandlers.datasource = { init: function (element, valueAccessor) { var jq = jqElement(element); var ds = ko.toJS(valueAccessor()); if ($.isFunction(ds)) ds = ds.call(); if (jq.data('treegrid')) jq.treegrid('loadData', ds); else if (jq.data('datagrid')) jq.datagrid('loadData', ds); else if (jq.data('combotree')) jq.combotree('loadData', ds); else if (jq.data('combobox')) { var val = jq.combobox('getValue'), ds = ds.rows || ds; jq.combobox('clear').combobox('loadData',ds).combobox('setValue', val); } else if (jq.data('tree')) jq.tree('loadData', ds.rows || ds); } }; /** * grid binding * datagrid、treegrid */ ko.creatEasyuiGridBindings = function (gridType) { var gridBinding = { update: function (element, valueAccessor, allBindingsAccessor, viewModel) { var grid = jqElement(element), opts = ko.toJS(valueAccessor()), url = opts.url; var customLoader = function (queryParams) { if (opts.pagination) { var paging = grid.datagrid('getPager').pagination('options'); queryParams = $.extend(queryParams, { page: paging.pageNumber, rows: paging.pageSize }); } com.ajax({ type: 'get', url: url, data: queryParams, success: function (d) { if ($.isFunction(opts.afterCustomSuccess)) opts.afterCustomSuccess(d); grid[gridType]('loadData', d); } }); }; if (opts.treeField && opts.parentField) { //only for treegrid opts.loadFilter = function (data) { return utils.toTreeData(data.rows || data, opts.idField||opts.treeField, opts.parentField, "children"); }; } var handler = function () { if (grid.data(gridType)) { if (opts.customLoad) customLoader(opts.queryParams); else grid[gridType](opts); } else { var defaults = { iconCls: 'icon icon-list', nowrap: true, //折行 rownumbers: true, //行号 striped: true, //隔行变色 singleSelect: true, //单选 remoteSort: true, //后台排序 pagination: false, //翻页 pageSize: 20, contentType: "application/json", method: "POST" }; var winsize = function (size) { var ret = {}; if (size && size.w) ret.width = jqElement(window).width() - size.w; if (size && size.h) ret.height = jqElement(window).height() - size.h; return ret; }; opts = $.extend(defaults, opts, winsize(opts.size)); if (opts.customLoad) { if (opts.remoteSort) opts.onSortColumn = function (sort, order) { customLoader($.extend(opts.queryParams, { sort: sort, order: order })); }; grid[gridType](opts); customLoader(opts.queryParams); if (opts.pagination) grid[gridType]('getPager').pagination({ onSelectPage: customLoader }); } else grid[gridType](opts); valueAccessor()[gridType] = function () { return grid[gridType].apply(grid, arguments); } valueAccessor()['$element'] = function () { return grid; }; if (opts.size) jqElement(window).resize(function () { grid[gridType]('resize', winsize(opts.size)); }); } }; grid[gridType] ? handler() : using([gridType], function () { handler(); if (gridType=='treegrid') com.loadCss('content/images/icon/icon.css', document, true);//解决图标被tree.css覆盖的问题 }); } }; return gridBinding; }; ko.bindingHandlers.datagrid = ko.creatEasyuiGridBindings('datagrid'); ko.bindingHandlers.treegrid = ko.creatEasyuiGridBindings('treegrid'); /** * easyui binding * 例如：easyuiCombotree、easyuiCombobox、easyuiLinkbutton */ ko.createEasyuiInitBindings = function (o) { o = $.extend({ type: '' },o); var customBinding = { init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var jq = jqElement(element), opt = ko.mapping.toJS(valueAccessor()); var handler = function () { jq[o.type](opt); }; jq[o.type] ? handler() : using(o.type, handler); //handle disposal (if KO removes by the template binding) ko.utils.domNodeDisposal.addDisposeCallback(element, function () { jq[o.type]("destroy"); }); valueAccessor()["$element"] = function () { return jq }; }, update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var jq = jqElement(element), opt = ko.mapping.toJS(valueAccessor()); if (jq[o.type]) jq[o.type](opt); } }; var bindName = 'easyui' + o.type.replace(/(^|\s+)\w/g, function (s) {return s.toUpperCase();}); ko.bindingHandlers[bindName] = customBinding; }; ko.createEasyuiInitBindings({ type: 'tabs' }); ko.createEasyuiInitBindings({ type: 'tree' }); ko.createEasyuiInitBindings({ type: 'combotree' }); ko.createEasyuiInitBindings({ type: 'combobox' }); ko.createEasyuiInitBindings({ type: 'linkbutton' }); /** * inputwidth、autoheight、autowidth binding */ ko.bindingHandlers.inputwidth = { update: function (element, valueAccessor, allBindingsAccessor, viewModel) { var that = $(element), widthStr = ko.toJS(valueAccessor()); var calcWidth = function (w) { var rate = 1 if (typeof w == 'string') { if (w.indexOf("px") > -1 || w.indexOf("PX") > -1) w = w.replace("px", "").replace("PX", ""); if (w.indexOf("%") > -1) w = w.replace("%", "") / 100; } if (w > 0 && w <= 1) { rate = w; w = $(".val").width(); } return w * rate; }; var resizeWidth = function () { var width = calcWidth(widthStr); $.each([ { selector: 'input.txtBox', handler: function (jq) { jq.width(width - 8); } }, //pading3*2 + border1*2 = 8 { selector: 'input[comboname],input.combo-f', handler: function (jq) { jq.combo('resize', width); } } ], function () { var jq = that.find(this.selector); if (jq.length > 0) this.handler(jq); if (that.is(this.selector)) this.handler(that); }); }; resizeWidth(); $(window).resize(resizeWidth); } }; ko.bindingHandlers.autoheight = { update: function (element, valueAccessor, allBindingsAccessor, viewModel) { var that = $(element), obserable = valueAccessor(), height = $.isFunction(obserable) ? obserable() : obserable; that.height($(window).height() - height); $(window).resize(function () { that.height($(window).height() - height); }); } }; ko.bindingHandlers.autowidth = { update: function (element, valueAccessor, allBindingsAccessor, viewModel) { var that = $(element), obserable = valueAccessor(), width = $.isFunction(obserable) ? obserable() : obserable; that.width($(window).width() - width); $(window).resize(function () { that.width($(window).width() - width); }); } }; /** * 实现js与页面绑定 */ ko.bindingViewModel = function (viewModelInstance,node) { using('parser', function () { $.parser.onComplete = function () { ko.applyBindings(viewModelInstance, node || document.body); }; }); }; })(jQuery, ko);
自定义绑定，使 knockout 和 easyUI 关联，作用于页面中
3. receive.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>材料收料单</title> <%@ include file="/common/head.jsp"%> </head> <body> <div class="toolbar"> <a href="#" plain="true" class="easyui-linkbutton" icon="icon-arrow_refresh" title="刷新" data-bind="click:refreshClick">刷新</a> <a href="#" plain="true" class="easyui-linkbutton" icon="icon-add" title="新增" data-bind="click:addClick" >新增</a> <a href="#" plain="true" class="easyui-linkbutton" icon="icon-edit" title="编辑" data-bind="click:editClick" >编辑</a> <a href="#" plain="true" class="easyui-linkbutton" icon="icon-cross" title="删除" data-bind="click:deleteClick" >删除</a> <a href="#" plain="true" class="easyui-linkbutton" icon="icon-user-accept" title="审核" data-bind="click:auditClick" >审核</a> <a href="#" plain="true" class="easyui-linkbutton" icon="icon-printer" title="打印" data-bind="click:printClick" >打印</a> </div> <div class="container_12" style="position:relative;"> <div class="grid_1 lbl">收料单号</div> <div class="grid_2 val"><input type="text" data-bind="value:form.billNo" class="easyui-autocomplete txtBox" data-options="url:rootPath+'/mms/receive!getBillNo.do'"/></div> <div class="grid_1 lbl">供应商</div> <div class="grid_2 val"><input type="text" data-bind="value:form.supplierName" class="easyui-autocomplete txtBox" data-options="url:rootPath+'/mms/merchants!getNames.do'"/></div> <div class="grid_1 lbl">合同名称</div> <div class="grid_2 val"><input type="text" data-bind="value:form.contractCode" class="txtBox"/></div> <div class="clear"></div> <div class="grid_1 lbl">库房</div> <div class="grid_2 val"><input type="text" data-bind="comboboxValue:form.warehouseCode,datasource:dataSource.warehouseItems" class="easyui-combobox txtBox " data-options="showblank:true"/></div> <div class="grid_1 lbl">供应类型</div> <div class="grid_2 val"><input type="text" data-bind="comboboxValue:form.supplyType,datasource:dataSource.supplyType" class="easyui-combobox txtBox " data-options="showblank:true" /></div> <div class="grid_1 lbl">收料日期</div> <div class="grid_2 val"><input type="text" data-bind="value:form.receiveDate,readOnly:true" class="txtBox easyui-daterange"/></div> <div class="clear"></div> <div class="prefix_9" style="position:absolute;top:5px;height:0;"> <a id="search" href="#" class="buttonHuge button-blue" data-bind="click:searchClick" style="margin:0 15px;">查询</a> <a id="reset" href="#" class="buttonHuge button-blue" data-bind="click:clearClick">清空</a> </div> </div> <table data-bind="datagrid:grid"> <thead> <tr> <th field="billNo" sortable="true" align="left" width="90" >收料单号 </th> <th field="supplierName" sortable="true" align="left" width="200" >供应商 </th> <th field="supplyType" sortable="true" align="center" width="70" formatter="com.formateSupplyType" >供应类型 </th> <th field="contractCode" sortable="true" align="left" width="100" >合同名称 </th> <th field="warehouseName" sortable="true" align="left" width="100" >库房 </th> <th field="receiveDate" sortable="true" align="center" width="120" formatter="com.formatTime" >收料日期 </th> <th field="totalMoney" sortable="true" align="right" width="70" formatter="com.formatMoney" >金额 </th> <th field="originalNum" sortable="true" align="left" width="90" >原始票号 </th> <th field="doPerson" sortable="true" align="left" width="60" >经办人 </th> <th field="remark" sortable="true" align="left" width="150" >备注 </th> </tr> </thead> </table> <%@ include file="/common/foot.jsp"%> <script type="text/javascript" src="viewModel/mms/mms.com.js"></script> <script type="text/javascript" src="viewModel/mms/receive.js"></script> <script type="text/javascript" src="report/common/report.js"></script> <script type="text/javascript"> using(['messager', 'dialog'], function(){ var data = ${data}; ko.bindingViewModel(new viewModel(data)); }); </script> </body> </html>
材料收料单列表界面，应用 data-bind 与数据模型进行绑定
4. receive.js
function viewModel(data){ com.formateSupplyType = utils.fnValueToText(data.dataSource.supplyType); var self = this; this.dataSource = data.dataSource; this.form = ko.mapping.fromJS(data.form); delete this.form.__ko_mapping__; this.grid = { size: { w: 4, h: 94 }, url: rootPath + '/mms/receive!list.do', queryParams: ko.observable(), pagination: true, customLoad: false }; this.grid.queryParams(data.form); this.refreshClick = function () { window.location.reload(); }; this.addClick = function () { com.openTab("收料单明细", rootPath + '/mms/receive!add.do'); }; this.deleteClick = function () { var row = self.grid.datagrid('getSelected'); if (!row) return com.message('warning', '请先选择一条收料单！'); com.message('confirm', '确定要删除选中的收料单吗？', function (b) { if (b) { com.ajax({ type: 'DELETE', url: rootPath + "/mms/receive!delete.do?billNo=" + row['billNo'], success: function () { com.message('success', '删除成功！'); self.searchClick(); } }); } }); }; this.editClick = function () { var row = self.grid.datagrid('getSelected'); if (!row) return com.message('warning', '请先选择一条收料单！'); com.openTab("收料单明细", rootPath + '/mms/receive!edit.do?billNo=' + row['billNo']); }; this.searchClick = function () { var param = ko.toJS(this.form); this.grid.queryParams(param); }; this.clearClick = function () { $.each(self.form, function () { this(''); }); this.searchClick(); }; this.grid.onDblClickRow = this.editClick; this.auditClick = function () { var row = self.grid.datagrid('getSelected'); if (!row) return com.message('warning', '请先选择一条收料单！'); mms.com.auditDialogList(function (d) { com.ajax({ type: 'POST', url: rootPath + "/mms/receive!audit.do?billNo=" + row['billNo'], data: JSON.stringify(d), success: function () { com.message('success', '单据已审核！'); } }); }); }; this.printClick = function () { var arg = JSON.stringify(self.grid.$element().datagrid('options').queryParams); var param = {jasper:"mms/receive",ds:"mmsReceiveDataSource",fileName:"材料收料单"+ "("+(utils.isEmpty(arg.receiveDate)?"":arg.receiveDate)+")",args:arg}; window.location.href = rootPath + "/mms/receive!report.do?param=" + JSON.stringify(param).replace(/"/g, "'"); }; }
材料收料单列表界面的数据模型，利用 knockout 与界面绑定
四. 效果图
1. 材料收料单列表界面： http://localhost:8080/ims/mms/receive.do
2. 材料收料单编辑/新增界面： http://localhost:8080/ims/mms/receive!add.do
