1. 程式人生 > >JQuery開源樹形目錄的外掛--zTress

JQuery開源樹形目錄的外掛--zTress

概念:
zTree
是一個依靠 jQuery 實現的多功能 “樹外掛”。優異的效能、靈活的配置、多種功能的組合是 zTree 最大優點。

zTree是開源免費的軟體。

特點:

相容IEFireFoxChrome 等瀏覽器、

在一個頁面內可同時生成多個Tree 例項、

支援JSON 資料、支援一次性靜態生成 和Ajax 非同步載入 兩種方式、

支援多種事件響應及反饋、

支援Tree 的節點移動、編輯、刪除、

支援任意更換面板/ 個性化圖示(依靠css)、

支援極其靈活的checkbox radio 選擇功能、簡單的引數配置實現 靈活多變的功能。

使用過程:

步驟 1、檔案準備

將需要使用的 zTree v3.x 相關的 jscssimg 檔案分別放置到相應目錄,並且保證相對路徑正確

步驟 2、編寫 html 頁面

按照以下程式碼,製作 html 頁面
    
1) "" 是必需的!
    
2) zTree 的容器 className 別忘了設定為 "ztree"
    3)
入門成功後,就可以按照順序去看 Demo 了,直接看看原始碼,應該能看懂的

步驟 3、 獲取資料

如果要自己從資料庫查詢樹形結構這時候你需要知道

的遞迴查詢connect by

oracle中使用start with...connect by prior

遞迴查詢樹形結構。

遞迴查詢簡單來講就是一個表中要具備2個基本欄位:

idpid(子節點和父節點id),

使用關鍵字connect by prior來連線idpidstart with定義數

據行查詢的初始點,由此獲取一棵或者多棵樹的樹形結構。

Json介紹:http://www.json.org/json-zh.html

總結:

使用zTress只需提供ztree需要的json資料,然後設定一些屬性,其他工作就交給ztree外掛來完成了

其難點在於用oracleconnect by獲取資料來源,另外,頁面互動也比較考驗功底,畢竟很多地方是需要非同步載入來提高使用者體驗。