碼上快樂

相關內容    簡體    繁體

jeesite中角色分配詳解及改為ajax調用

本文轉載自   查看原文   2018-12-21 13:33   604    jeesite/ jeesite角色分配

一：jeesite中的角色分配form表單：

1.父頁面是roleAssign.jsp，子頁面是selectUserToRole.jsp；

2.父頁面調用子頁面用的jBox,代碼如下

<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>
View Code

 3.jBox會調用后台RoleController.java 代碼如下：

 1 /**
 2      * 角色分配 -- 打開角色分配對話框
 3      * @param role
 4      * @param model
 5      * @return
 6      */
 7     @RequiresPermissions("sys:role:view")
 8     @RequestMapping(value = "usertorole")
 9     public String selectUserToRole(Role role, Model model) {
10         List<User> userList = systemService.findUser(new User(new Role(role.getId())));
11         model.addAttribute("role", role);
12         model.addAttribute("userList", userList);
13         model.addAttribute("selectIds", Collections3.extractToString(userList, "name", ","));
14         model.addAttribute("officeList", officeService.findAll());
15         return "modules/sys/selectUserToRole";
16     }
View Code

4.調用后台會回到子頁面selectUserToRole.jsp  代碼如下：

<%@ 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: {showLine:false,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(",");
        
        //點擊選擇項回調
        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);
                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);
                }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);
                    selectedNodes=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>
View Code

5.一進子頁面會調用初始化

$(document).ready(function(){
officeTree = $.fn.zTree.init($("#officeTree"), setting, officeNodes);
selectedTree = $.fn.zTree.init($("#selectedTree"), setting, selectedNodes);
});
View Code

6.officeNodes和selectedNodes都是用的<c:forEach>標簽遍歷從后台sys/role/usertorole接口中查到的變量，

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>];
View Code

查詢回來的已選的把字體設置成紅色是在<c:forEach>標簽中設置的。

7.var pre_ids = "${selectIds}".split(",");var ids = "${selectIds}".split(",");初始話進入子頁面兩個變量取的是接口中查詢回來的數據是一樣的；

當把待選人員點到已選人員列表時ids變量會添加一個節點的id；pre_ids還不變；

這兩個變量主要是判斷已選列表可否添加移除的，添加移除代碼如下：

if("userTree"==treeId){
                //alert(treeNode.id + " | " + ids);
                //alert(typeof ids[0] + " | " +  typeof treeNode.id);
                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);
                }else{
                    top.$.jBox.tip("角色原有成員不能清除！", 'info');
                }
            }
View Code

 8.確定分配調用form表單的提交事件

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;
View Code

idsArr用了賦值語句和三目運算符，idsArr實際就是把ids中的數據遍歷添加到idsArr中；把所有人員列表的id添加到idsArr中最后在后台對已經添加的人員做處理。

form表單如下：

<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>
View Code

9.角色分配的后台代碼

/**
     * 角色分配
     * @param role
     * @param idsArr
     * @param redirectAttributes
     * @return
     */
    @RequiresPermissions("sys:role:edit")
    @RequestMapping(value = "assignrole")
    public String assignRole(Role role, String[] idsArr, RedirectAttributes redirectAttributes) {
        if(Global.isDemoMode()){
            addMessage(redirectAttributes, "演示模式，不允許操作！");
            return "redirect:" + adminPath + "/sys/role/assign?id="+role.getId();
        }
        StringBuilder msg = new StringBuilder();
        int newNum = 0;
        for (int i = 0; i < idsArr.length; i++) {
            User user = systemService.assignUserToRole(role, systemService.getUser(idsArr[i]));
            if (null != user) {
                msg.append("<br/>新增用戶【" + user.getName() + "】到角色【" + role.getName() + "】！");
                newNum++;
            }
        }
        addMessage(redirectAttributes, "已成功分配 "+newNum+" 個用戶"+msg);
        return "redirect:" + adminPath + "/sys/role/assign?id="+role.getId();
    }
View Code 
@Transactional(readOnly = false)
    public User assignUserToRole(Role role, User user) {
        if (user == null){
            return null;
        }
        List<String> roleIds = user.getRoleIdList();
        if (roleIds.contains(role.getId())) {
            return null;
        }
        user.getRoleList().add(role);
        saveUser(user);
        return user;
    }
View Code

 10.類似下圖：

 

二：jeesite中的類似角色分配ajax調用：

1.父頁面調用子頁面的代碼：主要是點擊按鈕調用后台方法轉換一個試圖作為子頁面，子頁面點擊確定分配和清除調用的方法，確定分配的時候會用ajax調用后台確定分配的事件。

