欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ztree实现权限横向显示功能

程序员文章站 2023-12-27 19:58:15
 最近在做权限功能的时候,采用的ztree实现的,但是产品要求最后一层的权限节点要横向显示。开始在网上找的解决方案是用css样式把最后一层的display设置为i...

 最近在做权限功能的时候,采用的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实现权限横向显示功能,希望对大家有所帮助

上一篇:

下一篇: