背景：
由于有些功能有重复使用的情况，模块化的架构有利于代码的维护与稳定。
例如：物料选择（使用的场合很多）、bom 的添加、修改（在 bom 管理页面要用，在 bom 分录页面也要用到，因些改造成模块化架构）
遵循对象化开发的思路：先设置对象属性，然后调用，最后处理接收的对象。
具体代码罗列如下：
bom.jsp 中包含文件代码：
<!-- 选择物料 -->
<s:include value="../item/select.jsp"></s:include>
<!-- bom Manage -->
<s:include value="../bom/manage.jsp"></s:include>bom.jsp 文件中的调用代码：
<a href='javascript:bom.add();'>添加</a><a href='javascript:bom.add();'>添加</a>bom.js 文件中的函数：
//js 类
var bom = {
add: function(){
dojo.byId("bomManage_handlerFunction").value = "bom.getList(1)" ;
console.log("201107031636 - " + dojo.byId("bomManage_handlerFunction").value );
// 显示对话框。
bomManage.add() ;
},
... ...bom/anage.jsp 文件内容：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script type="text/javascript" src="bom/manage.js"></script>
<input id="bomManage_handlerFunction" type="hidden" />
<%-- 对话框: 添加、修改、删除 --%>
<div id="bomManage_Dialog" dojoType="dijit.Dialog" title="添加、修改、删除" style="width:600px; display: none;">
<form id="bomManage_Form" dojoType="dijit.form.Form">
<input title="表主键" id="bomManage_bomId" name="bomBean.bomId" type="hidden" />
<input title="制单人 ID" id="bomManage_creatorId" name="bomBean.creatorId" type="hidden" value="123" />
<table class="formTable">
<tr>
<td>
版本：
<input id="bomManage_version" name="bomBean.version" maxlength="12" type="text" value="1.0"
dojoType="dijit.form.ValidationTextBox"
required="true"
regExp = "[^'\s]{2,}" title="最少2个字符，最多12个字符，不可以有空格，不可以有单撇。"
promptMessage="请输入版本信息。"
trim="true"
onChange = "" />
</td>
</tr>
<tr>
<td>
状态：<input type="radio" id="bomManage_isActive_radio" name="bomBean.isActive" value = "1" />激活
<input type="radio" id="bomManage_isNotActive_radio" name="bomBean.isActive" value = "0" />禁用
</td>
</tr>
<tr>
<td>
<input type="hidden" id="bomManage_itemId" name="bomBean.itemId" />
物料编号：<label id="bomManage_itemNumber_Label"></label>
物料名称：<label id="bomManage_itemName_Label"></label>
<<a href="javascript:bomManage.itemSelect();">选择物料</a>>
助记码： <label id="bomManage_itemHelpcode_Label"></label>
</td>
</tr>
<tr>
<td>
数量：
<span dojoType="dijit.form.NumberSpinner" intermediateChanges="true"
id="bomManage_quantity" name="bomBean.quantity" value="1"
constraints="{min:0,max:9999}">
<script type="dojo/connect" data-dojo-event="onChange">
// dojo.filter() applies a boolean function to each array element
// and returns an array of matches. In our case, the over:
// attributes are sorted downwards, so the first return element
// will be the lowest
//var self = this; // So widget is referencable in function
//var tempColor = dojo.filter(cutoffPoints, function(temp) {
// return self.getValue() > temp.over;
//})[0].color;
// Lastly set the background color of the indicator box
//dojo.style(dojo.byId("tempBox"), "backgroundColor", tempColor)
</script>
</span>
</td>
</tr>
<tr>
<td>
备注：
<input type="text" id="bomManage_note" name="bomBean.note"
dojoType="dijit.form.ValidationTextBox" maxlength="50"/>
</td>
</tr>
</table>
</form>
<button dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconSave"
οnclick="bomManage.insert();">添 加</button>
<button id="bomManage_UpdateButton" dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconSave"
οnclick="bomManage.update();">修改</button>
<button id="bomManage_DeleteButton" dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconSave"
οnclick="bomManage.deleteInit();">刪除</button>
<button dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconCancel"
οnclick="dijit.byId('bomManage_Dialog').hide();">取 消</button>
<div id="bomManage_messagePanel"></div>
</div>
bom/manage.js 文件内容：
/**
*
*/
/***********************************************************************
* System : NLMRPII
* title : 权限管理
* Date : 2011-06-13
* Description :
* Author : Livon
************************************************************************/
var validInputNode = null ; // 无效的输入数据
//js 类
var bomManage = {
itemSelect: function(){
dojo.byId("itemSelect_handlerFunction").value = "bomManage.itemSelect_handler";
itemSelect.show();
},
// 获取
getList: function( pageNumber ){
// 初始化
table.showMessage("Data_List_Container", "Loading ...");
dojo.byId("pagination_Panel").innerHTML = ""; //显示分页操作板。
var filterKeys = trim( dijit.byId("filterKeys").value ) ;
filterKeys.replace(/[(\s) ，,]+/g,' ') ;
// 准备参数
var postContent = new Array();
postContent["bomBean.pageNumber"] = pageNumber; // 页码
postContent["bomBean.pageSize"] = "10"; // 每页记录数
postContent["bomBean.filterKeys"] = filterKeys.split(" ");
postContent["formId"] = "filterForm"; // 高级查询（过滤器）的设置表单。
postContent["url"] = "bom!getBom.action";
postContent["handlerFunction"] = "bom.getList_handler"; // 处理函数名称
// 发送
common.xhrPost( postContent );
//console.log("getList_handler start at : " + (new Date()).getTime() );
// 准备参数 （ 为了 分页链接 ）
var postContent4pagination = dojo.clone(postContent);
postContent4pagination["url"] = "bom!getPaginationHtml.action" ;
postContent4pagination["handlerFunction"] = "bom.showPagination" ; // 处理函数名称
postContent4pagination["bomBean.dataList_JsFunction"] = "bom.getList" ;
// 发送
common.xhrPost( postContent4pagination );
//console.log("showPagination start at : " + (new Date()).getTime() );
},
// 处理函数
getList_handler: function( response ){
//（1）清空表格，准备填充。
table.dataClear("Data_List_Container");
//（2）设置查询关键字
var reg = common.getFilterReg("filterKeys");
//（3）显示数据
var list = response.boms;
for ( var i = 0; i < list.length; i++) {
// 准备数据
var cells = new Array();
cells[0] = "<input type='checkbox' name='rowCheckBox'"
+ " value='" + list[i].bomId + "'"
+ " title='" + list[i].bomId + "'>";
cells[1] = list[i].rowNumber;
cells[2] = "<a title='点击查看分录信息' href='bomEntry.action?bomEntryBean.bomId="
+ list[i].bomId + "'>" + list[i].bomNumber.replace( reg ,"<em>$1</em>") + "</a>" ;
cells[3] = list[i].itemNumber.replace( reg ,"<em>$1</em>") ;
cells[4] = list[i].itemName.replace( reg ,"<em>$1</em>") ;
cells[5] = list[i].itemHelpCode.replace( reg ,"<em>$1</em>") ;
cells[6] = list[i].quantity;
cells[7] = list[i].measureUnit;
cells[8] = list[i].auditedDate;
cells[9] = (list[i].isActive == 1)?"正常":"禁用";
cells[10] = (list[i].entryItemNumber == null)?"无":list[i].entryItemNumber.replace( reg ,"<em>$1</em>") ;
cells[11] = (list[i].entryItemName == null)?"":list[i].entryItemName.replace( reg ,"<em>$1</em>") ;
cells[12] = (list[i].entryItemHelpCode == null)?"":list[i].entryItemHelpCode.replace( reg ,"<em>$1</em>") ;
cells[13] = list[i].entryQuantity;
cells[14] = list[i].entryMeasureUnit;
// 插入一行
table.insertRow( "Data_List_Container", cells ); // 位于 js/table.js
}
//（4）提示
dojo.publish("promptMessageTopic",
[{message: "数据已更新。",type: "message", duration: 1000}]);
},
showPagination: function( response ){
dojo.byId("pagination_Panel").innerHTML = response.paginationHtml; //显示分页操作板。
console.log("showPagination end at : " + + (new Date()).getTime() );
},
menuInit: function(){
//rightclick
//var trOriginalBgColor = newTR.bgColor;
//newTR.οnmοuseοver=function(){
// this.style.backgroundColor="#BEF5AD";
// this.style.borderBottom="2px solid green";
//} //鼠标放上去的颜色
//newTR.οnmοuseοut=function(){
// this.style.backgroundColor= trOriginalBgColor ;
// this.style.borderBottom="1px dotted green";
//} //鼠标移出后的颜色
var myTableRows = dojo.query("#Data_List_Container tr");
dojo.forEach( myTableRows, function(entry, i){
//console.debug(entry, "at index", i);
//dojo.connect(entry,"rightclick",null,function(){ alert(789); });
permission.newMenu(entry);
});
},
newMenu: function(node){
pMenu = new dijit.Menu({
//targetNodeIds: myTableRows
});
pMenu.addChild(new dijit.MenuItem({
label: "修改",
iconClass: "dijitEditorIcon dijitEditorIconCopy",
disabled: false,
onClick: function() {
var permissionId = node.childNodes[0].childNodes[0].value ;
permission.edit_getData( permissionId );
}
}));
pMenu.addChild(new dijit.MenuItem({
label: "删除",
iconClass: "dijitEditorIcon dijitEditorIconDelete",
onClick: function() {
var permissionId = node.childNodes[0].childNodes[0].value ;
permission.Delete( permissionId );
}
}));
/*
pMenu.addChild(new dijit.CheckedMenuItem({
label: "checkable menu item"
}));*/
pMenu.addChild(new dijit.MenuSeparator());
/*
var pSubMenu = new dijit.Menu();
pSubMenu.addChild(new dijit.MenuItem({
label: "Submenu item"
}));
pSubMenu.addChild(new dijit.MenuItem({
label: "Submenu item"
}));
pMenu.addChild(new dijit.PopupMenuItem({
label: "Submenu",
popup: pSubMenu
}));*/
pMenu.addChild(new dijit.MenuItem({
label: "[快捷菜单]",
disabled: true
}));
pMenu.startup();
pMenu.bindDomNode(node);
},
add: function(){
// 设置初值，均为空。
dijit.byId("bomManage_Form").reset();
dojo.byId("bomManage_bomId").value = null ;
dojo.byId("bomManage_itemId").value = null ;
dojo.byId("bomManage_itemNumber_Label").innerHTML = null ;
dojo.byId("bomManage_itemName_Label").innerHTML = null ;
dojo.byId("bomManage_itemHelpcode_Label").innerHTML = null ;
dijit.byId("bomManage_UpdateButton").setAttribute('disabled', true);
dijit.byId("bomManage_DeleteButton").setAttribute('disabled', true);
dojo.byId("bomManage_messagePanel").innerHTML = "";
dojo.attr("bomManage_messagePanel", "class", "");
// 显示对话框。
dijit.byId("bomManage_Dialog").show();
},
// 检查物料是否合法。
itemValid: function(){
bomManage.remoteValid("itemId");
validInputNode = dijit.byId("bomBean.itemId");
},
remoteValid: function( field ){
// 准备参数
var postContent = new Array();
/* 如果要验证权限名称，则设置其它数据为空，去服务器验证，服务器会检查 permissionId 及 非空数据的合法性。
* 如果是添加，则 permissionId = 0
*/
if( field == "itemId" ){
postContent["bomBean.bomNumber"] = "" ;
//postContent["permissionBean.permissionCode"] = "" ;
}
postContent["bomBean.bomId"] = dojo.byId("bomManage_bomId").value ;
postContent["bomBean.itemId"] = dojo.byId("bomManage_itemId").value ;
postContent["url"] = "bom!validCheck.action";
postContent["handlerFunction"] = "bomManage.remoteValid_Handler"; // 处理函数名称
// 发送
common.xhrPost( postContent );
},
remoteValid_Handler: function(response){
console.log( validInputNode );
if( response.message == 0 ){
dojo.publish("promptMessageTopic", [{message: "有效。"
, type: "message", duration: 5000}]);
}else{
alert("该物料已经存在！");
//dojo.publish("promptMessageTopic", [{message: "错误：值无效！"
// , type: "error", duration: 5000}]);
//validInputNode.focus();
//validInputNode.displayMessage(validInputNode.invalidMessage);
//validInputNode.attr("state", "Error");
}
},
validCheck: function(){
// form.validate 检查表单
/*
if(!form.validate()||!content){
alert("数据格式不正确！");
return false;
}*/
var invalidWidget = null;
// 检查权限编号
//invalidWidget = dijit.byId("bomBean.permissionNumber").isValid() ? invalidWidget : dijit.byId("permissionBean.permissionNumber");
// 检查权限名
//invalidWidget = dijit.byId("permissionBean.permissionName").isValid()? invalidWidget : dijit.byId("permissionBean.permissionName");
if( invalidWidget != null){
invalidWidget.focus();
invalidWidget.displayMessage(invalidWidget.invalidMessage);
return false;
}else{
//if(!checkTextareaMax("bomBean.note",500)){
// dojo.publish("promptMessageTopic", [{message: "备注内容最大长度500个字符。",type: "error", duration: 3000}]);
// return false;
//}
}
return true;
},
insert: function(){
if( bomManage.validCheck() ){
//dojo.publish("promptMessageTopic", [{message: "",type: "message", duration: 3000}]);
// 显示状态及结果信息。
//var messagePanel = dojo.byId("messagePanel");
//dojo.attr("messagePanel", "class", "NormalMessagePanel");
//messagePanel.innerHTML = "添加中 ...";
// 准备参数
var postContent = new Array();
postContent["bomBean.action"] = "Insert" ;
postContent["formId"] = "bomManage_Form"; // 表单。
postContent["url"] = "bom!manage.action";
postContent["handlerFunction"] = "bomManage.insert_handler"; // 处理函数名称
// 发送
common.xhrPost( postContent );
console.debug("到这儿了吗？");
}
},
insert_handler: function(response){
if( response.code ==0 ){
bomManage.close();
alert("添加成功！");
}
//dojo.attr("messagePanel", "class", "NormalMessagePanel");
//dojo.attr("messagePanel", "innerHTML", "添加成功！");
//dojo.publish("promptMessageTopic", [{message: "正在更新数据 ... ",type: "message", duration: 3000}]);
//bom.getList(1);
},
edit: function(){
dojo.query("#Data_List_Container input").forEach(function(node, index, array){
//console.log( node.title + node.checked );
//node.innerHTML = "new version content!";
});
// 查找第一个被选中的记录的 permissionId
var bomId = 0;
dojo.some( dojo.query("#Data_List_Container input"),
function(node){
if(node.checked){
bomId = node.title;
};
return node.checked;
}
);
if( bomId != 0 ){
//window.location = "bomEntry.action?bomEntryBean.bomId=" + bomId ;
//bom.edit_getData( bomId );
bomManage.edit_getData(bomId);
}
else{
alert("请选择数据。");
}
},
edit_getData: function( bomId ){
console.log("I am fired!");
// 准备参数
var postContent = new Array();
postContent["bomBean.bomId"] = bomId ;
postContent["bomBean.bomNumber"] = ""; //
postContent["formId"] = "bomManage_Form"; // 高级查询（过滤器）的设置表单。
postContent["url"] = "bom!getBom.action";
postContent["handlerFunction"] = "bomManage.edit_getData_handler"; // 处理函数名称
// 发送
common.xhrPost( postContent );
},
edit_getData_handler: function( response ){
var list = response.boms;
dojo.byId("bomManage_bomId").value = list[0].bomId ;
dojo.byId("bomManage_version").value = list[0].version ;
if(list[0].isActive == 1){
dojo.byId("bomManage_isActive_radio").checked = true ;
}else{
dojo.byId("bomManage_isNotActive_radio").checked = true ;
}
dojo.byId("bomManage_itemId").value = list[0].itemId ;
dojo.byId("bomManage_itemNumber_Label").innerHTML = list[0].itemNumber ;
dojo.byId("bomManage_itemName_Label").innerHTML = list[0].itemName ;
dojo.byId("bomManage_itemHelpcode_Label").innerHTML = list[0].itemHelpCode ;
dojo.byId("bomManage_quantity").value = list[0].quantity ;
dojo.byId("bomManage_note").value = list[0].note ;
dijit.byId("bomManage_UpdateButton").setAttribute('disabled', false);
dijit.byId("bomManage_DeleteButton").setAttribute('disabled', false);
dojo.byId("bomManage_messagePanel").innerHTML = "";
dojo.attr("bomManage_messagePanel", "class", "");
// 显示对话框。
dijit.byId("bomManage_Dialog").show();
},
update: function(){
if( bomManage.validCheck() ){
dojo.publish("promptMessageTopic", [{message: "",type: "message", duration: 3000}]);
// 显示状态及结果信息。
var messagePanel = dojo.byId("bomManage_messagePanel");
dojo.attr( messagePanel, "class", "NormalMessagePanel");
messagePanel.innerHTML = "修改中 ...";
// 准备参数
var postContent = new Array();
postContent["bomBean.action"] = "Update"; // 页码
postContent["formId"] = "bomManage_Form"; // 表单。
postContent["url"] = "bom!manage.action";
postContent["handlerFunction"] = "bomManage.update_handler"; // 处理函数名称
// 发送
common.xhrPost( postContent );
}
},
update_handler: function( response ){
dojo.attr("bomManage_messagePanel", "class", "NormalMessagePanel");
dojo.attr("bomManage_messagePanel", "innerHTML", "修改成功！");
dojo.publish("promptMessageTopic", [{message: "正在更新数据 ... ",type: "message", duration: 3000}]);
bomManage.close();
},
deleteInit: function(){
var bomIds = "0";
dojo.query("#Data_List_Container input").forEach(function(node, index, array){
console.log( node.title + node.checked );
//node.innerHTML = "new version content!";
if( node.checked ){
bomIds += "," + node.title ;
}
});
//console.log("permissionIds = " + permissionIds.substring(1));
//bomIds = dijit.byId("permissionBean.permissionIds").getValue() + permissionIds ;
console.log("bomIds = " + bomIds );
bom.Delete( bomIds );
},
Delete: function( bomIds ){
if ( confirm("确定要删除吗?") !="0"){
dojo.publish("promptMessageTopic", [{"正在删除 ... ": "",type: "message", duration: 3000}]);
// 准备参数
var postContent = new Array();
postContent["bomBean.action"] = "Delete"; // 页码
postContent["bomBean.bomIds"] = bomIds; // 页码
postContent["url"] = "bom!manage.action";
postContent["handlerFunction"] = "bom.delete_handler"; // 处理函数名称
// 发送
common.xhrPost( postContent );
}
},
delete_handler: function( response ){
console.log( "response.code = " + response.code );
//dijit.byId('permission_Dialog').hide();
bom.getList(1);
},
itemSelect_handler: function(items ){
dojo.byId("bomManage_itemId").value = items[0].id ;
dojo.byId("bomManage_itemNumber_Label").innerHTML = items[0].number ;
dojo.byId("bomManage_itemName_Label").innerHTML = items[0].name ;
dojo.byId("bomManage_itemHelpcode_Label").innerHTML = items[0].helpCode ;
// 检查选择的物料的有效性。
bomManage.itemValid();
},
// 关闭对话框
close: function(){
var func = dojo.byId("bomManage_handlerFunction").value ;
eval(func);
dijit.byId('bomManage_Dialog').hide();
}
}
//处理 物料选择
function itemSelect_handler( items ){
dojo.byId("bomBean.itemId").value = items[0].id ;
dojo.byId("itemNumber_Label").innerHTML = items[0].number ;
dojo.byId("itemName_Label").innerHTML = items[0].name ;
dojo.byId("itemHelpcode_Label").innerHTML = items[0].helpCode ;
// 检查选择的物料的有效性。
bom.itemValid();
}
// end
扫一扫
3200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
