JQuery開源樹形目錄的外掛--zTress
概念:
zTree是一個依靠 jQuery 實現的多功能
“樹外掛”。優異的效能、靈活的配置、多種功能的組合是 zTree 最大優點。
zTree是開源免費的軟體。
特點:
相容IE、FireFox、Chrome 等瀏覽器、
在一個頁面內可同時生成多個Tree 例項、
支援JSON 資料、支援一次性靜態生成 和Ajax 非同步載入 兩種方式、
支援多種事件響應及反饋、
支援Tree 的節點移動、編輯、刪除、
支援任意更換面板/ 個性化圖示(依靠css)、
支援極其靈活的checkbox 或radio 選擇功能、簡單的引數配置實現 靈活多變的功能。
使用過程:
步驟 1、檔案準備
將需要使用的 zTree v3.x 相關的 js、css、img 檔案分別放置到相應目錄,並且保證相對路徑正確
步驟 2、編寫 html 頁面
按照以下程式碼,製作
html
頁面
1)
""
是必需的!
2)
zTree
的容器
className
別忘了設定為
"ztree"
3)
入門成功後,就可以按照順序去看
Demo
了,直接看看原始碼,應該能看懂的
步驟 3、 獲取資料
如果要自己從資料庫查詢樹形結構這時候你需要知道
的遞迴查詢connect by:
oracle中使用start with...connect by prior
遞迴查詢簡單來講就是一個表中要具備2個基本欄位:
id和pid(子節點和父節點id),
使用關鍵字connect by prior來連線id和pid,start with定義數
據行查詢的初始點,由此獲取一棵或者多棵樹的樹形結構。
Json介紹:http://www.json.org/json-zh.html
總結:
使用zTress只需提供ztree需要的json資料,然後設定一些屬性,其他工作就交給ztree外掛來完成了
其難點在於用oracle的connect by獲取資料來源,另外,頁面互動也比較考驗功底,畢竟很多地方是需要非同步載入來提高使用者體驗。