jQuery樹形插件jquery.simpleTree.js用法分析
本文實例講述了jQuery樹形插件jquery.simpleTree.js用法。分享給大家供大家參考，具體如下：
最近寫項目的cms系統(tǒng)，客戶要求后臺管理可以通過一棵樹來展現(xiàn)整個幫助文檔的結(jié)構(gòu)，并通過拖拽操作來實現(xiàn)文章和欄目的位置排列變化，我在網(wǎng)上找來半天，決定使用jQuery.simpleTree.js來實現(xiàn)。
這個樹控件支持拖動節(jié)點到新的位置，通過其提供aftermove函數(shù)的覆寫，我們可以在其拖動完成后在aftermove函數(shù)中調(diào)用ajax來后臺更改數(shù)據(jù)庫來保存拖動的結(jié)果
同時這個樹的節(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>
生成的樹如下：
當(dāng)然這是靜態(tài)的代碼實現(xiàn)的，在jquery.simpleTree中生成這些html元素的是loadTree.php文件，我們完全可以從數(shù)據(jù)庫中取出數(shù)據(jù)以這些html元素的形式打印出來么。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
網(wǎng)頁應(yīng)用程序需要對豐富的內(nèi)容提供簡單易用的上傳和操作方式，但是這樣會給只有少數(shù)圖片處理技能的用戶造成很大的困難。圖片剪切是最基本的圖片處理技術(shù)，這個詳細(xì)的教程將包括在jQuery庫上創(chuàng)建此參加的每一個步驟。2011-08-08
這篇文章主要為大家介紹了jQuery編程動畫基本實現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
Jquery左右滑動插件之實現(xiàn)超級炫酷動畫效果附源碼下載
這是一款基于jquery.pogo-slider插件實現(xiàn)的多個滑塊切換特效。本篇文章給大家介紹Jquery左右滑動插件之實現(xiàn)超級炫酷動畫效果，對jquery左右滑動插件相關(guān)知識感興趣的朋友參考下2015-12-12
jQuery插件FusionCharts實現(xiàn)的MSBar2D圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts實現(xiàn)的MSBar2D圖效果,結(jié)合實例形式分析了jQuery使用FusionCharts插件結(jié)合xml數(shù)據(jù)載入實現(xiàn)繪制MSBar2D圖的相關(guān)實現(xiàn)技巧,并附帶demo源碼供讀者下載,需要的朋友可以參考下2017-03-03
JQuery實現(xiàn)文字無縫滾動效果示例代碼(Marquee插件)
本篇文章主要介紹了JQuery實現(xiàn)文字無縫滾動效果示例代碼(Marquee插件)，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
本篇文章主要是對jquery中常用的函數(shù)和屬性進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
這篇文章主要為大家詳細(xì)介紹了jQuery為某個div加入行樣式的相關(guān)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
本文主要是給大家分享了一則使用EasyUI實現(xiàn)同步樹的代碼，主要是使用遞歸實現(xiàn)，非常實用的方法，推薦給小伙伴們。2015-03-03
JQuery對表格進(jìn)行操作的常用技巧總結(jié)
這篇文章主要介紹了JQuery對表格進(jìn)行操作的常用技巧,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了jQuery條件分頁代替離線查詢，通過代碼實例讓讀者更深入了解該功能的操作，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08