jQuery樹形插件jquery.simpleTree.js用法分析
本文實例講述了jQuery樹形插件jquery.simpleTree.js用法。分享給大家供大家參考，具體如下：
最近寫項目的cms系統(tǒng)，客戶要求后臺管理可以通過一棵樹來展現(xiàn)整個幫助文檔的結構，并通過拖拽操作來實現(xiàn)文章和欄目的位置排列變化，我在網(wǎng)上找來半天，決定使用jQuery.simpleTree.js來實現(xiàn)。
這個樹控件支持拖動節(jié)點到新的位置，通過其提供aftermove函數(shù)的覆寫，我們可以在其拖動完成后在aftermove函數(shù)中調(diào)用ajax來后臺更改數(shù)據(jù)庫來保存拖動的結果
同時這個樹的節(jié)點還存在單擊事件，每個節(jié)點如同一個按鈕一樣，相對比一個超鏈接可擴展性強多了
生成這個樹需要的只是生成一些html元素比如說如下的代碼
<li id='35'><span class="text">Tree Node Ajax 1</span></li>
<li id='36'><span class="text">Tree Node Ajax 2</span></li>
<li id='37'><span class="text">Tree Node Ajax 3</span>
<ul>
<li id='38'><span class="text">Tree Node Ajax 3-1</span>
<ul>
<li id='39'><span class="text">Tree Node Ajax 3-1-1</span></li>
<li id='40'><span class="text">Tree Node Ajax 3-1-2</span></li>
<li id='41'><span class="text">Tree Node Ajax 3-1-3</span></li>
<li id='42'><span class="text">Tree Node Ajax 3-1-4</span></li>
</ul>
</li>
<li id='43'><span class="text">Tree Node Ajax 3-2</span></li>
<li id='44'><span class="text">Tree Node Ajax 3-3</span>
<ul>
<li id='45'><span class="text">Tree Node Ajax 3-3-1</span></li>
<li id='46'><span class="text">Tree Node Ajax 3-3-2</span></li>
<li id='47'><span class="text">Tree Node Ajax 3-3-3</span></li>
</ul>
</li>
<li id='48'><span class="text">Tree Node Ajax 3-4</span></li>
<li id='49'><span class="text">Tree Node Ajax 3-5</span>
<ul>
<li id='50'><span class="text">Tree Node Ajax 3-5-1</span></li>
<li id='51'><span class="text">Tree Node Ajax 3-5-2</span></li>
<li id='52'><span class="text">Tree Node Ajax 3-5-3</span></li>
</ul>
</li>
<li id='53'><span class="text">Tree Node Ajax 3-6</span></li>
</ul>
</li>
<li id='54'><span class="text">Tree Node Ajax 4</span></li>
生成的樹如下：
當然這是靜態(tài)的代碼實現(xiàn)的，在jquery.simpleTree中生成這些html元素的是loadTree.php文件，我們完全可以從數(shù)據(jù)庫中取出數(shù)據(jù)以這些html元素的形式打印出來么。
更多關于jQuery相關內(nèi)容感興趣的讀者可查看本站專題：《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
jQuery插件multiScroll實現(xiàn)全屏鼠標滾動切換頁面特效
本文給大家分享的是一款jQuery整屏（全屏）滾動插件網(wǎng)頁特效，滾動鼠標滾輪整屏一屏滾動切換代碼，可設置文字/圖片絕對上下左右居中顯示JS代碼，時下最流行的jQuery全屏滾動插件?。嫒轀y試：IE6及以上、Firefox、Chrome、Opera、Safari、360等主流瀏覽器）2015-04-04
jQuery :nth-child前有無空格的區(qū)別分析
:nth-child(index)子元素過濾選擇器的描述是：選取每個父元素下的弟index個子元素，index從1開始。2011-07-07
這篇文章主要介紹了jQuery必不可少的小技巧，這些小技巧就像是創(chuàng)建的快捷方式，可以幫助大家快速開發(fā)，感興趣的小伙伴們可以參考一下2015-11-11
本文主要介紹了Jquery Easyui驗證擴展，Easyui驗證，Easyui校驗，js正則表達式。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
jquery ui 實現(xiàn) tab標簽功能示例【測試可用】
這篇文章主要介紹了jquery ui 實現(xiàn) tab標簽功能,結合完整實例形式分析了jquery ui 實現(xiàn) tab標簽切換功能的相關操作技巧,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)簡單的分頁控件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
jQuery實現(xiàn)在新增加的元素上添加事件方法案例分析
這篇文章主要介紹了jQuery實現(xiàn)在新增加的元素上添加事件方法,結合具體實例形式分析了jQuery針對新增加的元素添加事件的實現(xiàn)技巧與注意事項,需要的朋友可以參考下2017-02-02
本篇文章小編為大家介紹，使用jQuery獲取瀏覽器中的分辨率的方法。需要的朋友參考下2013-04-04
jQuery基于ajax操作json數(shù)據(jù)簡單示例
這篇文章主要介紹了jQuery基于ajax操作json數(shù)據(jù)的方法,結合簡單實例形式分析了jQuery的ajax基本使用方法及json數(shù)據(jù)傳輸操作相關技巧,需要的朋友可以參考下2017-01-01
本文給大家簡單總結了下jQuery中鍵盤事件的使用方法以及相關示例，非常的實用，有需要的小伙伴可以參考下。2016-02-02