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 相关文章推荐
JS 事件绑定函数代码
Apr 28 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
神级程序员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类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
php HTML无刷新提交表单
2016/04/05 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
javascript事件问题
2009/09/05 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
python进阶教程之循环对象
2014/08/30 Python
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
数据库测试通常都包括哪些方面
2015/11/30 面试题
干部作风建设年活动剖析材料
2014/10/23 职场文书
投资合作意向书范本
2015/05/08 职场文书
超市员工辞职信范文
2015/05/12 职场文书
党员转正党支部意见
2015/06/02 职场文书
js实现模拟购物商城案例
2021/05/18 Javascript