不一样的ZTree,权限树.js插件

每一个有趣的创新,都源于苦逼的生活。

在最近的工作中,遇到一个做权限管理筛选的需求。

简单总结需求:

1展示一个组织中的组织结构

2通过点击组织结构中的任意一个节点可以向上向下查询对应的组织结构

如果你不想苦逼的重复劳动,还是造个轮子吧

第一次遇到这样的需求,花费了很多时间去解决,在解决的过程中闪现一个灵感,觉得可以结合函数的递归用更少的代码去解决这个需求。

于是经过一番研究,写出了自己的第一个插件,在这里还大家分享交流,欢迎大家使用交流~

这里展示下demo中的使用效果


如果你觉得这个轮子挺有趣,就给个star吧

github项目地址

后续会撸代码实现一些类似ztree.js的功能




更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366662.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaFX 2:如何加载图像

这是有关如何在JavaFX 2应用程序中加载图像的JavaFX教程。 使用ImageView可以轻松完成此操作。 ImageView是一个节点,用于绘制加载有Image类的图像。 因此,您将首先使用Image类加载图像,然后使用ImageView显示它。 我还将在这里演示如何从本地…

记HTML5 a 标签的一个小坑

今天写了段简单的代码&#xff0c;点击<a>标签时却抛出了这个错误&#xff1a;Uncaught TypeError: download is not a function。代码如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><…

C#线程 ---- 线程同步详解

线程同步 说明&#xff1a;接上一篇&#xff0c;注意分享线程同步的必要性和线程同步的方法。 测试代码下载&#xff1a;https://github.com/EkeSu/C-Thread-synchronization-C-.git 一、什么是线程同步&#xff1a; 在同一时间只允许一个线程访问资源的情况称为线程同步。 二、…

响应式方案调研及前端开发管理思考

网易首页响应式风格实现技术调研网易首页实现页面&#xff08;字体&#xff09;响应式风格的方式是在不同尺寸的视口中使用不同的容器类&#xff0c;如图 1所示。当视口大于等于1420px时&#xff0c;使用大尺寸容器类 &#xff08;index2017_1200_wrap&#xff0c;width: 1200p…

linux nexus启动_Linux一键部署Nexus 3私服仓库自动化部署脚本

此脚本是Linux一键部署Nexus 3私服仓库自动化脚本&#xff0c;有需要朋友可以参考&#xff0c;脚本内容如下&#xff1a;环境准备&#xff1a;操作系统&#xff1a;CentOS Linux release 7.8.2003软件版本&#xff1a;Docker&#xff1a;docker-ce-19.03.12[rootlocalhost ~]# …

flex.css快速入门,极速布局

什么是flex.css? css3 flex 布局相信很多人已经听说过甚至已经在开发中使用过它&#xff0c;但是我想我们都会有一个共同的经历&#xff0c;面对它的各种版本&#xff0c;各种坑&#xff0c;傻傻的分不清楚&#xff0c;flex.css就是对flex布局的一种封装&#xff0c;通过简洁…

优化Angularjs的$watch方法

Angularjs的$watch相信大家都知道&#xff0c;而且也经常使用&#xff0c;甚至&#xff0c;你还在为它的某些行为感到恼火。比如&#xff0c;一进入页面&#xff0c;它就会调用一次&#xff0c;我明明希望它在我初始化之后&#xff0c;值再次变动才调用。这种行为给我们带来许多…

JavaFX中的塔防(2)

在上一部分中&#xff0c;我们创建了一个简单的编辑器&#xff0c;让我们放置炮塔。 现在&#xff0c;我们将在敌人起源的地方添加一个生成点&#xff0c;并为其定义攻击目标。 首先&#xff0c;我将通过对象层向地图添加更多信息。 这是标准的TMX&#xff0c;因此我们可以在Ti…

12面魔方公式图解法_三阶魔方入门

一、魔方的构造这里只讲常见的普通三阶魔方。三阶魔方一共有26个色块&#xff0c;分三个层&#xff0c;从上到下分别为顶层、中间层、底层。26个色块按位置分为中心块、角色块、棱色块。中心块6个&#xff0c;角色块8个&#xff0c;棱色块12个。中心块为每一个面最中央的色块。…

Linux ls命令详解

ls常见命令参数 ls: -F 给不同的文件添加不同表示,添加帽子 d/ l* s -a: 显示隐藏文件 以.开头的文件 -p: 只给目录添加/ -t: 按照修改时间排序 time --time-stylelong-iso: ls -l --time-stylelong-iso 显示友好长格式时间 -r: 倒着排序 reverse -S: 按照文件…