<input id="assignButton"  type="button" value="ajax分配角色"  onclick="assignRole()"/>
        <script type="text/javascript">
            function assignRole(){
                    top.$.jBox.open("iframe:${ctx}/role/role/openchildWin", "分配角色",810,600,{
                    buttons:{"確定分配":"ok", "清除已選":"clear", "關閉":true}, bottomText:"通過選擇部門，然后為列出的人員添加人員。",submit:function(v, h, f){
                        var ids = h.find("iframe")[0].contentWindow.ids;
                        var pre_ids = h.find("iframe")[0].contentWindow.pre_ids;
                        var submitData = h.find("iframe")[0].contentWindow.submitData;
                        if (v=="ok"){
                            // 刪除''的元素
                            if(ids[0]==""){
                                ids.shift();
                                pre_ids.shift();
                            }
                            if(pre_ids.sort().toString() == ids.sort().toString()){
                                top.$.jBox.tip("未選擇表！", 'info');
                                return false;
                            };
                            for (var i = 0; i<submitData.length; i++) {
                                var map2 = {};
                                var nameTemp ={};
                                nameTemp['name'] = submitData[i].name;//名字
                                map2['people'] = assetTemp;
                                var rlnListTemp = [];
                                var rlnTemp = {};
                                rlnTemp['id'] = submitData[i].id;//編號
                                rlnTemp['rln'] = "include";
                                rlnListTemp.push(rlnTemp);
                                var rlnjson = {};
                                rlnjson['resId']=rlnListTemp
                                map2['rlnInfo'] = rlnjson;
                                var json = JSON.stringify(map2);
                                $.ajax({
                                    type: "POST",
                                    dataType: "",
                                    url:"${ctx}/role/role/addRole",
                                    data:{"info":json},
                                    success : function(result) {
                                        //$.fn.zTree.init($("#waitchooseTree"), setting, result).expandAll(true);
                                        alertx("添加成功！");
                                    },
                                    error : function() {alertx("失敗");}
                                });
                            }
                            
                            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>
View Code

 2.子頁面代碼如下:

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/head.jsp"%>
<html>
<head>
    <title>分配角色</title>
    <%@include file="/WEB-INF/views/include/treeview.jsp"%>
    <meta name="decorator" content="default"/>
    <script type="text/javascript">
    var pre_ids = [];
    var ids = [];
    var submitData = [];
    $(document).ready(function() {
        
        var selectedTree;//zTree已選擇對象
        
        
        var setting = {
                view : {showLine:false},
                data : {
                    simpleData : {enable : true,idKey : "id",pIdKey : "pId",rootPId : '0'}},
                    callback : {onClick :treeOnClick}
        };
        var settingRed = {
                view : {showLine:false,
                fontCss: { 'color': 'red' }    
                },
                data : {
                    simpleData : {enable : true,idKey : "id",pIdKey : "pId",rootPId : '0'}},
                    callback : {onClick :treeOnClick}
        };
        function gettree() {
            $.getJSON("${ctx}/project/project/myproject?type=1",function(data) {
                $.fn.zTree.init($("#mesresourTree"), setting, data).expandAll(true);
            });
            
            $.getJSON("${ctx}/projectemporay/projectemporary/schemalView?assettype=schema",function(data) {
                selectedTree = $.fn.zTree.init($("#selectedTree"), settingRed, data);
                debugger
                for(var i = 0 ;i<data.length;i++){
                    var selectedlinfo = {};
                    selectedlinfo['id'] = String(data[i].id);
                    selectedlinfo['name'] = String(data[i].name);
                    ids.push(selectedlinfo);
                    pre_ids.push(selectedlinfo);
                }
            });
        } 
        gettree();
        
        //點擊選擇項回調
        function treeOnClick(event, treeId, treeNode, clickFlag){
            $.fn.zTree.getZTreeObj(treeId).expandNode(treeNode);
            if("mesresourTree"==treeId){
                var map2 = {};
                map2['id'] = treeNode.id;
                map2['name'] = treeNode.name;
                var json = JSON.stringify(map2);
                $.ajax({
                    type: "POST",
                    dataType: "",
                    url:"${ctx}/role/role/allPeople",
                    data:{"info":json},
                    success : function(result) {
                        $.fn.zTree.init($("#waitchooseTree"), setting, result).expandAll(true);
                    },
                    error : function() {alertx("失敗");}
                });
            }
            var selectedId = [];
            if("waitchooseTree"==treeId){
                debugger
                for(var j=0;j<ids.length;j++){
                    if(ids[j]==""){
                        ids.shift();
                    }else{
                        selectedId.push(ids[j].id+ids[j].name)
                    }
                }
                if($.inArray(String(treeNode.id+treeNode.name), selectedId)<0){
                    debugger
                    selectedTree.setting.view.fontCss["color"] = 'Black';
                    selectedTree.addNodes(null, treeNode);
                    var tempInfo = {};
                    tempInfo['name'] = String(treeNode.name);
                    tempInfo['id'] = String(treeNode.id);
                    ids.push(tempInfo);
                    submitData.push(tempInfo);
                }
            };
            var pre_selectedId = [];
            for(var j=0;j<pre_ids.length;j++){
                if(pre_ids[j]==""){
                    pre_ids.shift();
                }else{
                    pre_selectedId.push(pre_ids[j].id+pre_ids[j].name)
                }
            }
            var submitId = [];
            for(var j=0;j<submitData.length;j++){
                if(submitData[j]==""){
                    submitData.shift();
                }else{
                    submitId.push(submitData[j].id+submitData[j].name)
                }
            }
            for(var j=0;j<ids.length;j++){
                if(ids[j]==""){
                    ids.shift();
                }else{
                    selectedId.push(ids[j].id+ids[j].name)
                }
            }
            if("selectedTree"==treeId){
                if($.inArray(String(treeNode.id+treeNode.name), pre_selectedId)<0){
                    selectedTree.removeNode(treeNode);
                    ids.splice($.inArray(String(treeNode.id+treeNode.name), selectedId), 1);
                    submitData.splice($.inArray(String(treeNode.id+treeNode.name), submitId), 1);
                }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 = "未給角色添加新成員！";
                    }else{
                        tips = "已選表清除成功！";
                    }
                    ids=pre_ids.slice(0);
                    $.getJSON("${ctx}/role/role/cleartree",function(data) {
                        selectedTree = $.fn.zTree.init($("#selectedTree"), setting, data);
                    });
                    top.$.jBox.tip(tips, 'info');
                } else if (v == 'cancel'){
                    // 取消
                    top.$.jBox.tip("取消清除操作！", 'info');
                }
                return true;
            };
            tips="確定清除已選的人員？";
            top.$.jBox.confirm(tips, "清除確認", submit);
        };
    });
        
    </script>
</head>
<body>
    <div id="assignRole" class="row-fluid span12" style="width:95%;">
        <div class="span4" style="border-right: 1px solid #A8A8A8;">
            <p>部門：</p>
            <div id="mesresourTree" class="ztree"></div>
        </div>
        <div class="span3">
            <p>待選人員：</p>
            <div id="waitchooseTree" 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>
View Code

 3.貼一段后台代碼類似這種：注意不是轉頁面的只是要返回的數據記得要加@ResponseBody

@ResponseBody
    @RequestMapping(value = "users")
    public List<Office> users(String id, HttpServletResponse response) throws Exception {
        List<Office> list = officeService.findAll();
        return list;
         
    }
@ResponseBody
    @RequestMapping(value = "users")
    public List<Map<String, Object>> users(String officeId, HttpServletResponse response) throws Exception {
        List<Map<String, Object>> mapList = Lists.newArrayList();
        DataRole dataRole=new DataRole();
        dataRole.setId(officeId);
        List<User> UserList = dataRoleService.findOfficeIdUser(dataRole);
        for (User e : UserList) {
            Map<String, Object> map = Maps.newHashMap();
            map.put("id", e.getId());
            map.put("pId", 0);
            map.put("name", e.getName());
            mapList.add(map);            
        }
        return mapList;
         
    }
View Code

注意：1.ajax中用selectedTree.setting.view.fontCss["color"] = 'Black';改變字體顏色，選中的列表初始化調用var settingRed設置字體為紅色，添加的節點設置字體顏色為黑色。

2.submitData是添加的節點的數據（這個數據是從待選列表中點擊到已選准備提交的數據），提交調用ajax使用。

3.pre_ids比對可否從已選列表中移除，ids比對可否添加到已選列表，初始進頁面時pre_ids和ids數據一樣，都是查詢后台已選數據。

4.父頁面中拿子頁面的變量（注意：全局變量）h.find("iframe")[0].contentWindow.pre_ids;我們可以在debugger中查看iframe數組變量下的contentWindow-->window--->location--->pathname

 確定頁面不錯。頁面不錯的話拿window下的全局變量，也可以調用方法。

 

 

 

 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 敏捷開發的角色分配 【NC】為角色分配按鈕權限 SAP角色創建與權限分配 MySQL分配角色權限 $.ajax()方法詳解 jquery中的ajax方法 Jquery中.ajax和.post詳解 ajax中參數和屬性詳解 php7 改為從棧上分配內在的思路 為用戶分配角色 C# MVC中ajax調用Controller的方法
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM