樹狀外掛 Jquery-zTree的基本用法

阿新 • • 發佈：2019-02-03

1 核心檔案
核心檔案：
核心包 ( jquery.ztree.core-3.x.js )
兩個擴充套件包：
複選框功能包 ( jquery.ztree.excheck-3.x.js )
編輯功能包 ( jquery.ztree.exedit-3.x.js )
合併包= 核心包 + 兩個擴充套件包（jquery.ztree.all-3.x.js）
使用 zTree v3.x 時，核心包必須載入，擴充套件包根據需要進行載入；這種結構有利於今後不斷開發 zTree 的各種輔助功能或工具，而不影響基本功能。

2 css檔案
zTree v3.x 只使用一個 zTreeStyle.css 檔案，為了儘量避免樣式衝突，將 zTree 容器的 className 設定為 'ztree'
v3.x 中對於主要 DOM ( li、ul、+/-圖示、a ) 的 className 增加了 level 輸出，可以針對不同等級的節點設定獨立的樣式

3 img 圖片
zTree v3.x 將主要圖示都合併為一個圖片，利用圖片切割方式顯示圖示

4 zTree 資料
參考API treeNode物件的定義；

5 編寫html頁面
1) "<!DOCTYPE html>" 是必需的！
2) zTree 的容器 className 別忘了設定為 "ztree"
3) 入門成功後，就可以按照順序去看 Demo 了，直接看看原始碼，應該能看懂的
示例如下：
<!DOCTYPE html>
<HTML>
<HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="demoStyle/demo.css" type="text/css">
  <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="jquery-1.4.2.js"></script>
  <script type="text/javascript" src="jquery.ztree.core-3.x.js"></script>
  <SCRIPT LANGUAGE="JavaScript">
   var zTreeObj;
   // zTree 的引數配置，深入使用請參考 API 文件（setting 配置詳解）
   var setting = {};
   // zTree 的資料屬性，深入使用請參考 API 文件（zTreeNode 節點資料詳解）
   var zNodes = [
   {name:"test1", open:true, children:[
      {name:"test1_1"}, {name:"test1_2"}]},
   {name:"test2", open:true, children:[
      {name:"test2_1"}, {name:"test2_2"}]}
   ];
   $(document).ready(function(){
      zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
   });
  </SCRIPT>
</HEAD>
<BODY>
<div>
   <ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>

6 zTree 對 jQuery 的版本有要求嗎?
基本來說沒有要求，zTree 在開發中使用 jQuery 1.4.4；目前簡單測試過 jQuery 1.3 ~ 1.6.1 應該都能正常使用，如果發現和 jQuery 的相容問題，還請及時 Email: [email protected] 通知我。

如果希望有更好的動畫效果，更高的執行效率，可以選擇 jQuery 1.6.x；如果希望能有減少 js 程式碼，使用基本功能，那麼可以選擇 mini 版較低版本的jQuery，大家就各取所需吧。

7 css 樣式異常怎麼辦?
產生樣式衝突的可能性很多，在這次 v3.0 的製作過程中，又更加深入了這方面的瞭解，大概總結如下：
1、異常原因：
頁面上自定義的 css 與 zTree 的 css 產生衝突
頁面上使用其他外掛的 css 與 zTree 的 css 產生衝突
修改 zTree 的 css 錯誤影響了 zTree
2、解決方案：
由於 css 衝突的可能性太多，與其說是解決方案，不如說是處理建議。
A、避免針對 id 進行樣式設定，儘量採用 class 設定。因為針對 id 設定的樣式等級太高，zTree 的樣式肯定會被覆蓋。
B、zTree 預設的樣式不可能將全部 css 定義都重新設定一遍，所以難免有遺漏，如果被遺漏的樣式影響了效果，那麼請在 zTreeStyle 內增加上對應的設定內容，而且一旦出現這種情況，也希望你能通知我，謝謝。
C、如果以上都不能解決，那麼再看看是否有命名規則衝突，導致了樣式衝突
D、最後再看看是否自己修改的 zTree 樣式出現了錯誤
E、以上答案均無效，那麼就請與我聯絡吧。

8 物件結構

將以下原始碼轉化為類圖如下：

