欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2016年06月10日 11:35:29   投稿：jingxian  
下面小編就為大家?guī)硪黄珊喨敕睂崿F(xiàn)Jquery樹狀結(jié)構(gòu)的方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

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

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

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

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

相信學過一點HTML的同學都可以實現(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插件庫，實現(xiàn)動態(tài)樹狀結(jié)構(gòu)。

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

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

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

2、下載壓縮包解壓到相應文件夾內(nèi)，將之間的靜態(tài)頁面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>展示數(shù)據(jù)，為了方便得到樹，在最外邊的<ul>標簽里加入Id為tree，如下

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

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

在<ul></ul>標簽下加入js代碼：

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

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

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

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

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

6.2在各項節(jié)點前加入文件夾<span>標簽：比如：<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">
  <!-- 導入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>

最后的樣式展示：

需求完成啦！

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

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

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

相關(guān)文章

最新評論