Ztree新增角色和编辑角色回显问题的解决


Posted in Javascript onOctober 25, 2016

最近在项目中使用到了ztree,在回显时候费了点时间,特记录下来供下次参考。

1、新增角色使用ztree加载权限,由于权限不多,所以使用直接全部加载。

效果图:

Ztree新增角色和编辑角色回显问题的解决

具体涉及ztree代码:

jsp中导入:/js/ztree/zTreeStyle.css和js/ztree/jquery.ztree.all-3.5.js

页面加入

<ul id="functionTree" class="ztree"></ul>

js代码(此js中加入了layer弹框效果):

<script>
    $(function() {
      // 授权树初始化
      var setting = {
        data : {
          key : {
            title : "t"
          },
          simpleData : {
            enable : true
          }
        },
        check : {//使用ztree选中效果
          enable : true,
        }
      };
      $.ajax({
        url : '${pageContext.request.contextPath}/rest/sys/getAllFunction',//发送ajax请求加载权限数据
        type : 'get',
        dataType : 'json',
        success : function(data) {//data就是服务端返回的权限数据
          //var zNodes = eval("(" + data + ")");
          //使用权限数据初始化ztree
          $.fn.zTree.init($("#functionTree"), setting, data);
        },
        error : function(msg) {
          alert('树加载异常!');
        }
      }); 
       
      //确定添加按钮
      $("#btn_submit").click(function() {
        if(checkHousetype()){
          //获得ztree对象
          var treeObj = $.fn.zTree.getZTreeObj("functionTree");
          //获得当前ztree对象选中的节点数组
          var nodes = treeObj.getCheckedNodes(true);//在提交表单之前将选中的checkbox收集
          //循环数组,获得节点的ID,拼接成字符串使用逗号分隔
          var array = new Array();
          for(var i=0;i<nodes.length;i++){
            array.push(nodes[i].id);
          }
          var ids = array.join(",");
          $("input[name=funcitonIds]").val(ids);
 
          var formData = new FormData($("#formproject")[0]); 
           $.ajax({
            type : "POST",
            url : "${pageContext.request.contextPath }/rest/sys/addRole",
//           data : $("#formproject").serialize(),
            data:formData,
            contentType: false, 
            processData: false,
            statusCode : {
              201 : function() {
                layer.msg('新增角色成功!', {icon: 6,time:1500},function(){
                  location.href = "${pageContext.request.contextPath }/rest/sys/page/rolelist";
                })
              },
              400 : function() {
                layer.msg('提交的参数不合法', {time:1500});
              },
              500 : function() {
                layer.msg('网络异常,请稍候再试!', {time:1500});
              }
            }
          });
        }
      });
    });
     
     
     
    //校验
    function checkHousetype(){
      var flag = true ;
      //关键字
      if($("#code").val()==''){
        flag = false ;
        layer.msg('请输入关键字', {time:1500});
        return flag ;
      }
      //名称
      if($("#name").val()==''){
        flag = false ;
        layer.msg('请输入角色名称', {time:1500});
        return flag ;
      }
       
      return flag ;
    }
  </script>

权限中Ztree格式: 

private String id; 
private String name;
private String code;
private String description;
 
// private String page; 
//private String generatemenu; 
//private String zindex;
 
private String pid; 
private boolean isParent;
 
//ztree组件需要格式
public String getpId() {
   return this.pid==null?"0":this.pid;
 }
 
 ......

2、编辑角色回显Ztree

js代码:

