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 使用手册(三)
Sep 23 Javascript
jQuery html()等方法介绍
Nov 18 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
JS实现简单拖拽效果
Jun 21 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 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打包网站并在线压缩为zip
2016/02/13 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
js 判断 enter 事件
2009/02/12 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
浅谈django的render函数的参数问题
2018/10/16 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
社区七一党员活动方案
2014/01/25 职场文书
火锅店营销方案
2014/02/26 职场文书
汽车促销活动方案
2014/03/31 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