在项目中，我们经常需要一些树形结构样式来显示层次结构，比如下图所示的样式。在学习之前。net中，拖动服务器控件并直接使用它非常方便。但是，这些效果可以通过使用Jquery的一些插件来实现，比如Jquery.treeview.js插件。

让我们直奔主题，开始分析如何从简单到复杂使用treeview插件，从已知的知识轻松入手，让树形结构触手可及。

显示树形结构的几个步骤；

首先，HTML是最初的静态原型。

首先，通过ul/ulli/li显示基本树结构，并恢复其原始外观：

相信学过一点HTML的同学都能做到。在“tree.html”中编写以下代码：

Ul系统管理ul li部门管理/li li岗位管理ul li岗位添加/li li岗位删除/li /ul /li li用户管理ul li添加用户/li li修改用户/li /ul/Li Li审批流程/li /ul我们静态树结构的草药如下：

二是增加treeview插件库，实现动态树结构。

在有了基本的静态树模型之后，我们需要实现一个动态的结构，这样我们的主菜就会登台了。

1.首先搜索要下载的Jquery.treeview.js插件，或者直接输入以下网址下载插件包：

http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

2.下载压缩包并解压缩到相应的文件夹中，并将它们之间的静态页面tree.html放在根目录下：

3.在tree.html导入js和css文件。

！-import js和CSS-link rel='样式表' href=' jquery . treeview . CSS '/Script src=' http : lib/jquery . js ' type=' text/JavaScript '/Script src=' http : lib/jquery . cookie . js ' type=' text/JavaScript '/Script Script src=' http 3360 jquery . treeview . js ' type=' text/JavaScript '/Script 4。使用ul显示数据。为了方便获取树，在最外面的ul标签中添加Id树，如下所示。

5.显示我们的树形结构(加上行为)。

在js中，我们只需要一行代码：

在ul/ul标签下添加js代码：

脚本类型='text/javascript' $('#tree ')。treeview()；/script

我们动态树形结构的初步样式如下，可以自由折叠显示：

6.显示树形结构(加上样式)。

上面的样式比我们最初想要的稍微少一点，比如每个项目前的文件夹图标。我们可以在下面添加样式来完成整个树形结构的显示。

6.1将class='filetree '添加到树的根节点的ul标记中。

6.2在每个节点前添加文件夹span标签:例如span class='folder '系统管理/span。

整个tree.html代码如下：

！DOCTYPE html page encoding=' utf-8 ' html head titletree.html/title meta http-equiv=' keyword ' content=' keyword 1，keyword2，keyword 3 ' meta http-equiv=' description ' content='这是我的页面' meta http-equiv=' content-type ' content=' text/html；charset=GB2312 '！-导入js和CSS-link rel='样式表' href=' jquery . treeview . CSS '/脚本src=' http : lib/jquery . js ' type=' text/JavaScript '/脚本脚本src=' http : lib/jquery . cookie . js ' type=' text/JavaScript '/脚本src=' http : jquery . treeview . js ' type=' text/JavaScript '/Script/headtreeview()；/script/body/html最终样式演示：

需求已经满足！

当然，树结构的样式多种多样，也可以动态添加节点分支等。你可以在下载的插件中的演示文件下找到例子，这非常容易。

当我第一次意识到树的结构时，一开始我觉得有点害怕，但我没有头绪。我觉得很难通过js写下一个树形结构。虽然toggle方法也可以实现指定区域的收缩(隐藏)和显示，也可以实现文件夹等图标样式的动态变化，但是想起来太麻烦了。所以在做OA的时候，老师提到Jquery的treeview插件很不错，在网上搜索它的官方信息的时候发现了很多插件。做插件控制器的同学一定很兴奋，有种刘奶奶进大观园的感觉。而且实现起来非常简单，从已知的知识开始，从简单到复杂，轻松掌握所有Jquery插件的使用。这就是米小姐说的所谓吃饭理论：当一个人被邀请参加晚宴时，他发现只有邀请自己的人在晚宴上才被人知道，有些人会觉得晚宴无聊忧郁，或者离开或者自娱自乐。但是聪明的人会通过唯一认识的人了解整个应酬，从而交到很多朋友。我们用同样的方法学习。我们已知的知识带领我们进入未知的世界，战胜恐惧和胆怯，相信没有什么是做不到的。

以上实现Jquery树形结构由简单到复杂的方法(推荐)就是边肖和大家分享的全部内容，希望能给大家一个参考和支持。