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 相关文章推荐
浅谈Javascript数组索引
Jul 29 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
vue2.0 和 animate.css的结合使用
Dec 12 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
jQuery实现评论模块
Aug 19 jQuery
详解JavaScript 高阶函数
Sep 14 Javascript
JavaScript实现两个数组的交集
Mar 25 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实现随机合并数组并排序(原排序)
2015/11/26 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
js实现圆盘记速表
2015/08/03 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
解决python 上传图片限制格式问题
2019/10/30 Python
python 伯努利分布详解
2020/02/25 Python
django 外键创建注意事项说明
2020/05/20 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
python操作redis数据库的三种方法
2020/09/10 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
什么是索引指示器
2012/08/20 面试题
新闻学毕业生自荐信
2013/11/15 职场文书
酒吧总经理岗位职责
2013/12/10 职场文书
公司企业表扬信
2014/01/11 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
作风建设演讲稿
2014/05/23 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
搞笑老公保证书
2015/02/26 职场文书
主婚人致辞精选
2015/07/28 职场文书