Rumah > php教程 > PHP开发 > teks badan

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

高洛峰
Lepaskan: 2016-12-09 09:15:35
asal
1448 orang telah melayarinya

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

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

效果图:

20161031140826605.jpg

具体涉及ztree代码:

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

页面加入

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

    <script>
        $(function() {
          // 授权树初始化
          var setting = {
            data : {
              key : {
                title : "t"
              },
              simpleData : {
                enable : true
              }
            },
            check : {//使用ztree选中效果
              enable : true,
            }
          };
          $.ajax({
            url : &#39;${pageContext.request.contextPath}/rest/sys/getAllFunction&#39;,//发送ajax请求加载权限数据
            type : &#39;get&#39;,
            dataType : &#39;json&#39;,
            success : function(data) {//data就是服务端返回的权限数据
              //var zNodes = eval("(" + data + ")");
              //使用权限数据初始化ztree
              $.fn.zTree.init($("#functionTree"), setting, data);
            },
            error : function(msg) {
              alert(&#39;树加载异常!&#39;);
            }
          });
            
          //确定添加按钮
          $("#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(&#39;新增角色成功!&#39;, {icon: 6,time:1500},function(){
                      location.href = "${pageContext.request.contextPath }/rest/sys/page/rolelist";
                    })
                  },
                  400 : function() {
                    layer.msg(&#39;提交的参数不合法&#39;, {time:1500});
                  },
                  500 : function() {
                    layer.msg(&#39;网络异常,请稍候再试!&#39;, {time:1500});
                  }
                }
              });
            }
          });
        });
          
          
          
        //校验
        function checkHousetype(){
          var flag = true ;
          //关键字
          if($("#code").val()==&#39;&#39;){
            flag = false ;
            layer.msg(&#39;请输入关键字&#39;, {time:1500});
            return flag ;
          }
          //名称
          if($("#name").val()==&#39;&#39;){
            flag = false ;
            layer.msg(&#39;请输入角色名称&#39;, {time:1500});
            return flag ;
          }
            
          return flag ;
        }
      </script>
    Salin selepas log masuk

    权限中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;
     }
      
     ......
    Salin selepas log masuk

      

    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(&#39;编辑角色成功!&#39;, {icon: 6,time:1500},function(){
                      location.href = "${pageContext.request.contextPath }/rest/sys/page/rolelist";
                    })
                  },
                  400 : function() {
                    layer.msg(&#39;提交的参数不合法&#39;, {time:1500});
                  },
                  500 : function() {
                    layer.msg(&#39;网络异常,请稍候再试!&#39;, {time:1500});
                  }
                }
              });
            }
          });
        });
          
          
          
        //校验
        function checkHousetype(){
          var flag = true ;
          //关键字
          if($("#code").val()==&#39;&#39;){
            flag = false ;
            layer.msg(&#39;请输入关键字&#39;, {time:1500});
            return flag ;
          }
          //名称
          if($("#name").val()==&#39;&#39;){
            flag = false ;
            layer.msg(&#39;请输入角色名称&#39;, {time:1500});
            return flag ;
          }
            
          return flag ;
        }
      </script>
    Salin selepas log masuk

    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);
      }
    Salin selepas log masuk

    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;
      }
    Salin selepas log masuk

       


    Label berkaitan:
    sumber:php.cn
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Cadangan popular
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan
    Tentang kita Penafian Sitemap
    Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!