jQuery+zTree加载树形菜单

最新推荐文章于 2025-08-07 09:22:13 发布

®南墙№

最新推荐文章于 2025-08-07 09:22:13 发布

阅读量514

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44519188/article/details/92714444

本文介绍了如何利用jQuery和zTree插件构建树形菜单。zTree提供了多种风格的样式文件和js库，根据需求选择引用。在HTML中设置容器，然后通过JS配置参数、绑定数据源和回调函数来实现树形菜单的功能。数据来源于控制层搭建的节点，通过定义实体类和封装方法来处理不同层级的图标显示。

jQuery+zTree加载树形菜单

开发工具与关键技术：VS MVC、SQL
撰写时间：2019/6/14

树形在项目中使用频率较高的,而使用jquery.ztree控件搭建树形简单又高效,效果也比较喜人。从zTree官网下载的zTree包括以下组成部分：1、metroStyle文件夹：zTree的metro风格样式相关文件（图片及css样式表）2、zTreeStyle文件夹：zTree的标准风格样式文件夹（图片及css样式表）3、awesomeStyle文件夹：zTree的awesome风格样式相关文件（图片及css样式表）4、js文件：zTree.all.js是完整的js库，可单纯加载此文件实现所有zTree功能，ztree.core、ztree.excheck、ztree.exedit、ztree.exhide是对ztree按照功能进行的分割，分别对应基本功能、复选功能、编辑功能、显隐功能。

下面是我第一次做项目接触树形，分享一下我做的树形的方法
首先引用插件：

<link href="~/Plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css"  rel="stylesheet" />@*基础样式*@
<link href="~/Plugins/zTree_v3/css/awesomeStyle/awesome.css"  rel="stylesheet" />@*鲜艳样式*@
<link href="~/Plugins/zTree_v3/css/metroStyle/metroStyle.css"   rel="stylesheet" />@*经典样式*@

在要显示树形图的地方，写好容纳树形的ul标签容器：<ul id="treeDemo" class="ztree"></ul>
引用JS控件：

<script src="../../Plugins/jquery-3.2.1.min.js"></script>

最低0.47元/天解锁文章

200万优质内容无限畅学