当前位置： 移动技术网 > IT编程>开发语言>JavaScript > ztree实现权限横向显示功能

ztree实现权限横向显示功能

2018年05月01日  | 移动技术网IT编程  | 我要评论

 最近在做权限功能的时候，采用的ztree实现的，但是产品要求最后一层的权限节点要横向显示。开始在网上找的解决方案是用css样式把最后一层的display设置为inline。在我本地电脑上看了下。效果不错。

但是，后来测试在用十年前的笔记本测这个功能的时候，发现特别的卡，导致浏览器都崩溃了。所以，性能优化开始了。

1、同步改为异步，虽然不卡，但是功能不满足，很多人勾选了一个父节点（模块节点），就保存，此时子节点根本没有，所以保存的数据是有问题的。

2、设置showicon和showline为false，发现速度有一丢丢的提升，但是产品还是不满意。

3、仔细看了下，ztree的checkbox都是用span模拟的，搞个背景图。凭直觉觉得用原生的checkbox要比用图片模拟要强一些。说干就干，找了ztree提供的一个例子，稍作改造，效果还是很明显的。用到的主要方法时adddiydom。

下面把主要的代码贴上来。

1、数据结构，要求有一个isleaf节点，标记是否是子节点。

var znodes =[
      { id:1, pid:0, name:"父节点 1", open:true,isleaf:false},
      { id:11, pid:1, name:"叶子节点 1-1",isleaf:true},
      { id:12, pid:1, name:"叶子节点 1-2",open:true,isleaf:false},
      { id:120, pid:12, name:"叶子节点 1-2-0",isleaf:true},
      { id:121, pid:12, name:"叶子节点 1-2-1",isleaf:true},
      { id:13, pid:1, name:"叶子节点 1-3",isleaf:true},
      { id:2, pid:0, name:"父节点 2", open:true,isleaf:false},
      { id:21, pid:2, name:"叶子节点 2-1",isleaf:true},
      { id:22, pid:2, name:"叶子节点 2-2",isleaf:true},
      { id:23, pid:2, name:"叶子节点 2-3",isleaf:true},
      { id:3, pid:0, name:"父节点 3", open:true,isleaf:false},
      { id:31, pid:3, name:"叶子节点 3-1",isleaf:true},
      { id:32, pid:3, name:"叶子节点 3-2",isleaf:true},
      { id:33, pid:3, name:"叶子节点 3-3",isleaf:true}
    ];

2、adddiydom方法

function adddiydom(treeid, treenode) {
      //console.log(treenode);
      var aobj = $("#" + treenode.tid + idmark_a);
      var editstr = $("<input type='checkbox' class='checkboxbtn' id='checkbox_" +treenode.id+ "' onclick='checkedhandler(this)' ></input>");
      editstr.data("treenode",treenode);
      aobj.before(editstr);
    
    }

3、自己写的几个级联操作的方法

function checkedhandler(checkbox){
      var $checkbox = $(checkbox),
        treenode = $checkbox.data("treenode"),
        state = checkbox.checked;
        if(treenode.isleaf){ //子节点
          if(state){ //子节点选中，父节点要跟着选中，子节点取消选择，父节点不用级联
            setparentnodechecked(checkbox);
          }
        }else{ //父节点
          if(state){ //选中，级联子节点，级联父节点
            setparentnodechecked(checkbox);
            setchildnodechecked(checkbox);
          }else{
            setchildnodechecked(checkbox);
          }
        }
    }
    /**设置父节点选中 */
    function setparentnodechecked(checkbox){
      var $pnode = $(checkbox).closest("ul").parent();
      var pcheckbox = $pnode.find(".checkboxbtn").get(0);
      var treenode = $(pcheckbox).data("treenode");
      if(pcheckbox.checked === checkbox.checked) return;
      pcheckbox.checked = checkbox;
      if(treenode.pid != "0") setparentnodechecked(pcheckbox);
    }
    /**设置子节点选中 */
    function setchildnodechecked(checkbox){
      $(checkbox).closest("li").find(".checkboxbtn").each(function(){
        this.checked = checkbox.checked;
      });
    }

4、css中，设置：

.ztree li.isleaf{
　　display:inline;
 }

以上所述是小编给大家介绍的ztree实现权限横向显示功能，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网