由简入繁实现Jquery树状结构

　　在项目中，我们经常会需要一些树状结构的样式来显示层级结构等，比如下图的样式，之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便。但是利用Jquery的一些插件，也是可以实现这些效果的，比如说Jquery.treeview.js插件。

　　

　　下面就直入主题，开始从简入繁的分析怎么使用treeview插件，从已知的知识开始轻松入手，让树状结构唾手可得。　

　　显示树状结构的几个实现步骤：

　　一、HTML做初始静态原型。

　　首先通过<ul></ul><li></li>展示树状基本结构，还原其最初的样子：

　　相信学过一点HTML的同学都可以实现吧，在“tree.html”中写如下代码：

  1. <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、首先搜索Jquery.treeview.js插件进行下载，或直接进入下面的网址进行下载插件包：http://bassistance.de/jquery-plugins/jquery-plugin-treeview/。

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

　　

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

  1. <!-- 导入js和CSS-->
  2.      <link rel="stylesheet" href="jquery.treeview.css" />
  3.      <script src="lib/jquery.js" type="text/javascript"></script>
  4.      <script src="lib/jquery.cookie.js" type="text/javascript"></script>
  5.      <script src="jquery.treeview.js" type="text/javascript"></script>

4、使用<ul>展示数据，为了方便得到树，在最外边的<ul>标签里加入Id为tree，如下

　　

　　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代码如下：

  1. <!DOCTYPE html pageEncoding="utf-8">
  2. <html>
  3.   <head>
  4.     <title>tree.html</title>
  5.  
  6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  7.     <meta http-equiv="description" content="this is my page">
  8.     <meta http-equiv="content-type" content="text/html; charset=GB2312">
  9.     <!-- 导入js和CSS-->
  10.     <link rel="stylesheet" href="jquery.treeview.css" />
  11.     <script src="lib/jquery.js" type="text/javascript"></script>
  12.     <script src="lib/jquery.cookie.js" type="text/javascript"></script>
  13.     <script src="jquery.treeview.js" type="text/javascript"></script>
  14.  
  15.   </head>
  16.  
  17.   <body>
  18.     <ul id="tree" class="filetree">
  19.         <li><span class="folder">系统管理</span>
  20.             <ul>
  21.                 <li><span class="folder">部门管理</span></li>
  22.                 <li><span class="folder">岗位管理</span>
  23.                     <ul>
  24.                         <li><span class="folder">岗位添加</span></li>
  25.                         <li><span class="folder">岗位删除</span></li>
  26.                     </ul>
  27.                 </li>
  28.                 <li><span class="folder">用户管理</span>
  29.                     <ul>
  30.                         <li><span class="folder">添加用户</span></li>
  31.                         <li><span class="folder">修改用户</span></li>
  32.                     </ul>
  33.                 </li>
  34.             </ul>
  35.         </li>
  36.         <li><span class="folder">审批流转</span></li>
  37.     </ul>
  38.  
  39.    <script type="text/javascript">
  40.     $("#tree").treeview();
  41.    </script>
  42.   </body>
  43. </html>

最后的样式展示：

　　

　　需求完成啦！

　　当然树状结构的样式有多种多样，也可以实现动态的添加节点分支等等，大家可以在下载的插件里找demo文件下的例子看一下，很容易的。

　　第一次实现树状结构，一开始的心情有些恐惧，也是没有头绪，感觉要通过js写下一个树状结构也是有些难度的，虽说toggle方法也可以实现指定区域的收缩（隐藏）和展示，加上动态变换文件夹等图标的样式也是可以实现的，但是一想就觉得太麻烦了。所以在做OA的时候，老师提到了Jquery的treeview插件很好使，上网查询它的官方资料竟然查到了一大堆插件，作为插件控的同学们一定很兴奋吧，有一种刘姥姥进大观园的感觉。而且实现起来非常简单，从已知的知识入手，由简入繁，轻松掌握了所有Jquery插件的使用。这就是米老师说的所谓的吃饭理论吧：一个人被邀请去参加一个饭局，发现饭局中只认识那个邀请自己的人，有些人会觉得饭局很无聊，很惆怅，或退场，或自娱自乐。但是聪明的人会通过那个唯一自己认识的人而认识整个饭局的人，从而结识了一大帮朋友。我们学习也是一样的，由我们已知的知识带领我们走进未知世界，战胜恐惧和胆怯，相信没有什么实现不了事情吧。

