ztree 异步展开节点显示不出来_用户管理、角色管理、模块管理、zTree的使用

全部都是增删改查

修改mapper，service，controller，jsp

给角色分配权限

1.1 跳转分配权限页面

1.1.1 jsp

//实现权限
function toModule() {
    if (isOnlyChecked()) {
        formSubmit('${ctx}/role/tomodule', '_self');
    } else {
        alert("请先选择一项并且只能选择一项，再进行操作！");
    }
}
... ...
<li id="people"><a href="#" onclick="toModule();this.blur();" title="分配权限">权限</a></li>

1.1.2controller

修改RoleController

//跳转分配权限页面
@RequestMapping("/tomodule")
public String tomodule(Model model) throws Exception {
    return "sysadmin/role/jRoleModule";
}

zTree的使用

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。

下载网址

zTree/zTree_v3​gitee.com

api的使用

注意：切换成ie模式，并允许阻止内容

demo的使用

引用

zTree展示权限

pojo

1、因为ztree的zNode要求必须是如下形式：

2、所以可以创建一个bean对象：

package com.sxt.pojo;
//ztree的bean对象
public class TreeNode {
    private String id;
    private String pId;
    private String name;
    private Boolean open=true;
    private Boolean checked;
... ...
}

mapper

修改ModulePMapper

//查询所有的权限，并把查询结果装到TreeBean里
List<TreeNode> listModuleOfTreeBean();

修改ModulePMapper.xml

<!--查询所有的权限，并把查询结果装到TreeBean里-->
<select id="listModuleOfTreeBean" resultType="com.sxt.pojo.TreeNode">
  select m.module_id id,m.parent_id pId,m.name from module_p m
</select>

service

@Override
public List<TreeNode> listModuleOfTreeBean() throws Exception {
    return modulePMapper.listModuleOfTreeBean();
}

controller

//跳转分配权限页面
@RequestMapping("/tomodule")
public String tomodule(Model model) throws Exception {
    return "sysadmin/role/jRoleModule";
}

//查询zTree的数据
@RequestMapping("/listModuleOfTreeBean")
@ResponseBody
public  List<TreeNode> listModuleOfTreeBean(Model model) throws Exception {
    List<TreeNode> treeNodes = roleService.listModuleOfTreeBean();
    return treeNodes;
}

jsp

<script type="text/javascript">
   var setting = {
      check: {
         enable: true //显示checkbox/radio
      },
      data: {
         simpleData: {
            enable: true//使用简单的数据模式
         }
      }
   };
   //树的节点数据
/* var zNodes = [
      {"id":1, "pId":0, "name":"系统管理",open:true},
      {"id":11, "pId":1, "name":"用户管理",open:true},
      {"id":12, "pId":1, "name":"角色管理",open:true},
      {"id":111, "pId":11, "name":"新增",open:true,checked:true }
   ];*/
   $(function(){
      $.ajax({
         url:'${ctx}/role/listModuleOfTreeBean',
         type:'post',
         success:initzTree
      });
   });
   function initzTree(zNodes){
      /**
       obj：显示zTree的dom节点
       setting：树的配置信息
       zNodes：树的节点数据
       */
      $.fn.zTree.init($("#jTree"), setting, zNodes);
   }


<div>
   <%--显示zTree的dom节点--%>
   <ul id="jTree" class="ztree"></ul>
</div>

zTree回显权限

mapper

修改ModulePMapper.xml

<!--查询所有的权限，并把查询结果装到TreeBean里,并支持回显-->
<select id="listModuleOfTreeBeanByRoleId" parameterType="String" resultType="com.sxt.pojo.TreeNode">
    select m.module_id id,m.parent_id pId,m.name,'true' checked from module_p m where m.module_id in(
        select module_id from role_module_p rm where role_id=#{roleid}
    )
    union
    select m.module_id id,m.parent_id pId,m.name,'false' checked from module_p m where m.module_id not in(
        select module_id from role_module_p rm where role_id=#{roleid}
    )
</select>

修改ModulePMapper

//查询所有的权限，并把查询结果装到TreeBean里，并支持回显
List<TreeNode> listModuleOfTreeBeanByRoleId(String roleid);

Service

@Override
public RoleP getRoleByRoleId(String id) throws Exception {
    return rolePMapper.selectByPrimaryKey(id);
}

@Override
public List<TreeNode> listModuleOfTreeBeanByRoleId(String roleid) throws Exception {
    /***第一套思路：不推荐**/
    //1、先查询所有权限装到ArrayList
    //2、再查询当前角色所拥有的权限ArrayList
    //3、遍历所有权限，如果找到则checked为true

    /***第二套思路：推荐**/
    //1、查询当前角色所拥有的权限： select id,pid,name,'true' checked from module_p
    //中间用union all连接
    //2、查询当前角色所不拥有的权限：select id,pid,name,'false' checked from module_p
    return modulePMapper.listModuleOfTreeBeanByRoleId(roleid);
}

controller

//跳转分配权限页面
@RequestMapping("/tomodule")
public String tomodule(String id,Model model) throws Exception {
    //查询当前角色的详细信息
     RoleP role = roleService.getRoleByRoleId(id);
    model.addAttribute("role",role);
    return "sysadmin/role/jRoleModule";
}


//查询zTree的数据
@RequestMapping("/listModuleOfTreeBeanByRoleId")
@ResponseBody
public  List<TreeNode> listModuleOfTreeBeanByRoleId(String roleid,Model model) throws Exception {
    List<TreeNode> treeNodes = roleService.listModuleOfTreeBeanByRoleId(roleid);
    return treeNodes;
}

1.1.1.1 jsp

修改jRoleModule.jsp

$(function(){
 $.ajax({
 url:'${ctx}/role/listModuleOfTreeBean',
 type:'post',
 data:{"roleId":"${role.roleId}"},
 success:initzTree
 });
});

分配权限

保存zTree选中的节点信息