ztree实现权限横向显示功能


Posted in Javascript onMay 20, 2017

 最近在做权限功能的时候,采用的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实现权限横向显示功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 #Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 #Javascript
微信小程序利用co处理异步流程的方法教程
May 20 #Javascript
关于jQuery库冲突的完美解决办法
May 20 #jQuery
layui文件上传实现代码
May 20 #Javascript
为你的微信小程序体积瘦身详解
May 20 #Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 #jQuery
You might like
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
Python闭包实现计数器的方法
2015/05/05 Python
python和bash统计CPU利用率的方法
2015/07/10 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
详解Python中namedtuple的使用
2020/04/27 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
经典c++面试题四
2015/05/14 面试题
工程造价自荐信
2013/10/09 职场文书
中药专业大学生医药工作求职信
2013/10/25 职场文书
读书心得体会
2013/12/28 职场文书
出国留学介绍信
2014/01/13 职场文书
批评与自我批评材料
2014/02/15 职场文书
公司投资建议书
2014/05/16 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
个人租房协议书样本
2014/10/01 职场文书
思想作风建设心得体会
2014/10/22 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
Python办公自动化之Excel(中)
2021/05/24 Python
详解Python生成器和基于生成器的协程
2021/06/03 Python
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python