<script>
   var zNodes;
    var setting = {
        check: {
          enable: true
        },
        data: {
          simpleData: {
            enable: true
          }
        }
      };
    //当页面加载完毕,向后台发送ajax请求,获取用户id为1的用户所拥有的权限
    //(这里要显示所有权限,该id用户的权限回显时,被自动选中),这里的用户id为1仅做测试使用,实际开发中会传值
    function loadPower(roleId){
          $.ajax({
            type:"post",
            url:"${pageContext.request.contextPath }/rest/sys/queryFunByRoleId",
            data:{"roleId":roleId},
            async:false,
            dataType:"json",
            success:function(data){
              zNodes=data;
            }
          })
    }
    $(function() {
      // 授权树初始化
      var setting = {
        data : {
          key : {
            title : "t"
          },
          simpleData : {
            enable : true
          }
        },
        check : {//使用ztree选中效果
          enable : true,
        }
      };
      //页面加载完毕时加载此方法
      $(document).ready(function(){
        var id = $("#roleId").val();
        loadPower(id);
        $.fn.zTree.init($("#functionTree"), setting, zNodes);
      });
       
      //确定添加按钮
      $("#btn_submit").click(function() {
        if(checkHousetype()){
          //获得ztree对象
          var treeObj = $.fn.zTree.getZTreeObj("functionTree");
          //获得当前ztree对象选中的节点数组
          var nodes = treeObj.getCheckedNodes(true);//在提交表单之前将选中的checkbox收集
          //循环数组,获得节点的ID,拼接成字符串使用逗号分隔
          var array = new Array();
          for(var i=0;i<nodes.length;i++){
            array.push(nodes[i].id);
          }
          var ids = array.join(",");
          $("input[name=funcitonIds]").val(ids);
 
          var formData = new FormData($("#formproject")[0]); 
           $.ajax({
            type : "POST",
            url : "${pageContext.request.contextPath }/rest/sys/eidtRole",
//           data : $("#formproject").serialize(),
            data:formData,
            contentType: false, 
            processData: false,
            statusCode : {
              201 : function() {
                layer.msg('编辑角色成功!', {icon: 6,time:1500},function(){
                  location.href = "${pageContext.request.contextPath }/rest/sys/page/rolelist";
                })
              },
              400 : function() {
                layer.msg('提交的参数不合法', {time:1500});
              },
              500 : function() {
                layer.msg('网络异常,请稍候再试!', {time:1500});
              }
            }
          });
        }
      });
    });
     
     
     
    //校验
    function checkHousetype(){
      var flag = true ;
      //关键字
      if($("#code").val()==''){
        flag = false ;
        layer.msg('请输入关键字', {time:1500});
        return flag ;
      }
      //名称
      if($("#name").val()==''){
        flag = false ;
        layer.msg('请输入角色名称', {time:1500});
        return flag ;
      }
       
      return flag ;
    }
  </script>

java后台:

controller:

/**
   * 编辑角色,回显角色权限
   * @param roleId
   * @return
   */
  @RequestMapping(value = "queryFunByRoleId", method = RequestMethod.POST)
  public ResponseEntity<List<Map<String, Object>>> queryFunByRoleId(String roleId) {
    try {
      if(StringUtils.isBlank(roleId)){
        // 返回400
        return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(null);
      }
      return ResponseEntity.ok(sysService.queryFunByRoleId(roleId));
    } catch (Exception e) {
      e.printStackTrace();
    }
    // 出错 500
    return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
  }

service:

由于List中的contains方法校验老是失败,也没纠结什么原因,自己写的根据id校验

/**
   * zTree v3回显
   * 初始化化权限树
   * 拼接treeNode属性
   */
  @Transactional(readOnly=true)
  public List<Map<String, Object>> queryFunByRoleId(String roleId) {
    //查询所有权限
    List<AuthFunction> functions = queryAllAuthFunction();
    //查询指定角色的权限
    List<AuthFunction> functionsByRoleId = findFunctionByRoleId(roleId);
    //包装zTree
     
    List<Map<String, Object>> list =new ArrayList<Map<String, Object>>();
    Map<String, Object>map=null;
    for(int i=0;i<functions.size();i++){
      map=new HashMap<>();
      //Role role=functions.get(i);
      AuthFunction fun = functions.get(i);
      map.put("id", fun.getId());
      map.put("pId", fun.getpId());
      map.put("name", fun.getName());
      map.put("isParent", fun.getIsParent());
      //判断指定用户的角色是否在所有角色中包含,有则设置checked=true.
      if(functionsByRoleId != null && functionsByRoleId.size()>0 && ListIsContainsObj(functionsByRoleId,fun)){
        map.put("checked",true);
      }else {
        map.put("checked",false);
      }
      list.add(map);
    }
    return list;
  }
   
  //校验全部权限中是否有某个权限,有返回true
  private boolean ListIsContainsObj(List<AuthFunction> functions, AuthFunction fun) {
    if(fun == null || functions == null || functions.size()<=0){
      return false;
    }
    for (AuthFunction authFunction : functions) {
      if(fun.getId().equals(authFunction.getId())){
        return true;
      }
    }
    return false;
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 创建Dom元素
May 07 Javascript
jQuery之网页换肤实现代码
Apr 30 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
JavaScript弹出对话框的三种方式
Mar 23 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 #Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 #Javascript
JavaScript prototype属性详解
Oct 25 #Javascript
对Angular.js Controller如何进行单元测试
Oct 25 #Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 #Javascript
input file上传 图片预览功能实例代码
Oct 25 #Javascript
Node.js开启Https的实践详解
Oct 25 #Javascript
You might like
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
php随机输出名人名言的代码
2012/10/07 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
python实现比较文件内容异同
2018/06/22 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
印度民族服装购物网站:BIBA
2019/08/05 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
你们项目是如何进行变更控制的
2015/08/26 面试题
机械专业应届生求职信
2013/09/21 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
企业宣传工作方案
2014/06/02 职场文书
2015年财政所工作总结
2015/04/25 职场文书
Python中使用ipython的详细教程
2021/06/22 Python