ztree是JQuery的一個開源樹形目錄的插件，用來快速構建網站的樹形目錄結構，并且提供了功能豐富，利于擴展的API。

JQuery ztree官網

只要引入jquery和ztree的庫js，然后給ztree提供需要的json數據，并且設置好ztress的屬性，就可以即刻展示出樹形目錄。

總結下來，要使用ztree的話，必須要完成以下幾步：

1. 引入庫文件

jquery.js

ztree.js

ztree.css

2. 獲取數據

你要思考數據來源問題了。

如果要自己從數據庫查詢樹形結構這時候你需要知道oracle的遞歸查詢connect by：oracle中使用start with...connect by prior遞歸查詢樹形結構。遞歸查詢簡單來講就是一個表中要具備2個基本字段：id和pid(子節點和父節點id)，使用關鍵字connect by prior來連接id和pid，start with定義數據行查詢的初始點，由此獲取一棵或者多棵樹的樹形結構。(這里順便回憶一下sql里的分組查詢group by，跟connect by區分開來。)

拿實際項目舉例，項目中要獲取如下的目錄樹：

執行以下SQL：

select level, t.dir_id, t.dir_name, t.parent_id

from T_RES_OWNER t

where t.IS_FOLDER = '0'

start with 1 = 1

and t.parent_id = '0'

and t.owner_type = '0'

and t.USER_ID = '136ac7a7ad624692a5b94d93e0634952'

connect by prior t.dir_id = t.parent_id

order by level asc, t.dir_name asc;

執行結果：

3. 封裝json輸入

下面一段引用ztree官網demo的描述：

那么，從接口獲取到存放數據的List之后，按照如上組織json給ztree使用即可，參考以下代碼：

JSONArray tree = new JSONArray();

List list = resOwnerService.selectFolderTree(owner);

JSONObject obj = null;

for(ResOwner resOwner : list){

obj = new JSONObject();

obj.put("id", resOwner.getDirId());

obj.put("pId", resOwner.getParentId());

obj.put("name", resOwner.getDirName().length() > 24?resOwner.getDirName().substring(0,24)+"...":resOwner.getDirName());

obj.put("icon", SysConf.getString("webapp.jspconfigUrl") + "common/css/zTreeStyle2/img/leaf_ico.png");

tree.add(obj);

}

result.put("success", new Boolean(true));

result.put("data", tree);

return result;

4. 設置ztree屬性

var zNodes = data.data;

var setting = {

view : {

showLine: false,

showIcon : true

},

data : {

simpleData : {

enable : true

}

},

edit: {

enable: true,

showRemoveBtn: true,

showRenameBtn: true,

removeTitle: "刪除",

renameTitle: "重命名"

},

callback: {

onClick: zTreeOnClick,

beforeRemove: zTreeBeforeRemove,

onRename: zTreeOnRename

}

};

//初始化網盤結構樹

$.fn.zTree.init($("#treeDemo_mydoc"), setting, zNodes);

可以在setting.callback里面可以設置各種回調函數，用以實現更加復雜的功能，詳見ztree api文檔經過以上步驟，用ztree實現一個具有基本功能的目錄樹就完成了。

總結：

實現一個基本功能的目錄樹其實很簡單，說白了就是要提供ztree需要的json數據，然后設置一些屬性，其他工作就交給ztree插件來完成了，其難點在于用oracle的connect by獲取數據源，另外，頁面交互也比較考驗JavaScript功底，畢竟很多地方是需要異步加載來提高用戶體驗。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的oracle 生成目录树,jQuery zTree插件快速实现目录树的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。