主要是(roleAssign.jsp , selectUserToRole.jsp )2個jsp頁面的JS方法調用比較復雜，主頁面要獲取彈窗頁面的數據
var pre_ids = h.find("iframe")[0].contentWindow.pre_ids;
var ids = h.find("iframe")[0].contentWindow.ids;
top.$.jBox.open("iframe:${ctx}/sys/role/usertorole?id=${role.id}",... 這個selectUserToRole.jsp頁面就在一個iframe里面。
里面很多JQuery方法見注解。var officeNodes 的初始方法比較厲害，直接使用<c:forEach >
<%@ page contentType="text/html;charset=UTF-8" %> <%@ include file="/WEB-INF/views/include/taglib.jsp"%> <html> <head> <title>分配角色</title> <meta name="decorator" content="default"/> </head> <body> <ul class="nav nav-tabs"> <li><a href="${ctx}/sys/role/">角色列表</a></li> <li class="active"><a href="${ctx}/sys/role/assign?id=${role.id}"><shiro:hasPermission name="sys:role:edit">角色分配</shiro:hasPermission><shiro:lacksPermission name="sys:role:edit">人員列表</shiro:lacksPermission></a></li> </ul> <div class="container-fluid breadcrumb"> <div class="row-fluid span12"> <span class="span4">角色名稱: <b>${role.name}</b></span> <span class="span4">歸屬機構: ${role.office.name}</span> <span class="span4">英文名稱: ${role.enname}</span> </div> <div class="row-fluid span8"> <span class="span4">角色類型: ${role.roleType}</span> <c:set var="dictvalue" value="${role.dataScope}" scope="page" /> <span class="span4">數據范圍: ${fns:getDictLabel(dictvalue, 'sys_data_scope', '')}</span> </div> </div> <sys:message content="${message}"/> <div class="breadcrumb"> <form id="assignRoleForm" action="${ctx}/sys/role/assignrole" method="post" class="hide"> <input type="hidden" name="id" value="${role.id}"/> <input id="idsArr" type="hidden" name="idsArr" value=""/> </form> <input id="assignButton" class="btn btn-primary" type="submit" value="分配角色"/> <script type="text/javascript"> $("#assignButton").click(function(){ top.$.jBox.open("iframe:${ctx}/sys/role/usertorole?id=${role.id}", "分配角色",810,$(top.document).height()-240,{ buttons:{"確定分配":"ok", "清除已選":"clear", "關閉":true}, bottomText:"通過選擇部門，然后為列出的人員分配角色。",submit:function(v, h, f){ var pre_ids = h.find("iframe")[0].contentWindow.pre_ids; var ids = h.find("iframe")[0].contentWindow.ids; //nodes = selectedTree.getSelectedNodes(); if (v=="ok"){ // 刪除''的元素 if(ids[0]==''){ ids.shift(); pre_ids.shift(); } if(pre_ids.sort().toString() == ids.sort().toString()){ top.$.jBox.tip("未給角色【${role.name}】分配新成員！", 'info'); return false; }; // 執行保存 loading('正在提交，請稍等...'); var idsArr = ""; for (var i = 0; i<ids.length; i++) { idsArr = (idsArr + ids[i]) + (((i + 1)== ids.length) ? '':','); } $('#idsArr').val(idsArr); $('#assignRoleForm').submit(); return true; } else if (v=="clear"){ h.find("iframe")[0].contentWindow.clearAssign(); return false; } }, loaded:function(h){ $(".jbox-content", top.document).css("overflow-y","hidden"); } }); }); </script> </div> <table id="contentTable" class="table table-striped table-bordered table-condensed"> <thead><tr><th>歸屬公司</th><th>歸屬部門</th><th>登錄名</th><th>姓名</th><th>電話</th><th>手機</th><shiro:hasPermission name="sys:user:edit"><th>操作</th></shiro:hasPermission></tr></thead> <tbody> <c:forEach items="${userList}" var="user"> <tr> <td>${user.company.name}</td> <td>${user.office.name}</td> <td><a href="${ctx}/sys/user/form?id=${user.id}">${user.loginName}</a></td> <td>${user.name}</td> <td>${user.phone}</td> <td>${user.mobile}</td> <shiro:hasPermission name="sys:role:edit"><td> <a href="${ctx}/sys/role/outrole?userId=${user.id}&roleId=${role.id}" onclick="return confirmx('確認要將用戶<b>[${user.name}]</b>從<b>[${role.name}]</b>角色中移除嗎？', this.href)">移除</a> </td></shiro:hasPermission> </tr> </c:forEach> </tbody> </table> </body> </html>
<%@ page contentType="text/html;charset=UTF-8" %> <%@ include file="/WEB-INF/views/include/taglib.jsp"%> <html> <head> <title>分配角色</title> <meta name="decorator" content="blank"/> <%@include file="/WEB-INF/views/include/treeview.jsp" %> <script type="text/javascript"> var officeTree; var selectedTree;//zTree已選擇對象 // 初始化 $(document).ready(function(){ officeTree = $.fn.zTree.init($("#officeTree"), setting, officeNodes); selectedTree = $.fn.zTree.init($("#selectedTree"), setting, selectedNodes); }); var setting = {view: {selectedMulti:false,nameIsHTML:true,showTitle:false,dblClickExpand:false}, data: {simpleData: {enable: true}}, callback: {onClick: treeOnClick}}; var officeNodes=[ <c:forEach items="${officeList}" var="office"> {id:"${office.id}", pId:"${not empty office.parent?office.parent.id:0}", name:"${office.name}"}, </c:forEach>]; var pre_selectedNodes =[ <c:forEach items="${userList}" var="user"> {id:"${user.id}", pId:"0", name:"<font color='red' style='font-weight:bold;'>${user.name}</font>"}, </c:forEach>]; var selectedNodes =[ <c:forEach items="${userList}" var="user"> {id:"${user.id}", pId:"0", name:"<font color='red' style='font-weight:bold;'>${user.name}</font>"}, </c:forEach>]; var pre_ids = "${selectIds}".split(","); var ids = "${selectIds}".split(","); //點擊選擇項回調 //包含3個tree的點擊事件，比如點擊officeTree中的節點，加載數據放入userTree中； function treeOnClick(event, treeId, treeNode, clickFlag){ $.fn.zTree.getZTreeObj(treeId).expandNode(treeNode); if("officeTree"==treeId){ $.get("${ctx}/sys/role/users?officeId=" + treeNode.id, function(userNodes){ $.fn.zTree.init($("#userTree"), setting, userNodes); }); } if("userTree"==treeId){ //alert(treeNode.id + " | " + ids); //alert(typeof ids[0] + " | " + typeof treeNode.id); //$.inArray搜索數組中指定值並返回它的索引（如果沒有找到則返回-1） if($.inArray(String(treeNode.id), ids)<0){ selectedTree.addNodes(null, treeNode); ids.push(String(treeNode.id)); } }; if("selectedTree"==treeId){ if($.inArray(String(treeNode.id), pre_ids)<0){ selectedTree.removeNode(treeNode); ids.splice($.inArray(String(treeNode.id), ids), 1);//清除點擊的node }else{ top.$.jBox.tip("角色原有成員不能清除！", 'info'); } } }; function clearAssign(){ var submit = function (v, h, f) { if (v == 'ok'){ var tips=""; if(pre_ids.sort().toString() == ids.sort().toString()){ tips = "未給角色【${role.name}】分配新成員！"; }else{ tips = "已選人員清除成功！"; } ids=pre_ids.slice(0);//如果省略 end 參數，則 index 之后的所有的所有元素都會包含在結果中 selectedNodes=pre_selectedNodes; //pre_ids,pre_selectedNodes 是用來重置的，設計的很巧妙 $.fn.zTree.init($("#selectedTree"), setting, selectedNodes); top.$.jBox.tip(tips, 'info'); } else if (v == 'cancel'){ // 取消 top.$.jBox.tip("取消清除操作！", 'info'); } return true; }; tips="確定清除角色【${role.name}】下的已選人員？"; top.$.jBox.confirm(tips, "清除確認", submit); }; </script> </head> <body> <div id="assignRole" class="row-fluid span12"> <div class="span4" style="border-right: 1px solid #A8A8A8;"> <p>所在部門：</p> <div id="officeTree" class="ztree"></div> </div> <div class="span3"> <p>待選人員：</p> <div id="userTree" class="ztree"></div> </div> <div class="span3" style="padding-left:16px;border-left: 1px solid #A8A8A8;"> <p>已選人員：</p> <div id="selectedTree" class="ztree"></div> </div> </div> </body> </html>
一個技巧點：為什么要把 model.addAttribute("selectIds", Collections3.extractToString(userList, "name", ",")); ， 注意這里提取的是name, 我開始還以為作者失誤，其實是故意的。因為在后面保存角色和用戶的對應關系時，ids里面的name就找不到相應的user,也就是保存了新添加的用戶。 User user = systemService.assignUserToRole(role, systemService.getUser(idsArr[i]));
