【JeeSite】角色分配

主要是(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>

roleAssign.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: {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>

selectUserToRole.jsp

一个技巧点：为什么要把 model.addAttribute("selectIds", Collections3.extractToString(userList, "name", ",")); ，注意这里提取的是name, 我开始还以为作者失误，其实是故意的。因为在后面保存角色和用户的对应关系时，ids里面的name就找不到相应的user,也就是保存了新添加的用户。 User user = systemService.assignUserToRole(role, systemService.getUser(idsArr[i]));

【JeeSite】角色分配的更多相关文章

Maven-007-Nexus 用户添加，用户角色分配，用户修改密码，管理员重置用户密码
配置好 maven nexus 私服后,默认的用户可通过查看[Users]查看当前私服中所存在的用户,如下图所示:
【软件工程-Teamwork 3】团队角色分配和团队贡献分分配规则
Part 1 团队角色分配 1.人员分配概要: Project Manager:1名 / Developer:4名 / Test: 1名 2.具体人员分配及职责: Project Manager(PM ...
1.4、CDH 搭建Hadoop在安装之前(推荐的群集主机和角色分配)
推荐的群集主机和角色分配要点:本主题描述了Cloudera Manager管理的CDH群集的建议角色分配.您为部署选择的实际分配可能会有所不同,具体取决于工作负载的类型和数量,群集中部署的服务,硬件 ...
10.jenkins 按角色分配
在实际的生产中,需要项目比较多.不同的用户需要对应不同的项目工程 .这个时候,我们需要按角色给与权限. 要实现这个功能,需要一个插件来完成 . Role-based Authorization St ...
Oracal 学习之用户角色创建分配表空间给角色分配权限
//创建角色inspur 密码为inspur,默认的表空间为USERS create user inspur identified by inspur default tablespace USERS ...
mongo在centos与windows上部署与配置,及远程连接mongo与数据用户和角色分配
1.下载mongodb社区版: windows 安装包安装: https://www.mongodb.com/download-center#community(mongo下载中心) 配置环境变量控 ...
SqlServer 添加用户添加角色分配权限
转载自:https://www.cnblogs.com/accumulater/p/6158387.html --创建一个简单的登录,登录名为:newlogin:登录密码:123456:默认数据库 ...
SAP用户角色分配函数权限
事务码 PFCG修改角色选择[权限缺省] 选择 RFC 输入的函数只能是允许远程连接的函数,否则不能调用和添加到角色. 完成添加.
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（27）-权限管理系统-分配用户给角色
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(27)-权限管理系统-分配用户给角色分配用户给角色,跟分配角色给用户操作是基本一致的. 打开模块维护,展 ...

随机推荐

Java变量类型，实例变量与局部变量静态变量
实例变量: 实例变量在类中声明,但在方法的外面,构造函数或任何块. 当空间分配给某个对象在堆中,插槽为每个实例变量创建值. 当一个对象与使用关键字 “new” 来创建,在对象被销毁销毁创建的实例变量. ...
移除“xmlns”命名空间
用XmlDocument创建一个文档,或者插入一个节点,默认会生成xmlns(命名空间)特性. 假定有一个xml文档如下结构: <?xml version="1.0" enc ...
[linux] uptime 命令中关于平均负载的解释
1.当前时间 00:13:25 2.系统已运行的时间 9小时19分 3.当前在线用户 2 user 4.平均负载:0.17, 0.12, 0.07 最近1分钟.5分钟.15分钟系统的负载为了更好地理 ...
Linux服务器性能评估与优化--转
http://www.itlearner.com/article/4553 一.影响Linux服务器性能的因素 1. 操作系统级 Ø CPU Ø 内存 Ø 磁盘I/ ...
FZU 1921——栀子花开——————【线段树单点更新】
栀子花开 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Status ...
深入理解JavaScript系列（26）：设计模式之构造函数模式
介绍构造函数大家都很熟悉了,不过如果你是新手,还是有必要来了解一下什么叫构造函数的.构造函数用于创建特定类型的对象——不仅声明了使用的对象,构造函数还可以接受参数以便第一次创建对象的时候设置对象的成 ...
深入理解JavaScript系列（27）：设计模式之建造者模式
介绍在软件系统中,有时候面临着“一个复杂对象”的创建工作,其通常由各个部分的子对象用一定的算法构成:由于需求的变化,这个复杂对象的各个部分经常面临着剧烈的变化,但是将它们组合在一起的算法确相对稳定. ...
Aspose.Words .NET如何实现文档合并的同页分页显示
当我们需要将一个文档添加到另一个文档时,经常会有不同的显示需求.为了文档的流畅,我们需要源文档和目标文档在内容上实现连续显示:而为了更好地区分文档,我们经常会希望两个文档的合并实现分页显示. 下面,就 ...
写一个安全的Java单例
单例模式可能是我们平常工作中最常用的一种设计模式了.单例模式解决的问题也很常见,即如何创建一个唯一的对象.但想安全的创建它其实并不容易,还需要一些思考和对JVM的了解. 1.首先,课本上告诉我,单例这 ...
hdu 3265 矩形剪块面积并
http://acm.hust.edu.cn/vjudge/problem/10769 给n张海报,在每张海报上剪掉一个矩形,求面积并把剪块的海报分成四个矩形,就是普通的求面积并问题了 #inclu ...

【JeeSite】角色分配

【JeeSite】角色分配的更多相关文章

随机推荐

热门专题