由简入繁实现Jquery树状结构的方法(推荐)_jquery

在项目中,我们经常会需要一些树状结构的样式来显示层级结构等,比如下图的样式,之前在学.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树状结构的方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery树状结构
jquery实现树状结构图、jquery树状图插件、jquery树状菜单插件、jquery树状图、jquery 树状分级菜单,以便于您获取更多的相关知识。

时间: 2024-11-08 21:56:41

由简入繁实现Jquery树状结构的方法(推荐)_jquery的相关文章

jquery分隔Url的param方法(推荐)_jquery

最近需要分隔url的querystring,用到了特意记录一下. 方法: //获取url中的paramsvar search = location.search.substring(1);//params转换object(javascript)search?JSON.parse('{"' + search.replace(/&/g, '","').replace(/=/g,'":"') + '"}', function(key, valu

C#使用Jquery zTree实现树状结构显示 异步数据加载_C#教程

C#使用Jquery zTree实现树状结构显示_异步数据加载 JQuery-Ztree下载地址:https://github.com/zTree/zTree_v3 JQuery-Ztree数结构演示页面:  http://www.treejs.cn/v3/demo.php 关于zTree的详细解释请看演示页面,还有zTree帮助Demo.  下面简要讲解下本人用到的其中一个实例(直接上关键代码了): 异步加载节点数据:  A-前台: <link href="zTree_v3-master

实现树状结构的两种方法

实现树状结构的两种方法1.递归法递归是指在函数中显式的调用它自身.利用递归法实现树状结构的特点是写入数据速度较快,显示速度较慢(在树的分支/层次较多的情况下尤其明显).适用与写入数据量大,树的结构复杂的情况下.数据结构(以mysql为例) 代码:--------------------------------------------------------------------------------CREATE TABLE `tree1` ( `id` tinyint(3) unsigned

使用“使用中值排序基数法”实现树状结构(一)

排序|排序 在BBS的编写中,经常有人问怎样实现树状结构?一个比较不负责任的回答是:使用递归算法.当然,递归是一个可行的办法(二叉树的历遍也好象只能使用递归算法),但对于BBS来说,这样做势必要进行大量的Sql查询(虽然可以使用存储过程来做,但要从根本上加快速度,则应该考虑更快的算法). 下面给出一个可行的彻底屏弃递的实现树状结构的算法. 下面给出另一种使用"使用中值排序基数法"实现树状结构: 一.主要思想:增加一个排序基数字段ordernum,回复同一根贴的贴子中插入贴子时,排序

用PHP程序实现树状结构的两种方法

程序 1.递归法 递归是指在函数中显式的调用它自身. 利用递归法实现树状结构的特点是写入数据速度较快,显示速度较慢(在树的分支/层次较多的情况下尤其明显).适用与写入数据量大,树的结构复杂的情况下. 数据结构(以mysql为例) 代码: CREATE TABLE `tree1` ( `id` tinyint(3) unsigned NOT NULL auto_increment, `parentid` tinyint(3) unsigned NOT NULL default '0', `topi

用排序串字段实现树状结构(原理)

排序     实现原理:以一排序字段(字符型实现排序),该字段的实际长度即为回复深度(用一位字符代表一层深度时).    所受限制:回复深度只受排序串定义长度的限制(有点象空间换深度),每贴回复数(包括根贴和子贴)为30左右(当sql server使用Dictionary order,case-insensitive排序方式,即不区分字母大小写时),如果sql server使用Binary orders排序方式时受限为127(255?).    改进方法:如果觉得不够用,可以使用多位字符对应一个

用中值排序基数法实现树状结构——让递归滚一边去

递归|排序 用中值排序基数法实现树状结构     在BBS的编写中,经常有人问怎样实现树状结构?一个比较不负责任的回答是:使用递归算法.当然,递归是一个可行的办法(二叉树的历遍也好象只能使用递归算法),但对于BBS来说,这样做势必要进行大量的Sql查询(虽然可以使用存储过程来做,但要从根本上加快速度,则应该考虑更快的算法).下面给出一个可行的彻底屏弃递的实现树状结构的算法.     下面给出另一种使用"使用中值排序基数法"实现树状结构:一.主要思想:增加一个排序基数字段ordernum

关于bigeagle的树状结构存储过程的一点看法

存储过程 大鹰,关于你在精华区的树状结构存储过程的贴子的内容好像不对呀,我做了实验,只能取根帖,我改了一下,在query analyzer中可以,但在页面上只能显示出一部分,你帮忙看一下好吗             CREATE proc up_TopicList             @a_ForumID int ,  @a_intPageNo int , @a_intPageSize tinyint   as       declare @m_intRecordNumber int    

“中值排序基数法实现树状结构”的补充

排序 "中值排序基数法实现树状结构"的补充     由于一时疏忽,造成了此法"对于int类型的基数字段,对原始贴的回复只能有31个:numeric类型的基数字段,对原始贴的回复也不能超过120个"(实际上是对于int型字段,原始贴的回复第32个以上的树状结构显示开始紊乱,对于numeric型的基数字段,原始贴的回复从121个以上树状结构显示开始紊乱--回复并不会出问题),这是由于计算机存储精度引起的.    我们可以将加贴的存储过程修改一下(加进前面加上**号的行)