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中暂停功能的实现代码
Mar 04 Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
AngularJS快速入门
Apr 02 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 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
Protoss建筑一览
2020/03/14 星际争霸
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
js获取height和width的方法说明
2013/01/06 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
python 控制语句
2011/11/03 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
python如何对链表操作
2020/10/10 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
铁路个人事迹材料
2014/01/30 职场文书
大学生在校学习的自我评价
2014/02/18 职场文书
求职信名称怎么写
2014/05/26 职场文书
工商管理自荐书
2014/07/06 职场文书