// 1 原型$.fn.zTree
$.fn.zTree = {
    consts // 常量物件；
    _z // zTree v3.x 內部的全部方法都可以通過 $.fn.zTree._z物件進行呼叫
    getZTreeObj(treeId) // 根據treeId獲取zTreeObj
    destroy(treeId) // 根據treeId銷燬tree
    init: function(obj, zSetting, zNodes) { // 初始化方法，返回zTreeObj物件；
...
var zTreeTools = { // 參考API的zTreeObj物件說明，是指API的zTreeObj物件；
  setting : setting, // zTree 物件使用的 setting 配置資料，詳細請參考 “setting 配置詳解”中的各個屬性詳細說明
  addNodes : function(parentNode, newNodes, isSilent) { // 新增節點。
   ...
  },
  cancelSelectedNode : function(node) { // 取消節點的選中狀態。
   view.cancelPreSelectedNode(setting, node);
  },
  destroy : function() { // 1、用此方法可以銷燬 zTreeObj 代表的 zTree。
     // 2、銷燬當前頁面全部的 zTree，也可以使用 $.fn.zTree.destroy() 方法。
     // 3、重新使用已經被銷燬的樹，必須要使用 init 方法進行初始化。
   view.destroy(setting);
  },
  expandAll : function(expandFlag) { // 展開 / 摺疊全部節點
   expandFlag = !!expandFlag;
   view.expandCollapseSonNode(setting, null, expandFlag, true);
   return expandFlag;
  },
  expandNode : function(node, expandFlag, sonSign, focus, callbackFlag) { // 展開 / 摺疊指定的節點
   ...
  },
  getNodes : function() { // 獲取 zTree 的全部節點資料
   return data.getNodes(setting);
  },
  getNodeByParam : function(key, value, parentNode) { // 根據節點資料的屬性搜尋，獲取條件完全匹配的節點資料 JSON 物件集合
   if (!key) return null;
   return data.getNodeByParam(setting, parentNode?parentNode[setting.data.key.children]:data.getNodes(setting), key, value);
  },
  getNodeByTId : function(tId) { // 根據 zTree 的唯一標識 tId 快速獲取節點 JSON 資料物件
   return data.getNodeCache(setting, tId);
  },
  getNodesByParam : function(key, value, parentNode) { // 根據節點資料的屬性搜尋，獲取條件完全匹配的節點資料 JSON 物件集合
   if (!key) return null;
   return data.getNodesByParam(setting, parentNode?parentNode[setting.data.key.children]:data.getNodes(setting), key, value);
  },
  getNodesByParamFuzzy : function(key, value, parentNode) { // 根據節點資料的屬性搜尋，獲取條件模糊匹配的節點資料 JSON 物件集合
   if (!key) return null;
   return data.getNodesByParamFuzzy(setting, parentNode?parentNode[setting.data.key.children]:data.getNodes(setting), key, value);
  },
  getNodesByFilter: function(filter, isSingle, parentNode, invokeParam) { // 根據自定義規則搜尋節點資料 JSON 物件集合或單個節點資料
   isSingle = !!isSingle;
   if (!filter || (typeof filter != "function")) return (isSingle ? null : []);
   return data.getNodesByFilter(setting, parentNode?parentNode[setting.data.key.children]:data.getNodes(setting), filter, isSingle, invokeParam);
  },
  getNodeIndex : function(node) { // 獲取某節點在同級節點中的序號（從0開始）
   if (!node) return null;
   var childKey = setting.data.key.children,
   parentNode = (node.parentTId) ? node.getParentNode() : data.getRoot(setting);
   for (var i=0, l = parentNode[childKey].length; i < l; i++) {
    if (parentNode[childKey][i] == node) return i;
   }
   return -1;
  },
  getSelectedNodes : function() { // 獲取 zTree 當前被選中的節點資料集合
   var r = [], list = data.getRoot(setting).curSelectedList;
   for (var i=0, l=list.length; i<l; i++) {
    r.push(list[i]);
   }
   return r;
  },
  isSelectedNode : function(node) { // 是否選中的節點
   return data.isSelectedNode(setting, node);
  },
  reAsyncChildNodes : function(parentNode, reloadType, isSilent) { // 強行非同步載入父節點的子節點。[setting.async.enable = true 時有效]已經載入過的父節點可反覆使用此方法重新載入。請通過 zTree 物件執行此方法。
   ...
  },
  refresh : function() { // 重新整理 zTree
   ...
  },
  removeChildNodes : function(node) { // 清空某父節點的子節點。
   ...
  },
  removeNode : function(node, callbackFlag) { // 刪除節點。
   ...
  },
  selectNode : function(node, addFlag) { // 選中指定節點
   ...
  },
  transformTozTreeNodes : function(simpleNodes) { // 將簡單 Array 格式資料轉換為 zTree 使用的標準 JSON 巢狀資料格式。
   return data.transformTozTreeFormat(setting, simpleNodes);
  },
  transformToArray : function(nodes) { // 將 zTree 使用的標準 JSON 巢狀格式的資料轉換為簡單 Array 格式。(免去使用者自行編寫遞迴遍歷全部節點的麻煩)
   return data.transformToArrayFormat(setting, nodes);
  },
  updateNode : function(node, checkTypeFlag) { // 更新某節點資料，主要用於該節點顯示屬性的更新。
   ...
  }
}
root.treeTools = zTreeTools;
data.setZTreeTools(setting, zTreeTools);

if (root[childKey] && root[childKey].length > 0) {
view.createNodes(setting, 0, root[childKey]);
} else if (setting.async.enable && setting.async.url && setting.async.url !== '') {
view.asyncNode(setting);
}
return zTreeTools;
}
};

