由簡入繁實(shí)現(xiàn)Jquery樹狀結(jié)構(gòu)的方法(推薦)

更新時(shí)間：2016年06月10日 11:35:29 投稿：jingxian

下面小編就為大家?guī)硪黄珊喨敕睂?shí)現(xiàn)Jquery樹狀結(jié)構(gòu)的方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

在項(xiàng)目中，我們經(jīng)常會(huì)需要一些樹狀結(jié)構(gòu)的樣式來顯示層級(jí)結(jié)構(gòu)等，比如下圖的樣式，之前在學(xué).net的時(shí)候可以直接拖個(gè)服務(wù)端控件過來直接使用非常方便。但是利用Jquery的一些插件，也是可以實(shí)現(xiàn)這些效果的，比如說Jquery.treeview.js插件。

下面就直入主題，開始從簡入繁的分析怎么使用treeview插件，從已知的知識(shí)開始輕松入手，讓樹狀結(jié)構(gòu)唾手可得?！?/span>

顯示樹狀結(jié)構(gòu)的幾個(gè)實(shí)現(xiàn)步驟：

一、HTML做初始靜態(tài)原型。

首先通過<ul></ul><li></li>展示樹狀基本結(jié)構(gòu)，還原其最初的樣子：

相信學(xué)過一點(diǎn)HTML的同學(xué)都可以實(shí)現(xiàn)吧，在“tree.html”中寫如下代碼：

<ul>
    <li>系統(tǒng)管理
      <ul>
        <li>部門管理</li>
        <li>崗位管理
          <ul>
            <li>崗位添加</li>
            <li>崗位刪除</li>
          </ul>
        </li>
        <li><用戶管理
          <ul>
            <li>添加用戶</li>
            <li>修改用戶</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>審批流轉(zhuǎn)</li>
  </ul>

我們靜態(tài)的樹形結(jié)構(gòu)的草本如下：

二、加入treeview插件庫，實(shí)現(xiàn)動(dòng)態(tài)樹狀結(jié)構(gòu)。

在有了基本靜態(tài)的樹狀模型以后，我們需要實(shí)現(xiàn)一個(gè)動(dòng)態(tài)的結(jié)構(gòu)，那么，我們的大菜就要上場了。

1、首先搜索Jquery.treeview.js插件進(jìn)行下載，或直接進(jìn)入下面的網(wǎng)址進(jìn)行下載插件包：

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

2、下載壓縮包解壓到相應(yīng)文件夾內(nèi)，將之間的靜態(tài)頁面tree.html放到根目錄下：

3、在tree.html中導(dǎo)入js和css文件。

<!-- 導(dǎo)入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>展示數(shù)據(jù)，為了方便得到樹，在最外邊的<ul>標(biāo)簽里加入Id為tree，如下

5、顯示我們的樹狀結(jié)構(gòu)（加上行為）。

在js里，我們只需要一行代碼：

在<ul></ul>標(biāo)簽下加入js代碼：

 <script type="text/javascript">  $("#tree").treeview();  </script>

我們的動(dòng)態(tài)的樹狀結(jié)構(gòu)的初步樣式如下，已經(jīng)可以自由的收起和展示了：

6、顯示樹狀結(jié)構(gòu)（加上樣式）。

上面的樣式離我們最初想要的結(jié)果還差一點(diǎn)樣式，比如說各項(xiàng)之前的文件夾圖標(biāo)。下面我們可以加上樣式，從而完成整個(gè)樹狀結(jié)構(gòu)的展示。

6.1在樹的根節(jié)點(diǎn)<ul>標(biāo)簽中加入 class="filetree"。

6.2在各項(xiàng)節(jié)點(diǎn)前加入文件夾<span>標(biāo)簽：比如：<span class="folder">系統(tǒng)管理</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">
  <!-- 導(dǎo)入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">系統(tǒng)管理</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">審批流轉(zhuǎn)</span></li>
  </ul>
  
  <script type="text/javascript">
  $("#tree").treeview();
  </script>
 </body>
</html>

最后的樣式展示：

需求完成啦！

當(dāng)然樹狀結(jié)構(gòu)的樣式有多種多樣，也可以實(shí)現(xiàn)動(dòng)態(tài)的添加節(jié)點(diǎn)分支等等，大家可以在下載的插件里找demo文件下的例子看一下，很容易的。

第一次實(shí)現(xiàn)樹狀結(jié)構(gòu)，一開始的心情有些恐懼，也是沒有頭緒，感覺要通過js寫下一個(gè)樹狀結(jié)構(gòu)也是有些難度的，雖說toggle方法也可以實(shí)現(xiàn)指定區(qū)域的收縮（隱藏）和展示，加上動(dòng)態(tài)變換文件夾等圖標(biāo)的樣式也是可以實(shí)現(xiàn)的，但是一想就覺得太麻煩了。所以在做OA的時(shí)候，老師提到了Jquery的treeview插件很好使，上網(wǎng)查詢它的官方資料竟然查到了一大堆插件，作為插件控的同學(xué)們一定很興奮吧，有一種劉姥姥進(jìn)大觀園的感覺。而且實(shí)現(xiàn)起來非常簡單，從已知的知識(shí)入手，由簡入繁，輕松掌握了所有Jquery插件的使用。這就是米老師說的所謂的吃飯理論吧：一個(gè)人被邀請去參加一個(gè)飯局，發(fā)現(xiàn)飯局中只認(rèn)識(shí)那個(gè)邀請自己的人，有些人會(huì)覺得飯局很無聊，很惆悵，或退場，或自娛自樂。但是聰明的人會(huì)通過那個(gè)唯一自己認(rèn)識(shí)的人而認(rèn)識(shí)整個(gè)飯局的人，從而結(jié)識(shí)了一大幫朋友。我們學(xué)習(xí)也是一樣的，由我們已知的知識(shí)帶領(lǐng)我們走進(jìn)未知世界，戰(zhàn)勝恐懼和膽怯，相信沒有什么實(shí)現(xiàn)不了事情吧。

以上這篇由簡入繁實(shí)現(xiàn)Jquery樹狀結(jié)構(gòu)的方法(推薦)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: