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)。
1317 0
Vue2使用全局函数或变量的两种常用方式
|
机器学习/深度学习 存储 人工智能
基于内容的图像检索系统设计与实现(1)
基于内容的图像检索系统设计与实现(1)
基于内容的图像检索系统设计与实现(1)
|
6月前
|
人工智能 文字识别 小程序
告别手动录入!AI自动识别发票
最近有朋友向我吐槽:"每天对着几十张发票手动录入系统,眼睛都快看花了,还总担心数字打错。" 这种重复性高、容错率低的工作,确实让财务和行政人员苦不堪言。作为程序员,我深知这类场景完全可以通过技术手段优化
380 0
|
JavaScript
Vue3使用全局函数或变量的两种常用方式
这篇文章介绍了Vue 3中实现全局函数或变量的两种方法:一种是使用`provide/inject`进行依赖注入,另一种是利用`app.config.globalProperties`和`getCurrentInstance()`来注册全局属性。
1994 2
Vue3使用全局函数或变量的两种常用方式
|
PHP
php 使用phpize报错Cannot find config.m4. Make sure that you run ‘/usr/bin/phpize‘ in the top l
php 使用phpize报错Cannot find config.m4. Make sure that you run ‘/usr/bin/phpize‘ in the top l
712 1
|
开发框架 前端开发 JavaScript
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面
829 0
|
缓存 关系型数据库 MySQL
MySQL数据库性能优化实战
【4月更文挑战第30天】本文探讨了MySQL性能优化实战技巧,包括硬件与配置优化(如使用SSD、增加内存和调整配置参数)、索引优化(创建合适索引、使用复合索引及定期维护)、查询优化(避免全表扫描、减少JOIN和使用LIMIT)、分区与分片(表分区和数据库分片),以及使用缓存、定期清理数据库和监控诊断。通过这些方法,可以提升数据库性能和响应速度。
|
数据可视化 应用服务中间件 nginx
Mac使用命令可视化编辑文件(open命令)
Mac使用命令可视化编辑文件(open命令)
228 0
|
存储 监控 算法
《Ceph源码分析》——导读
本节书摘来自华章出版社《Ceph源码分析》一书中的导读,作者常涛,更多章节内容可以访问云栖社区“华章计算机”公众号查看 目  录序言第1章 Ceph整体架构 **1.1 Ceph的发展历程1.2 Ceph的设计目标1.
7338 1
|
缓存 数据安全/隐私保护 Windows
ECDSA host key for ... has changed and you have requested strict checking.Host key verification fail
ECDSA host key for ... has changed and you have requested strict checking.Host key verification fail