jQuery zTree插件快速實(shí)現(xiàn)目錄樹

更新時(shí)間：2019年08月16日 11:55:16 作者：Jeffwithgit

這篇文章主要為大家詳細(xì)介紹了jQuery zTree插件快速實(shí)現(xiàn)目錄樹，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

ztree是JQuery的一個(gè)開源樹形目錄的插件，用來快速構(gòu)建網(wǎng)站的樹形目錄結(jié)構(gòu)，并且提供了功能豐富，利于擴(kuò)展的API。

JQuery ztree官網(wǎng)

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

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

1. 引入庫文件

jquery.js

ztree.js

ztree.css

2. 獲取數(shù)據(jù)

你要思考數(shù)據(jù)來源問題了。

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

拿實(shí)際項(xiàng)目舉例，項(xiàng)目中要獲取如下的目錄樹：

執(zhí)行以下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;

執(zhí)行結(jié)果：

3. 封裝json輸入

下面一段引用ztree官網(wǎng)demo的描述：

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

JSONArray tree = new JSONArray();
  List<ResOwner> 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. 設(shè)置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
   }
  };
  //初始化網(wǎng)盤結(jié)構(gòu)樹
  $.fn.zTree.init($("#treeDemo_mydoc"), setting, zNodes);

<div class="zTreeDemoBackground2 left" style="width:168px;">
     <ul id="treeDemo_mydoc" class="ztree2" style="width:168px;height: 168px"></ul>
 </div>

可以在setting.callback里面可以設(shè)置各種回調(diào)函數(shù)，用以實(shí)現(xiàn)更加復(fù)雜的功能，詳見ztree api文檔經(jīng)過以上步驟，用ztree實(shí)現(xiàn)一個(gè)具有基本功能的目錄樹就完成了。

總結(jié)：

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。