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 相关文章推荐
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 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
PHP用反撇号执行外部命令
2015/04/14 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
PHP7新功能总结
2019/04/14 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
小程序实现单选多选功能
2018/11/04 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
Python下载懒人图库JavaScript特效
2015/05/28 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
Flask-WTF表单的使用方法
2019/07/12 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
详解python polyscope库的安装和例程
2020/11/13 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
创联软件面试题笔试题
2012/10/07 面试题
生产主管岗位职责
2013/11/10 职场文书
校园十大歌手策划书
2014/02/01 职场文书
妇女儿童发展规划实施方案
2014/03/16 职场文书
班风学风建设方案
2014/05/06 职场文书
干部鉴定材料
2014/05/18 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
2014公司年终工作总结
2014/12/19 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
担保书范文
2019/07/09 职场文书
python实现会员管理系统
2022/03/18 Python