caffe 人脸关键点检测_人脸检测关键点新增至81个,比Dlib更精准、更贴边

人脸关键点检测是人脸识别和分析领域中的关键一步&#xff0c;它是诸如自动人脸识别、表情分析、三维人脸重建及三维动画等其它人脸相关问题的前提和突破口。虽然人脸的结构是确定的&#xff0c;由眉毛、眼睛、鼻子和嘴等部位组成&#xff0c;近似是一个刚体&#xff0c;但由于…

美团点评云真机平台实践

背景 随着美团点评业务越来越多&#xff0c;研发团队越来越庞大&#xff0c;对测试手机的需求显著增长。这对公司来说是一笔不小的开支&#xff0c;但现有测试手机资源分配不均&#xff0c;利用率也非常有限&#xff0c;导致各个团队开发、测试过程中都很难做到多机型覆盖。怎…

微型计算机和pc的概念,微型计算机IBM-PC(0520)系统原理及应用

本书是周明德教授的《微型计算机系统原理及应用》的第六版。曾获全国畅销书一等奖。根据微处理器的新发展&#xff0c;本书从80x86系列微处理器整体着眼&#xff0c;落实到基本的处理器8086&#xff0c;介绍了微型计算机系统原理、80x86系列微处理器结构、8086指令系统和汇编语…

volta架构 微型计算机,性能大爆炸 NVIDIA新GPU架构曝光

一年一度的GTC大会目前正在大洋彼岸的美国加利福尼亚州圣何塞市召开&#xff0c;这是由NVIDIA主办的GPU通用计算技术大会&#xff0c;号称是“图形技术巫师”们的聚会。几乎每次GTC大会上NVIDIA都会拿出来些压箱底的东西震场面&#xff0c;这届自然也不会例外。NVIDIA在GTC大会…

有一本书,适合零到十年经验的程序员看

这本书就是《代码大全》。这书名看起来就不想读&#xff1f; 我第一次看到这个书名的时候&#xff0c;心想难道这本书要把所有编程语言都讲一遍吗&#xff1f;但是当我深入阅读这本书之后&#xff0c;简直爱不释手。 这本书太厚了&#xff0c;你看不下去&#xff1f; 是的&a…

西门子数控面板图解_学好四要点让你迅速成为数控机床“操作高手”

当前国内许多刚刚从事数控机床操作人员的分类来说&#xff0c;一部分操作者是&#xff0c;对机械加工非常熟悉&#xff0c;但对于数控机床的编程是比较陌生的&#xff1b;一部分是刚毕业的学生&#xff0c;他们对机械加工知识&#xff0c;数控加工和编程的理论比较熟悉&#xf…

Android Service、IntentService,Service和组件间通信

Service组件 Service 和Activity 一样同为Android 的四大组件之一&#xff0c;并且他们都有各自的生命周期&#xff0c;要想掌握Service 的用法&#xff0c;那就要了解Service 的生命周期有哪些方法&#xff0c;并且生命周期中各个方法回调的时机和作用 什么是service&#xff…

生物计算机科学家,科学家开发细胞计算机 人体就是一台大型计算机

原标题&#xff1a;科学家开发细胞计算机 人体就是一台大型计算机欢迎收看新一期“新奇榜”&#xff0c;新鲜科技、奇闻怪事尽在新奇榜。近日&#xff0c;瑞士研究人员成功制造出了一种功能强大、类似计算机的人体细胞。这种细胞可能被用来帮助监测一个人的健康状况&#xff0c…

k8s源码分析 pdf_rook源码分析之一:rook架构解析

rook简介Rook是一款云原生环境下的开源分布式存储编排系统&#xff0c;目前支持 Ceph、NFS、Edegefs、Cassandra、CockroachDB等存储系统。它实现了一个自动管理的、自动扩容的、自动修复的分布式存储服务。Rook 支持自动部署、启动、配置、分配、扩容/缩容、升级、迁移、灾难恢…

weex eros框架源码解析

weex eros是基于alibaba weex框架进行二次封装的客户端跨平台开发框架&#xff0c;主要是为前端开发者&#xff08;可以不用熟悉客户端开发)提供的一站式客户端app开发解决方案。官网地址为&#xff1a;https://bmfe.github.io/eros-docs/#/。为了方便前端开发者和客户端开发者…