zTree 插件的概述 | 学习笔记

简介: 快速学习 zTree 插件的概述

开发者学堂课程【使用 Spring Data Redis+zTree 实现授权模型的设计与思考zTree 插件的概述学习笔记,与课程紧密连接,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/745/detail/13175


zTree 插件的概述


内容介绍

一、概述

二、如何下载 zTree 插件

三、了解如何使用 zTree


一、概述

zTree 插件是树形的插件

在开发的过程中,有一些需求化,例如:需要制做一个后台系统,现系统中有权限管理的功能,很多菜单(系统首页,货运管理,统计分析,基础信息,系统管理),现在需要给一些角色分配菜单。

image.png

希望最终效果是:

页面上用一个树形结构显示很多菜单;

例如:

鼠标点击 A ->点击下图最后一个图标->将它拖至中间空白处

项目当中有一个命名为系统管理的主菜单

将子菜单显示到系统管理右下方的位置。举例:部门管理,用户的管理,角色管理。

将菜单的结构显示如下,且下图显示结构为标准的树形的菜单。

将结构显示为标准的树形的菜单后,就可以使用 zTree 插件

image.png

二、如何下载 zTree 插件

如果想要使用 zTree 插件,首先应下载 zTree 插件

在官网上下载 zTree 插件,因为 zTree 插件是前端的插件技术,该插件使用了CSS,JS 图片等等,所以需要从官网上对 zTree 插件相关的 CSS,JS 文件进行下载。

浏览器->百度搜索 zTree

点击第一个网站 Home[zTree--jQuery  树插件]

该网页中包含 demo演示,AP I文档,入门指南,下载 v3.5.34

image.png

点击下载 v3.5.34按钮,进入下载界面

可以在下载界面中找到要下载的版本,可以点击下文所示的下载地址

Donate  to  zTree : http://www.treejs.cn/v3/donate.php

zTree  API: http://www.treejs.cn/v3/api.php

zTree  Demo : http:/ /www.treejs.cn/v3/demo.php

本课已经提供了一份下载后的 zTree ,所以不需要下载,只需右键解压至当前文件夹即可。


三、了解如何使用 zTree

1.点击解压后的文件夹

可观察到该文件夹内提供了4个子文件夹:api,css,demo,js

image.png

api 是教人们如何使用 zTree 插件,提供的是一个官方文档。

css,js 里提供了一些样式,以及一些插件的方法的使用,对之后的学习有用。

Demo 是可以去参考的案例

1.如果想要使用 zTree 插件,因为不是前端开发的专业人士,所以提供的思路如下:点击 demo,demo 可以找到提供的一些树形插件,找出一个需要使用的插件,之后可以翻看源代码,然后最终把它应用到项目中。

本课也会采取以上方式操作。

image.pngcn- 表示中文

en- 表示英文

打开 demo 文件,选中并打开中文文件cn-

image.png

文件 cn 中有一个 index.hteml 文件,双击打开

可观察到提供的demo

image.png

Demo 里有一些基本功能演示

第二行是复/单选框功能 演示,点击

可观察到该功能前带有复/单选框功能的操作

image.png

可以发现还有很多案例,之后可以根据自身的需求用某个案例

第一步就是先了解 demo ,了解之后现在可以学习快速入门,讲述如果想要快速创建一个 zTree 应如何操作。

相关文章
|
JavaScript
Vue2使用全局函数或变量的两种常用方式
这篇文章介绍了在Vue 2项目中实现全局函数或变量的两种常用方式:一种是通过挂载到Vue的`prototype`,另一种是使用Vue的全局混入(Vue.mixin)。
1220 0
Vue2使用全局函数或变量的两种常用方式
|
机器学习/深度学习 存储 人工智能
基于内容的图像检索系统设计与实现(1)
基于内容的图像检索系统设计与实现(1)
基于内容的图像检索系统设计与实现(1)
|
缓存 运维 容灾
入行5年,谈谈我在阿里做测试开发的经验
作者在阿里一直从事测试开发相关工作,这几年学习很多、收获很多,作者希望给还在该方向摸爬滚打的同学一些启发和方向。
EMQ
|
传感器 人工智能 安全
EMQX 与 MQTT: AI 大模型时代的分布式数据中枢
在以数据为核心的 AI 时代,基于 MQTT 协议的消息服务器 EMQX 能帮助企业更好的利用人工智能和机器学习模型,是智能化系统中核心的数据基础软件。
EMQ
473 110
|
JavaScript
Vue3使用全局函数或变量的两种常用方式
这篇文章介绍了Vue 3中实现全局函数或变量的两种方法:一种是使用`provide/inject`进行依赖注入,另一种是利用`app.config.globalProperties`和`getCurrentInstance()`来注册全局属性。
1831 2
Vue3使用全局函数或变量的两种常用方式
|
关系型数据库 数据库 PostgreSQL
POSTGRESQL中时间戳的奥秘timestamptz
探索 PostgreSQL 中的时间戳类型:timestamp 代表无时区的时间点,而 timestamptz 包含时区信息,可转换。了解它们的区别对于数据库操作至关重要。使用 `AT TIME ZONE` 关键字可实现两者间的转换。关注木头左,获取更多数据库知识!
POSTGRESQL中时间戳的奥秘timestamptz
|
缓存 关系型数据库 MySQL
MySQL数据库性能优化实战
【4月更文挑战第30天】本文探讨了MySQL性能优化实战技巧,包括硬件与配置优化(如使用SSD、增加内存和调整配置参数)、索引优化(创建合适索引、使用复合索引及定期维护)、查询优化(避免全表扫描、减少JOIN和使用LIMIT)、分区与分片(表分区和数据库分片),以及使用缓存、定期清理数据库和监控诊断。通过这些方法,可以提升数据库性能和响应速度。
|
存储 Go 调度
浅谈Golang信号量runtime.semaphore
浅谈Golang信号量runtime.semaphore
212 0
|
存储 监控 算法
《Ceph源码分析》——导读
本节书摘来自华章出版社《Ceph源码分析》一书中的导读,作者常涛,更多章节内容可以访问云栖社区“华章计算机”公众号查看 目  录序言第1章 Ceph整体架构 **1.1 Ceph的发展历程1.2 Ceph的设计目标1.
7225 1
|
弹性计算 测试技术 Serverless
容器应用的高弹性架构实践
本实验是基于阿里云容器服务ACK Serverless,通过配置集群的容器水平伸缩(HPA)和容器定时伸缩(CronHPA)来应对业务流量高峰以及定时、批量计算业务