// 2 配置物件setting
_setting = { // 預設的setting
treeId: "", // zTree 的唯一標識，初始化後，等於使用者定義的 zTree 容器的 id 屬性值。
treeObj: null, // zTree 容器的 jQuery 物件，主要功能：便於操作。
view: { // 顯示設定
addDiyDom: null,
autoCancelSelected: true,
dblClickExpand: true,
expandSpeed: "fast",
fontCss: {},
nameIsHTML: false,
selectedMulti: true,
showIcon: true,
showLine: true,
showTitle: true,
txtSelectedEnable: false
},
data: { // 配置設定
key: {
  children: "children",
  name: "name",
  title: "",
  url: "url"
},
simpleData: {
  enable: false,
  idKey: "id",
  pIdKey: "pId",
  rootPId: null
},
keep: {
  parent: false,
  leaf: false
}
},
async: { // 非同步載入配置
enable: false,
contentType: "application/x-www-form-urlencoded",
type: "post",
dataType: "text",
url: "",
autoParam: [],
otherParam: [],
dataFilter: null
},
callback: { // 回撥配置
beforeAsync:null,
beforeClick:null,
beforeDblClick:null,
beforeRightClick:null,
beforeMouseDown:null,
beforeMouseUp:null,
beforeExpand:null,
beforeCollapse:null,
beforeRemove:null,
onAsyncError:null,
onAsyncSuccess:null,
onNodeCreated:null,
onClick:null,
onDblClick:null,
onRightClick:null,
onMouseDown:null,
onMouseUp:null,
onExpand:null,
onCollapse:null,
onRemove:null
}
}

樹狀外掛 Jquery-zTree的基本用法

樹狀外掛 Jquery-zTree的基本用法

樹狀數組的基本用法

樹狀數組的基本用法（板子）

JQuery的基本用法

jQuery 表單驗證外掛jQuery Validation Engine用法詳解

jQuery一些基本用法

JQuery的基本用法總結

樹狀陣列3種基本操作

Jquery-zTree的基本用法

jquery zTree的基本用法

jquery——zTree, 完美好用的樹外掛

jQuery-zTree樹外掛簡單使用及例項

樹狀結構---用jquery的小外掛jquery.treeview實現樹狀結構

jQuery：ztree樹結構外掛具體應用(根據資料渲染樹形結構)

zTree外掛在struts2中構建樹狀分支結構

樹狀數組基本模版(區間更新，單點查詢)

jquery-easy dialog對話方塊基本用法

jquery-easyUi datagrid 基本用法

jQuery -- 光陰似箭（一）：初見 jQuery -- 基本用法，語法，選擇器

Unity3D DoTween外掛的基本用法

樹狀外掛 Jquery-zTree的基本用法

相關推薦