溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關zTree樹插件怎么在jQuery項目中使用，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
一、介紹
zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。
官網地址
特點：
zTree v3.0 將核心代碼按照功能進行了分割，不需要的代碼可以不用加載
采用了 延遲加載 技術，上萬節點輕松加載，即使在 IE6 下也能基本做到秒殺
兼容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器
支持 JSON 數據
支持靜態 和 Ajax 異步加載節點數據
支持任意更換皮膚 / 自定義圖標（依靠css）
支持極其靈活的 checkbox 或 radio 選擇功能
提供多種事件響應回調
靈活的編輯（增/刪/改/查）功能，可隨意拖拽節點，還可以多節點拖拽喲
在一個頁面內可同時生成多個 Tree 實例
簡單的參數配置實現 靈活多變的功能
二、使用
（1）引入ztree組件
注意：需要添加jquery依賴
<link href="static/jquery-ztree/3.5.36/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="static/jquery/3.3.1/jquery-3.3.1.min.js"></script> <script src="static/jquery-ztree/3.5.36/js/jquery.ztree.all.min.js" type="text/javascript"></script>
（2）向body中添加div
<div> <div id="treeDemo" class="ztree"> </div> </div>
（3）添加ztree設置
<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);
zTreeObj.expandAll(true);//展開樹
</SCRIPT>（4）頁面效果
（5）項目截圖及html代碼
html頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ztree測試頁面</title>
<link href="static/jquery-ztree/3.5.36/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="static/jquery/3.3.1/jquery-3.3.1.min.js"></script>
<script src="static/jquery-ztree/3.5.36/js/jquery.ztree.all.min.js" type="text/javascript"></script>
</head>
<body>
<div>
<div id="treeDemo" class="ztree">
</div>
</div>
<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>
</body>
</html>三、一些方法
（1）設置展開樹
$(document).ready(function() {
zTreeObj = $.fn.zTree.init($("#ztree"), setting, zNodes);
//展開所以節點
//zTreeObj.expandAll(true);
//展開第一級數節點
var nodes = zTreeObj.getNodesByParam("level", 0);
for(var i = 0; i < nodes.length; i++) {
zTreeObj.expandNode(nodes[i], true, false, false);
}
});四、setting 配置詳解
一些比較常用的配置
（一）check
1、enable: true
設置 zTree 的節點上是否顯示 checkbox / radio
默認值: false
（二）view
selectedMulti: false 設置是否允許同時選中多個節點。默認是true
（三）data
simpleData: { enable: true, idKey: 'id', pIdKey: 'pid', rootPId: '0' }
var zNodes = [{ "id": 1, "pid": 0, "name": "test1" },
{ "id": 11, "pid": 1, "name": "test11" },
{ "id": 12, "pid": 1, "name": "test12" },
{ "id": 111, "pid": 11, "name": "test111" }
];效果：
關于zTree樹插件怎么在jQuery項目中使用就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
