JQuery树状结构jQuery-treeview.js插件
  在项⽬中，我们经常会需要⼀些树状结构的样式来显⽰层级结构等，⽐如下图的样式，之前在学的时候可以直接拖个服务端控件过来直接使⽤⾮常⽅便。但是利⽤Jquery的⼀些插件，也是可以实现这些效果的，⽐如说view.js插件。
jquery下载文件请求  下⾯就直⼊主题，开始从简⼊繁的分析怎么使⽤treeview插件，从已知的知识开始轻松⼊⼿，让树状结构唾⼿可得。　
  显⽰树状结构的⼏个实现步骤：
  ⼀、HTML做初始静态原型。
  ⾸先通过<ul></ul><li></li>展⽰树状基本结构，还原其最初的样⼦：
  相信学过⼀点HTML的同学都可以实现吧，在“tree.html”中写如下代码：
<ul>
2        <li>系统管理
3            <ul>
4                <li>部门管理</li>
5                <li>岗位管理
6                    <ul>
7                        <li>岗位添加</li>
8                        <li>岗位删除</li>
9                    </ul>
10                </li>
11                <li><⽤户管理
12                    <ul>
13                        <li>添加⽤户</li>
14                        <li>修改⽤户</li>
15                    </ul>
16                </li>
17            </ul>
18        </li>
19        <li>审批流转</li>
20    </ul>
我们静态的树形结构的草本如下：
  ⼆、加⼊treeview插件库，实现动态树状结构。
  在有了基本静态的树状模型以后，我们需要实现⼀个动态的结构，那么，我们的⼤菜就要上场了。
  1、⾸先搜索view.js插件进⾏下载，或直接进⼊下⾯的⽹址进⾏下载插件包：。dialogue发音音标怎么写
  2、下载压缩包解压到相应⽂件夹内，将之间的静态页⾯tree.html放到根⽬录下：
  3、在tree.html中导⼊js和css⽂件。
<!-- 导⼊js和CSS-->
2    <link rel="stylesheet" href="view.css" />
3    <script src="lib/jquery.js" type="text/javascript"></script>
4    <script src="kie.js" type="text/javascript"></script>
5    <script src="view.js" type="text/javascript"></script>
4、使⽤<ul>展⽰数据，为了⽅便得到树，在最外边的<ul>标签⾥加⼊Id为tree，如下
php curl post请求  5、显⽰我们的树状结构（加上⾏为）。
  在js⾥，我们只需要⼀⾏代码：
  在<ul></ul>标签下加⼊js代码：
<script type="text/javascript">
$("#tree").treeview();
</script>
我们的动态的树状结构的初步样式如下，已经可以⾃由的收起和展⽰了：
  6、显⽰树状结构（加上样式）。
  上⾯的样式离我们最初想要的结果还差⼀点样式，⽐如说各项之前的⽂件夹图标。下⾯我们可以加上样式，从⽽完成整个树状结构的展⽰。
    6.1在树的根节点<ul>标签中加⼊ class="filetree"。
    6.2在各项节点前加⼊⽂件夹<span>标签：⽐如：<span class="folder">系统管理</span>。
  整体tree.html代码如下：
<!DOCTYPE html pageEncoding="utf-8">
<html>
<head>
<title>tree.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=GB2312">
<!-- 导⼊js和CSS-->
<link rel="stylesheet" href="view.css" />
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="kie.js" type="text/javascript"></script>
<script src="view.js" type="text/javascript"></script>
</head>
html个人主页网站模板
<body>
antd组件<ul id="tree" class="filetree">
<li><span class="folder">系统管理</span>
<ul>
<li><span class="folder">部门管理</span></li>
<li><span class="folder">岗位管理</span>
<ul>
<li><span class="folder">岗位添加</span></li>
<li><span class="folder">岗位删除</span></li>
</ul>
</li>
<li><span class="folder">⽤户管理</span>
<ul>
<li><span class="folder">添加⽤户</span></li>
<li><span class="folder">修改⽤户</span></li>
</ul>
</li>
</ul>
</li>
<li><span class="folder">审批流转</span></li>
</ul>
<script type="text/javascript">
$("#tree").treeview();
</script>
</body>
</html>
最后的样式展⽰：
  需求完成啦！
  当然树状结构的样式有多种多样，也可以实现动态的添加节点分⽀等等，⼤家可以在下载的插件⾥demo⽂件下的例⼦看⼀下，很容易的。十大教育教学软件公司
  第⼀次实现树状结构，⼀开始的⼼情有些恐惧，也是没有头绪，感觉要通过js写下⼀个树状结构也是有些难度的，虽说toggle⽅法也可以实现指定区域的收缩（隐藏）和展⽰，加上动态变换⽂件夹等图标的样式也是可以实现的，但是⼀想就觉得太⿇烦了。所以在做OA的时候，⽼师提到了Jquery的treeview插件很好使，上⽹查询它的官⽅资料竟然查到了⼀⼤堆插件，作为插件控的同学们⼀定很兴奋吧，有⼀种刘姥姥进⼤观园的感觉。⽽且实现起来⾮常简单，从已知的知识⼊⼿，由简⼊繁，轻松
掌握了所有Jquery插件的使⽤。这就是⽶⽼师说的所谓的吃饭理论吧：⼀个⼈被邀请去参加⼀个饭局，发现饭局中只认识那个邀请⾃⼰的⼈，有些⼈会觉得饭局很⽆聊，很惆怅，或退场，或⾃娱⾃乐。但是聪明的⼈会通过那个唯⼀⾃⼰认识的⼈⽽认识整个饭局的⼈，从⽽结识了⼀⼤帮朋友。我们学习也是⼀样的，由我们已知的知识带领我们⾛进未知世界，战胜恐惧和胆怯，相信没有什么实现不了事情吧。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。