2011/6/26 功能菜单模块分析
2011/6/26 功能菜单模块分析
1.Model层 MenuPojo [JavaBean]
public class MenuPojo { public final static String[] STATE_NAME = { "无效", "有效" }; public final static String[] CLASS_NAME = { "功能组", "普通功能" }; public final static String[] ISOPEN_NAME = { "关闭", "打开" }; public final static String[] TOPFLAG_NAME = { "不可以", "可以" }; private String menuId = "";// 菜单ID private String appName = "";// 应用ID private String menuName = "";// 菜单项名称 private String menuDes = "";// 菜单项描述 private int menuClass = 1;// 菜单组 private StaticPojo menuType = new StaticPojo();// 类型 private int state = 1;// 状态 private String jsfun = "";// JS方法 private String imgName = "";// 图标路径 private int isOpen = 1;// 是否打开 private String pmenuId = "";// 上级菜单id private String pmenuName = "无";// 上级菜单名称 private int chlMenuNum = -1;// 下级菜单数量 private String toPage = "";// 去向页面 private int topFlag = 0;// 是否可放置在top菜单里；0：不可；1：可以 private int seq = 0; private int count = 0;// 下级数量 .....getters and setters...... }
2.数据库层 BSMenuDBMang
下文再谈，呵呵呵
3.表现层 BSMenu
（1）功能菜单查看的初始化页面：
public BSObject do_MenuIni(BSObject m_bs) throws Exception { m_bs.setCurPage("system/menu/index.jsp"); SqlExecute sqlHelper = new SqlExecute(); try { // 设置功能菜单树 this._setMenuTree(m_bs, sqlHelper); } catch (Exception ep) { ep.printStackTrace(); throw ep; } finally { sqlHelper.close(); } return m_bs; }
注意点：项目统一命名规范，进入页面的第一个初始化方法的do_之后的命名是首字母大写，内部自己定义的方法以下划线开头，其他的方法do_之后是以小写字母开头
其中调用的方法 _setMenuTree
// 设置角色和权限关系树 public void _setMenuTree(BSObject m_bs, SqlExecute sqlHelper) throws Exception { // 设置组织机构数 VBSTree tree = null; VBSTreeNode rootnode = null; tree = new VBSTree(); tree.setName("MenuTree"); // 设置右键 String tpath = m_bs.getRequest().getContextPath() + "/common/images/toolbar/"; tree.setRightmenu(new VBSRightMenu()); VBSRightMenuArea rma = tree.getRightmenu().addMenuAreaMenu("菜单操作"); VBSRightMenuItem item = rma.addItem("添加功能", -1); item.setImg(tpath + "add.gif"); item.setName("add"); item.setJsFun("addMenu()"); // 根
rootnode = tree.addRootNode();
rootnode.set("root", "功能菜单", "", "");
rootnode.setIsOpen(true);
rootnode.setRmAreaIndex(0);
// 得到第一层
BSMenuDBMang menuDB = new BSMenuDBMang(sqlHelper, m_bs);
ArrayList<MenuPojo> thisNodes = menuDB
.getMenuList(" and t.MENU_ID not in (select MENU_ID from T_MENU_R)");
this._setTreeNode(thisNodes, rootnode, menuDB);
m_bs.setTagValue(tree);
}
从这里可以学会如何使用 Tree控件 和 RightMenu 控件，界面的显示如下
上面的方法中调用了一个递归的方法，用于生成树形菜单
// 递归得到下级树 private void _setTreeNode(ArrayList<MenuPojo> thisNodes, VBSTreeNode pNode, BSMenuDBMang menuDB) throws Exception { VBSTreeNode node = null; MenuPojo oneMenu = null; for (int i = 0, size = thisNodes.size(); i < size; i++) { oneMenu = thisNodes.get(i); //递归得到下级功能菜单 node = pNode.addNode(); node.set(oneMenu.getMenuId(), oneMenu.getMenuName(), "editMenu()", ""); node.setRmAreaIndex(0); node.setTitle(oneMenu.getMenuDes()); // 是否有下级菜单 if (oneMenu.getCount() > 0) { node.setIsOpen(true); ArrayList<MenuPojo> subNodeList = menuDB .getMenuList(" and t.MENU_ID in (select MENU_ID from T_MENU_R where P_MENU_ID='" + node.getName() + "')"); this._setTreeNode(subNodeList, node, menuDB); } } }
（2）功能菜单编辑的初始化页面：
public BSObject do_MenuEditIni(BSObject m_bs) throws Exception { m_bs.setCurPage("system/menu/edit.jsp"); String type = (String) m_bs.getPrivateMap().get("in_type"); String menuId = (String) m_bs.getPrivateMap().get("in_menuid"); // 得到功能树 SqlExecute sqlHelper = new SqlExecute(); try { // 得到一个菜单项 MenuPojo onePojo = new MenuPojo(); if (type != null && type.trim().equals("edit")) { // 编辑菜单 BSMenuDBMang menuDB = new BSMenuDBMang(sqlHelper, m_bs); onePojo = menuDB.getOneMenu(" and t.MENU_ID='" + menuId + "'"); } // 网页面上放置 this._setMenuToWeb(m_bs, onePojo, sqlHelper); } catch (Exception ep) { ep.printStackTrace(); throw ep; } finally { sqlHelper.close(); } return m_bs; }
这里调用了一个很重要的方法，就是将从数据库中得到的一个menu（onepojo）设置到web页面上去，也就是
// 设置编辑页面 private void _setMenuToWeb(BSObject m_bs, MenuPojo onePojo, SqlExecute sqlHelper) { m_bs.setPrivateValue("t_menuid", onePojo.getMenuId()); m_bs.setPrivateValue("t_pmenuid", onePojo.getPmenuId()); m_bs.setPrivateValue("l_pmenuname", onePojo.getPmenuName()); m_bs.setPrivateValue("t_menuname", onePojo.getMenuName()); m_bs.setPrivateValue("t_menudesc", onePojo.getMenuDes()); m_bs.setPrivateValue("t_menujsfun", onePojo.getJsfun()); m_bs.setPrivateValue("t_menuimg", onePojo.getImgName()); m_bs.setPrivateValue("t_menutopage", onePojo.getToPage()); m_bs.setPrivateValue("t_menutseq", String.valueOf(onePojo.getSeq())); m_bs.setPrivateValue("t_menuclass", String.valueOf(onePojo.getMenuClass())); // m_bs.setPrivateValue("t_menutype", String // .valueOf(onePojo.getMenuType())); m_bs.setPrivateValue("t_menustate", String.valueOf(onePojo.getState())); m_bs.setPrivateValue("t_menuisopen", String.valueOf(onePojo.getIsOpen())); m_bs.setPrivateValue("t_menutop", String.valueOf(onePojo.getTopFlag())); // 下拉框 VBSSelect t_menuclass = new VBSSelect(); t_menuclass.setName("t_menuclass"); t_menuclass.setOption("1", "普通功能", 0); t_menuclass.setOption("0", "功能组", 0); m_bs.setTagValue(t_menuclass); VBSSelect t_menustate = new VBSSelect(); t_menustate.setName("t_menustate"); t_menustate.setOption("0", "无效", 0); t_menustate.setOption("1", "有效", 0); m_bs.setTagValue(t_menustate); VBSSelect t_menuisopen = new VBSSelect(); t_menuisopen.setName("t_menuisopen"); t_menuisopen.setOption("0", "关闭", 0); t_menuisopen.setOption("1", "打开", 0); m_bs.setTagValue(t_menuisopen); VBSSelect t_menutop = new VBSSelect(); t_menutop.setName("t_menutop"); t_menutop.setOption("0", "不可做快捷方式", 0); t_menutop.setOption("1", "可做快捷方式", 0); m_bs.setTagValue(t_menutop); }
这里的主要操作就是将onepojo里保存的数据放入到页面相应的显示控件中
例如：edit.jsp中的
<BS:text name="t_menuname" style="width:100%;" />
这个text控件就是用于存放功能菜单的名称的，后台通过m_bs.setPrivateValue("t_menuname", onePojo.getMenuName()); 来赋值给它
类似的还有其他的一些控件，如：
<BS:textarea rows="3" cols="" value="" name="t_menudesc" style="width:100%;" />
<BS:select name="t_menuclass" style="width:100%;" /> //这个是菜单组，菜单是有分组的
（3）提交编辑结果
public BSObject do_commitMenu(BSObject m_bs) throws Exception { String retStr = "操作失败，请稍后再试"; String type = (String) m_bs.getPrivateMap().get("in_type"); VBSTree MenuTree = (VBSTree) m_bs.getTagMap().get("MenuTree"); if (MenuTree != null) { // 得到一个菜单项 MenuPojo onePojo = this._getMenuFormWeb(m_bs); int count = 0; VBSTreeNode node = null; SqlExecute sqlHelper = new SqlExecute(); try { sqlHelper.setAutoCommit(false); BSMenuDBMang menuDB = new BSMenuDBMang(sqlHelper, m_bs); // 得到一个菜单项 if (type != null && type.trim().equals("edit")) { // 保存菜单 count = menuDB.updateMenu(onePojo); node = MenuTree.getNodeByName(onePojo.getMenuId()); if (onePojo != null) { node.set(onePojo.getMenuId(), onePojo.getMenuName(), "editMenu()", ""); node.setRmAreaIndex(0); node.setUpdateFlag(true); MenuTree.getReFreshNodeList().add(node); } } else { // 新增 count = menuDB.insertMenu(onePojo); if (!onePojo.getPmenuId().trim().equals("")) { node = MenuTree.getNodeByName(onePojo.getPmenuId()) .addNode(); } else { node = MenuTree.getRootNode().addNode(); } if (onePojo != null) { node.set(onePojo.getMenuId(), onePojo.getMenuName(), "editMenu()", ""); node.setRmAreaIndex(0); MenuTree.getReFreshNodeList().add(node); } } if (count > 0) { retStr = "T"; m_bs.setTagValue(MenuTree); } else { retStr = "没有更新任何数据!"; } sqlHelper.commit(); } catch (Exception ep) { sqlHelper.rollback(); ep.printStackTrace(); throw ep; } } m_bs.setRetrunObj(retStr); return m_bs; }
提交这里会去获取编辑的那些项的内容，但是有可能是空的或者不合法，所以还要有一个方法来进行判断和解析那些编辑项
private MenuPojo _getMenuFormWeb(BSObject m_bs) { MenuPojo onePojo = new MenuPojo(); if (m_bs.getPrivateMap().get("t_menuid") != null) { onePojo.setMenuId((String) m_bs.getPrivateMap().get("t_menuid")); } if (m_bs.getPrivateMap().get("t_pmenuid") != null) { onePojo.setPmenuId((String) m_bs.getPrivateMap().get("t_pmenuid")); } if (m_bs.getPrivateMap().get("t_menuname") != null) { onePojo.setMenuName((String) m_bs.getPrivateMap().get("t_menuname")); } if (m_bs.getPrivateMap().get("t_menudesc") != null) { onePojo.setMenuDes((String) m_bs.getPrivateMap().get("t_menudesc")); } if (m_bs.getPrivateMap().get("t_menujsfun") != null) { onePojo.setJsfun((String) m_bs.getPrivateMap().get("t_menujsfun")); } if (m_bs.getPrivateMap().get("t_menuimg") != null) { onePojo.setImgName((String) m_bs.getPrivateMap().get("t_menuimg")); } if (m_bs.getPrivateMap().get("t_menutopage") != null) { onePojo.setToPage((String) m_bs.getPrivateMap().get("t_menutopage")); } if (m_bs.getPrivateMap().get("t_menutseq") != null) { onePojo.setSeq(Integer.parseInt((String) m_bs.getPrivateMap().get( "t_menutseq"))); } if (m_bs.getPrivateMap().get("t_menustate") != null) { onePojo.setState(Integer.parseInt((String) m_bs.getPrivateMap() .get("t_menustate"))); } if (m_bs.getPrivateMap().get("t_menuclass") != null) { onePojo.setMenuClass(Integer.parseInt((String) m_bs.getPrivateMap() .get("t_menuclass"))); } if (m_bs.getPrivateMap().get("t_menuisopen") != null) { onePojo.setIsOpen(Integer.parseInt((String) m_bs.getPrivateMap() .get("t_menuisopen"))); } if (m_bs.getPrivateMap().get("t_menutop") != null) { onePojo.setTopFlag(Integer.parseInt((String) m_bs.getPrivateMap() .get("t_menutop"))); } return onePojo; }
（4）重新显示树形结构
public BSObject do_reShowMenu(BSObject m_bs) throws Exception { m_bs.addRefreshTag("MenuTree"); return m_bs; }
只要将要重新显示的控件添加到m_bs中就可以了
4.页面的分析
Index.jsp 这个是功能菜单管理的首页
以下是首页的重要的js
<script type="text/javascript" language="javascript"> var retObj = {}; var fromObj = thisDlg.inObj; function iniPage() { thisDlg.endFun(); } function addMenu() { var node = MenuTree.getSelectNode(); if (node != null) { var tObj = {}; tObj.type = "new"; tObj.pid = node.name; tObj.pname = node.showStr; if (node.id <= 0) { tObj.pid = ""; } p.openParentDlg("MENU_EDIT", "新建功能菜单", 550, 440, tObj, "MENU", "MenuEditIni", "&in_type=" + tObj.type, window, true, true, "editMenuRet", ""); } else { alert("请选择一个功能！"); } } function editMenu() { var node = MenuTree.getSelectNode(); if (node != null) { var tObj = {}; tObj.type = "edit"; tObj.id = node.name; p.openParentDlg("MENU_EDIT", "编辑功能菜单", 550, 440, tObj, "MENU", "MenuEditIni", "&in_type=" + tObj.type + "&in_menuid=" + tObj.id, window, true, true, "editMenuRet", ""); } else { alert("请选择一个功能！"); } } function editMenuRet(r_obj, i_obj) { if (r_obj == "T") { doRefresh("MENU", "reShowMenu", true, "", "", ""); } } </script>
这里的 retObj 就是返回的对象，fromObj 是 来源对象，它是当前的 thisDlg 的 inObj,这里通过给这个对象设置一些值可以使得打开的dialog能够得到这些值，并进行相应的操作
var retObj = {}; var fromObj = thisDlg.inObj;
iniPage方法：thisDlg.endFun(); 这里不理解是什么意思,后文有介绍，主要就是表明打开了新的子窗体
addMenu方法 和 editMenu方法：两者的区别在前者只需要从前面得到操作类型是new还有选中的menu的id[新建一个功能菜单时需要知道该功能菜单的pid]，而后者除了需要操作类型是edit还需要选中的的menu的id[修改一个功能菜单需要知道修改的功能菜单的id]
打开一个新的窗口来进行添加和编辑功能菜单
由于功能菜单是多对多的关系，存在着上下级，属于树形结构，所以选择用Tree控件来显示它，如果选择了某项来进行操作，就要有一个node对象，当他不为空时，就可以得到它的
相关信息，再传给打开的窗口
addMenu方法：
p.openParentDlg("MENU_EDIT", "新建功能菜单", 550, 440, tObj, "MENU",
"MenuEditIni", "&in_type=" + tObj.type, window, true, true,
"editMenuRet", "");
editMenu方法：
p.openParentDlg("MENU_EDIT", "编辑功能菜单", 550, 440, tObj, "MENU",
"MenuEditIni", "&in_type=" + tObj.type + "&in_menuid="
+ tObj.id, window, true, true, "editMenuRet", "");
openParentDlg 这个方法来源于 index.js，定义如下：从下面可以看出各个参数分别是什么
这个方法实际上就是根据特定的用户，通过该用户的选择进一步封装一些参数，然后将这些参数传给parentDlg.openDlg()方法，生成另一个窗体来进行下一步的操作，例如添加
或者编辑，最后还是调用了doCommit方法来提交操作，也就是得到了一个新的需要的窗口
function openParentDlg(id, title, width, height, inObj, bsID, fun, paras, cWinName, isMT, isResize, retFun, img, index) { if (isMT) { isResize = false; } else { if (isResize != null && !isResize) { isResize = false; } else { isResize = true; } } // parentDlg.show(); var exStr1 = "：" + $F("pub_tusername"); var exStr2 = "：" + $F("pub_torgname"); var exStr3 = ""; var newDlg = parentDlg.openDlg(parentDlg.name + "_" + id, title, 0, 0, width, height, isMT, isResize, retFun, img, index, exStr1, exStr2, exStr3, true); if (newDlg != null) { newDlg.inObj = inObj; newDlg.win = cWinName; newDlg.startFun(); if (retFun != null && retFun != "") { newDlg.retFun = retFun; } newDlg.returnObj = null; frmBusiness.target = newDlg.target; doCommit(bsID, fun, paras); } }
注意这里的红色部分，后文解释
其中的 retFun 就是在新打开的窗体关闭后调用的方法（回调函数），首先判断用户是否进行了操作，如果没有进行任何必要的操作，那么就不用刷新，反之就要调用deRefresh来进行零刷新操作
function editMenuRet(r_obj, i_obj) {
if (r_obj == "T") {
doRefresh("MENU", "reShowMenu", true, "", "", "");
}
}
首页 index.jsp 的界面就非常的简单，就是一个树形结构的对象<BS:tree ….. /> ,name属性很重要，后台就是通过这个name来进行赋值的（或者给这个树添加节点的）
<body scroll="no" onload="iniPage();"> <form method="POST" name="frmBusiness" action=""> <table style="width: 100%; height: 100%;" align="center" class="table_d" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="width: 100%; height: 100%;"> <div style="width: 100%; height: 100%; overflow: auto"> <BS:tree name="MenuTree" imagesPath="bsweb/images/tree/" canDrag="false" /> </div> </td> </tr> </table> </form> </body>
然后就是编辑页面 edit.jsp
<script type="text/javascript" language="javascript"> var fObj = thisDlg.inObj; var val = new BSValidate(); function iniPage() { if (fObj.type == "new") { $("t_pmenuid").value = fObj.pid; $("p_l_pmenuname").innerHTML = fObj.pname; } thisDlg.endFun(); val.add("t_menuname", "菜单项名称"); val.add("t_menutseq", "序号"); val.add("t_menutseq", "序号", 1); } function MenuCommit() { if (val.doValidate() && confirm("是否提交数据？")) { doRefresh("MENU", "commitMenu", true, "", "&in_type=" + fObj.type, "MenuCommitRet"); } } function MenuCommitRet(retObj, data) { if (data == "T") { thisDlg.returnObj = data; thisDlg.closeDlg(); } else { alert(data); } } </script>
这里的相关解释：fObj是来源obj，它就是父窗体中的fromObj，里面保存了一些数据，（这里是功能菜单的父亲编号pid和父菜单的名称，前者设置为当前页面的一个元素的value，后者设置为一个label的innerHTML），同时还有一个最重要的数据就是 type，当type是 new 时，就表明是新建一个功能菜单
回到上面的红色部分，newDlg.inObj = inObj; 这句话很重要，这句话的意思就是说，将父窗体的inObj（这个是Dialog的一个属性）传给了新建的子窗体
对照一下，inde.jsp的js中
function addMenu() {
var node = MenuTree.getSelectNode();
if (node != null) {
var tObj = {};
tObj.type = "new";
tObj.pid = node.name;
tObj.pname = node.showStr;
if (node.id <= 0) {
tObj.pid = "";
}
p.openParentDlg("MENU_EDIT", "新建功能菜单", 550, 440, tObj, "MENU",
"MenuEditIni", "&in_type=" + tObj.type, window, true, true,
"editMenuRet", "");
} else {
alert("请选择一个功能！");
}
}
edit.jsp的js中
var fObj = thisDlg.inObj;
function iniPage() {
if (fObj.type == "new") {
$("t_pmenuid").value = fObj.pid;
$("p_l_pmenuname").innerHTML = fObj.pname;
}
thisDlg.endFun();
val.add("t_menuname", "菜单项名称");
val.add("t_menutseq", "序号");
val.add("t_menutseq", "序号", 1);
}
val 是 一个 BSValidate 对象，来源于 /bsweb/js/bsvalidate.js，用于对各种数据进行验证，对于需要验证的对象只要调用val.add(…)方法就可以了
val.add("t_menutseq", "序号"); val.add("t_menutseq", "序号", 1); 前者是验证序号是否是空的，而后者是验证序号是否是只包含数字