此文章是基于 搭建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