ztree实现权限功能(横向显示)

时间:2022-12-08 09:24:25

最近在做权限功能的时候,采用的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;if(treeNode.pId != "0"){
          pCheckbox.checked = checkbox;
         setParentNodeChecked(pCheckbox);
      } } /**设置子节点选中 */
function setChildNodeChecked(checkbox){ $(checkbox).closest("li").find(".checkboxBtn").each(function(){
this.checked = checkbox.checked;
});
}

4、css中,设置:

.ztree li.isLeaf{
  display:inline;
}

要想看实际效果,请访问:http://runjs.cn/detail/jz9f31qr

ztree实现权限功能(横向显示)的更多相关文章

  1. 基于SSM的RBAC权限系统&lpar;1&rpar;-利用ajax,bootstrap,ztree完成权限树功能

    仅支持回显以及选择,不支持在树中的编辑 搭建后台回显以及修改的模块 JSON数据封装 public class Msg { private int code; private String msg; ...

  2. Ztree &lowbar; 横向显示子节点、点击文字勾选、去除指定元素input的勾选状态

    前些天项目需要树结构表现数据,需求ztree就能满足所以直接使用ztree只是踩了些小坑... 1.ztree子节点横向显示(下图): 效果说明:第三级子节点按需求横向显示其他竖向显示,每行最多显示5 ...

  3. 基于xml 实现动态加载权限功能树列表---EFSFrame企业级开发架构

    在学习EFSFrame框架的过程中,感触最深的就是通过xml来实现前台与后台数据的交互,页面设计灵活,不用管后台如何写的,前台与后台的交互唯一的交互通道都是xml,在我们需要添加页面.添加规定的格式的 ...

  4. JavaEE权限管理系统的搭建&lpar;五&rpar;--------RBAC权限管理中的权限菜单的显示

    上一小节实现了登录的实现,本小节实现登录后根据用户名查询当前用户的角色所关联的所有权限,然后进行菜单的显示.登录成功后,如下图所示,管理设置是一级菜单,管理员列表,角色管理,权限管理是二级菜单. 先来 ...

  5. django 权限设置-菜单显示

    问题:在用户登录后,如何只显示出用户权限的菜单呢?需要设置显示菜单权限 1.为了显示菜单,需要在models权限上添加is_menu(手动判断是否是查看)的icon(图标字符串) 在rbac中录入另一 ...

  6. 不一样的ZTree,权限树&period;js插件

    每一个有趣的创新,都源于苦逼的生活. 在最近的工作中,遇到一个做权限管理筛选的需求.简单总结需求:1展示一个组织中的组织结构2通过点击组织结构中的任意一个节点可以向上向下查询对应的组织结构 如果你不想 ...

  7. ztree根据参数动态控制是否显示复选框&sol;单选框&lpar;静态JSON数据&rpar;

    本文不再更新,可能存在内容过时的情况,实时更新请访问原地址:ztree根据参数动态控制是否显示复选框/单选框(静态JSON数据): 现有全省各地区静态JSON数据,现在想通过Url参数,动态控制是否显 ...

  8. 实现ABP中Person类的权限功能

    菜单项的显示功能已经完全OK了.那么我们就开始制作视图功能吧. 首先测试接口是否正常 我们通过代码生成器将权限和application中大部分功能已经实现了.那么我们来测试下这些接口ok不. 浏览/a ...

  9. Java乔晓松-android中调用系统拍照功能并显示拍照的图片

    android中调用系统拍照功能并显示拍照的图片 如果你是拍照完,利用onActivityResult获取data数据,把data数据转换成Bitmap数据,这样获取到的图片,是拍照的照片的缩略图 代 ...

随机推荐

  1. C与C&plus;&plus;在const用法上的区别

    首先,C和C++在大体结构上不同,却在语法上相同.  所以在使用的时候,我们会时常遇到一些莫名其妙的问题,觉得语法上是正确的,但是编译的时候却出现一个红色的 error! 比如今天我遇到的这个有意思的 ...

  2. 研究在SAE上搭建最新wordpress

    安装SAE上的wordpress,创建应用选择wordpress模板,安装后是3.4版本 新建一个版本2,下载最新wordpress安装包并解压到版本2中 初步猜想修改地方: 数据库配置:wp-con ...

  3. Android实用代码块

    通过反射实现Menu显示图标 @Override public boolean onCreateOptionsMenu(Menu menu) { setIconEnable(menu, true); ...

  4. Android开发实现HttpClient工具类

    在Android开发中我们经常会用到网络连接功能与服务器进行数据的交互,为此Android的SDK提供了Apache的HttpClient来方便我们使用各种Http服务.你可以把HttpClient想 ...

  5. cartographer 安装问题

    安装主要参考hitcm教程: http://www.cnblogs.com/hitcm/p/5939507.html 这里只说安装过程中遇到的问题, ceres-solver 与 eigen3 版本不 ...

  6. BCGcontrolBar&lpar;二&rpar; 改变RIBBON字体

    在xp系统下 BCGcontrolBar字体会发虚 这时候重新设置下字体就行了 在单文档的MainFram的onCreate中加入 CFont *font=m_wndRibbonBar.GetFont ...

  7. Mysql的myqldump命令使用方法(备份与还原)

    这里的备份与还原,是指表结构数据,和表里面的具体数据(一条一条的记录)同时备份和还原.因此mysqldump,mysql这两命令很强大. 1.备份(即导出)mysqldump -u root -p e ...

  8. 自动释放池autoreleasepool

    自动释放池是NSAutoreleasePool的实例,其中包含了收到autorelease消息的对象.当一个自动释放池自身被销毁(dealloc)时,它会给池中每一个对象发送一个release消息(如 ...

  9. iOS 5解决Could not instantiate class named NSLayoutConstraint问题

    如果使用Xcode 4.5来新建项目,默认是支持AutoLayout的,但是AutoLayout是iOS 6的新特性,如果在iOS 5的simulator上运行程序,会出现Could not inst ...

  10. sql server2005 express和Northwind数据库安装

    最近在学<C#入门经典>的数据库章节时,发现机子上既没有sql server又没书中所说的northwind数据库,想立刻运行下第一个工程DataReading都没法进行.在网上折腾后有了 ...