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

　　

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

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

　　一、HTML做初始静态原型。

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

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

     <ul>

         <li>系统管理

             <ul>

                 <li>部门管理</li>

                 <li>岗位管理

                     <ul>

                         <li>岗位添加</li>

                         <li>岗位删除</li>

                     </ul>

                 </li>

                 <li><用户管理

                     <ul>

                         <li>添加用户</li>

                         <li>修改用户</li>

                     </ul>

                 </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文件。

     <!-- 导入js和CSS-->

     <link rel="stylesheet" href="jquery.treeview.css" />

     <script src="lib/jquery.js" type="text/javascript"></script>

     <script src="lib/jquery.cookie.js" type="text/javascript"></script>

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

<!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="jquery.treeview.css" />

    <script src="lib/jquery.js" type="text/javascript"></script>

    <script src="lib/jquery.cookie.js" type="text/javascript"></script>

    <script src="jquery.treeview.js" type="text/javascript"></script>

  </head>

  <body>

    <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插件的使用。这就是米老师说的所谓的吃饭理论吧：一个人被邀请去参加一个饭局，发现饭局中只认识那个邀请自己的人，有些人会觉得饭局很无聊，很惆怅，或退场，或自娱自乐。但是聪明的人会通过那个唯一自己认识的人而认识整个饭局的人，从而结识了一大帮朋友。我们学习也是一样的，由我们已知的知识带领我们走进未知世界，战胜恐惧和胆怯，相信没有什么实现不了事情吧。

　　

由简入繁实现Jquery树状结构的更多相关文章

  1. JQuery 树状结构 jQuery-treeview.js 插件

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

  2. Delphi 组件渐进开发浅谈（一）——由简入繁

    最近业余时间在写游戏修改器玩,对于Delphi自带的组件总觉得差强人意,需要书写大量冗余代码,如果大量使用第三方组件,在以后的移植和与他人交互时也不是很方便,因此便产生了自己封装组件的想法. 实际上这 ...

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

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

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

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

  5. 分享使用NPOI导出Excel树状结构的数据，如部门用户菜单权限

    大家都知道使用NPOI导出Excel格式数据 很简单,网上一搜,到处都有示例代码. 因为工作的关系,经常会有处理各种数据库数据的场景,其中处理Excel 数据导出,以备客户人员确认数据,场景很常见. ...

  6. php实现树状结构无级分类

    php实现树状结构无级分类   ).",'树2-1-1-2')";mysql_query($sql);?>

  7. Android无限级树状结构

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

  8. 使用Map辅助拼装树状结构，消除递归调用

    目前菜单或其他树状结构在数据库中的存储,多数是以一个parentid作为关联字段,以一维形式存储.使用时全部查询出来,然后在内存中拼装成树状结构.现在主要涉及的是拼装方法的问题. 一般可以进行 递归调 ...

  9. lua 怎样输出树状结构的table？

    为了让游戏前端数据输出更加条理,做了一个简单树状结构来打印数据. ccmlog.lua local function __tostring(value, indent, vmap) local str ...

随机推荐

  1. WIN7,WIN8,WIN8.1,64位客户端使用32位的ODBC配置

    运行64位的ODBC管理器,点开始-->运行-->odbcad32回车即可打开,但打开后看不到32位的驱动, 如果要运行32位的ODBC管理器,该怎么办呢,其实很简单, 只要执行C:\Wi ...

  2. getRequestURI,getRequestURL的区别

    转自:http://www.cnblogs.com/JemBai/archive/2010/11/10/1873764.html test1.jsp======================= &l ...

  3. AX 与Citrix打印机问题

    国外文章,抄个链接,备查 http://blogs.msdn.com/b/axsupport/archive/2010/07/06/ax-2009-citrix-amp-terminal-server ...

  4. nodejs初窥

    1. node.js不是js应用,而是js运行平台.Node.js采用C++编写,是一个js的运行环境. 2. node.js采用事件驱动.异步编程,为网络服务而设计.Node.js的网络应用模块包括 ...

  5. 读书笔记_Effective_C++_条款四十一：了解隐式接口和编译期多态

    从本条款开始,就进入了全书的第七部分:模板与泛型编程.模板与泛型在C++中是非常重要的部分,还记得本书第一章时,把C++视为一个联邦,它由四个州政府组成,其中一个政府就是模板与泛型了. 本条款是一个介 ...

  6. [原]SQLite的学习系列之获取数据库版本二

    本系列文章主要是使用C++语言来调用其API,达到管中窥豹的目的.另外本文使用的开发环境为mac + clion,并且基于SQLite 3.7.14来进行开发. 一.去下载sqlite-amalgam ...

  7. 内存调试的东西D/dalvikvm( 809 ): GC_CONCURRENT freed

    一般Java虚拟机要求支持verbosegc选项,输出详细的垃圾收集调试信息.dalvik虚拟机很安静的接受verbosegc选项,然后什么都不做.dalvik虚拟机使用自己的一套LOG机制来输出调试 ...

  8. UIView 与 CALayer

    联系: 1. UIView 有个属性 layer,可以返回它的主 CALayer 实例:CALayer *layer = myView.layer 2. 一个 UIView 可以有多个 CALayer ...

  9. STL中priority_queue小结

    (1)为了运用priority_queue,你必须包含头文件<queue>:#include<queue> (2)在头文件中priority_queue定义如下: namesp ...

  10. 【原创】C#搭建足球赛事资料库与预测平台(4) 比赛信息数据表设计

            本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 开源C#彩票数据资料库系列文章总目录:[目录]C#搭建足球赛事资料库与预测平台与彩票数据分析目录 本篇文章开始将逐步介 ...