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 相关文章推荐
玩转方法:call和apply
May 08 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 Javascript
jQuery中库的引用方法
Jan 06 jQuery
JS中Promise函数then的奥秘探究
Jul 30 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
VUE动态生成word的实现
Jul 26 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 保留小数点
2009/04/21 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
python根据文件大小打log日志
2014/10/09 Python
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
Python定时器线程池原理详解
2020/02/26 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
通过实例解析python and和or使用方法
2020/11/14 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
蛋糕店创业计划书范文
2014/09/21 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
车间安全生产管理制度
2015/08/06 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
Java后台生成图片的完整步骤
2021/08/04 Java/Android