JQuery 树状结构 jQuery-treeview.js 插件的更多相关文章

  1. 由简入繁实现Jquery树状结构

    在项目中,我们经常会需要一些树状结构的样式来显示层级结构等,比如下图的样式,之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便.但是利用Jquery的一些插件,也是可以实现这些效果的,比 ...

  2. 原生JS实现树状结构列表

    树状结构列表,这个技术点之前有写过了,是基于vue讲解,但似乎都没有解决痛点,最基础的原生JS该怎么实现呢? 这篇文章会全面详细的介绍树状结构列表的实现,从数据处理成树状结构,到动态生成dom节点渲染 ...

  3. js List<Map> 将偏平化的数组转为树状结构并排序

    数据格式: [ { "id":"d3e8a9d6-e4c6-4dd8-a94f-07733d3c1b59", "parentId":&quo ...

  4. js 每日一更（数组转换成前端更容易解析的树状结构）

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

  5. 利用checkbox自带属性indeterminate构建含部分选中状态的树状结构

    本来上个月就像发的,但是一直忙啊忙的也没时间整理,所以拖到了现在. 好吧上面这句就是废话,我就是感概下.下面是正文. 前段时间在弄一个轻量级的web项目,要构建一个树状结构目录,同时希望能把部分选中的 ...

  6. 用Django ORM实现树状结构

    前言 之前看对于用关系数据库实现树状结构的方法就知道一直做自关联的表,但是感觉自关联查询太慢了,最近看到一篇文章,感觉视野开拓了好多,文章:数据库表设计,没有最好只有最适合来自:微信. 下面就针对这里 ...

  7. Android无限级树状结构

    通过对ListView简单的扩展.再封装,即可实现无限层级的树控件TreeView. package cn.asiontang.nleveltreelistview; import android.a ...

  8. tkinter中树状结构的建立（十四）

    树状结构的建立 import tkinter from tkinter import ttk wuya = tkinter.Tk() wuya.title("wuya") wuya ...

  9. 树状结构Java模型、层级关系Java模型、上下级关系Java模型与html页面展示

    树状结构Java模型.层级关系Java模型.上下级关系Java模型与html页面展示 一.业务原型:公司的组织结构.传销关系网 二.数据库模型 很简单,创建 id 与 pid 关系即可.(pid:pa ...

随机推荐

  1. Python用户交互

    print("开始") # 赋值,把等号右边的内容赋值给左边 s = input() #input("这里是input")# input输入,让用户输入一些内容 ...

  2. 基于区域的OSPF的MD5认证

    实验要求:掌握OSPF基于区域的MD5认证 拓扑如下: 配置如下: R1enable configure terminal interface s0/0/0ip address 192.168.1.1 ...

  3. java pojo类

    POJO POJO是Plain OrdinaryJava Object的缩写 可以当作简单的Java对象 实际就是普通JavaBeans 外文名 POJO 实际意义 普通JavaBeans 全     ...

  4. jQuery.Deferred exception: $.get is not a function TypeError: $.get is not a function

    /********************************************************************** * jQuery.Deferred exception: ...

  5. websocket介绍 以及 vue websocket使用案例

    1 介绍: https://www.zhihu.com/question/20215561 2 案例: https://www.jianshu.com/p/0d20a032d0ec (坑说明). ht ...

  6. UE4开发安卓遇到的坑

    做个记录,方便以后自己查询. 1.  打包后,应用出现缺乏google key的问题. 理论上,这个网站可以解决:https://wiki.unrealengine.com/How_To_Sign_U ...

  7. 使用JQuery提交表单的两种方式选择

    有一个表单,如果使用JQuery提交的话,可以使用下面2中方式,但他们的区别却是根据实际需求需要进行选择的. 第一种:表单按照action路径提交后,页面会刷新. $("#id") ...

  8. 4.input()

    >>> help(input) Help on built-in function input in module builtins: input(prompt=None, /) R ...

  9. LeetCode – Group Shifted Strings

    Given a string, we can "shift" each of its letter to its successive letter, for example: & ...

  10. LG3975 [TJOI2015]弦论

    题意 题目描述 为了提高智商,ZJY开始学习弦论.这一天,她在< String theory>中看到了这样一道问题:对于一个给定的长度为n的字符串,求出它的第k小子串是什么.你能帮帮她吗? ...