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

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, "'");
};
}

View Code
　　　　材料收料单列表界面的数据模型，利用 knockout 与界面绑定

四. 效果图

　　1. 材料收料单列表界面： http://localhost:8080/ims/mms/receive.do


　　2. 材料收料单编辑/新增界面： http://localhost:8080/ims/mms/receive!add.do