ztree使用方法

① 使用ztree 怎樣向後台傳送數據

傳數據的方式有很多種，我先提兩個方式，你看看哪種是你的應用情況。
第一種：使用了ztree的復選框節點，把選中的節點信息傳遞到後台。
第二種：點擊節點，觸發事件，需要傳遞此節點的信息。

② jquery ztree如何讓沒有子節點的父節點樣式顯示為文件夾

1、新建一個html文件，命名為test.html。

③ ztree 非同步載入時，如何展開某一個節點.有什麼好的方法

呵呵，是不是敲字錯誤鬧得？ 的確看起來很費解。
大概理解，非同步載入每次只載入一級節點，覺得不爽，想全部載入並且展開對嗎？
那麼我的回答如下：
1、使用了非同步載入 又要全部展開這個需求比較矛盾，還不如一次性全部載入後（使用非同步載入時也完全可以後台一次性生成全部子孫節點一起載入的），直接全部展開。因為非同步載入本來就是為了優化性能，這樣的需求非同步載入沒有什麼優勢。
2、如果一定要使用，可以利用 onAsyncSuccess 回調在每次非同步載入完畢後，利用expandNode 方法將新載入的父節點逐一展開。。這樣下去就實現了（在我即將發布的 v3.2 中將會提供這種操作的Demo）

④ zTree getCheckedNodes 怎麼使用這個方法獲取到父節點

getCheckedNodes 獲取了所有被選擇的節點，那就從這些節點中找父節點：
1、父節點一般都有子節點
2、子節點的上級就是父節點

⑤ ztree樹插件的使用

這幾個做項目遇到一個上千節點的樹結構，在考慮性能的前提下，直接用element的樹組件會使系統頁面卡頓現象，之後查詢解決辦法，偶遇ztree，這是一個樹插件，在一次載入大量數據時有較好的性能表現，原理是，對於不展開的節點不進行渲染。官方解釋如下：

monitor-video文件

⑥ ztree在使用的時候，展開所有的子節點的時候，會撐大整個父盒子怎麼解決

獲取 id 為 tree 的 zTree 對象
var treeObj = $.fn.zTree.getZTreeObj("tree");
獲取全部節點數據
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getNodes();
for(var i=0;i<nodes.length;i++){
alert(nodes[i].id); //獲取每個節點的id
}
獲取當前被勾選的節點集合
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getCheckedNodes(true);
for(var i=0;i<nodes.length;i++){
alert(nodes[i].id); //獲取每個節點的id
}
獲取當前被選中的節點數據集合
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getSelectedNodes();
for(var i=0;i<nodes.length;i++){
alert(nodes[i].id); //獲取每個節點的id
}

⑦ ztree樹菜單怎麼不按照id順序排列樹

初始化ztree樹的方法：
zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);

其中zTreeNodes就是樹的數據，zTreeNodes是一個對象數組，你可以給該對象數組排序，可以不按id順序顯示的。

⑧ ztree如何實現真正的單選

在ztree中使用單選->復選層次結構
起因
要使用zTree實現該功能：選中狀態在各個條件（Linux_ipfwd,Linux_ipsec,usdpaa_hello-reflector,usdpaa_rc_ipfwd）之間互斥，當狀態切換時自動取消上個屬性下的所有子選項。
解決
因為zTree中單選，復選狀態都是使用圖片表示的，然後提供介面根據half，checked等屬性來返回節點的狀態。雖然這樣可以靈活的的對節點進行操作，但去失去了最簡單的提交方式（submit form）。
所以我們首先將zTree的圖片按鈕還原成html按鈕，這個在zTree中已經提供了demo，我們只要根據demo中的方式來添加自定義控制項，代碼如下：var _handles = {
0:function (treeNode) {
return "";
},
1:function (treeNode) {
return "";
},
2:function (treeNode) {
return "";
}
};
var IDMark_A = "_a";
function addDiyDom(treeId, treeNode) {
var aObj = $("#" + treeNode.tId + IDMark_A);
aObj.before(_handles[treeNode.level](treeNode));
var btn = $("#fsl_" + treeNode.tId);
if (btn) {
if (treeNode.level == 1) {
btn.bind("click", function () {
click_v1(treeNode);
});
} else if (treeNode.level == 2) {
btn.bind("change", function () {
change_v2(treeNode, btn);
});
}
}
}
這里比較重要的是click_v1，change_v2這兩個綁定函數，click_v1綁定到單選按鈕的click事件，change_v2綁定到復選框的change事件。代碼及相關注釋如下：//改變節點狀態（選中／取消選中）
function changeNode(node, status) {
var btn = $("#fsl_" + node.tId);
if (btn.attr("checked") != status) {
$("#fsl_" + node.tId).attr("checked", Boolean(status));
}
}
//判斷節點是否選中
function isSelectNode(node) {
return $("#fsl_" + node.tId).attr("checked");
}
//判斷節點的子節點是否全部選中
function isSelectAllChildNoes(node) {
var isSelectAll = true;
var childNodes = node.children;
if (childNodes) {
for (var i = 0; i < childNodes.length; i++) {
if (!isSelectNode(childNodes[i])) {
isSelectAll = false;
break;
}
}
}
return isSelectAll;
}
//改變節點的所有子節點狀態（選中／取消選中）
function changeAllChildNoes(node, status) {
var childNodes = node.children;
if (childNodes) {
for (var i = 0; i < childNodes.length; i++) {
changeNode(childNodes[i], status);
changeAllChildNoes(childNodes[i], status);
}
}
}
//改變節點的所有父節點狀態（選中／取消選中）
function changeAllParentNoes(node, status) {
var parentNode = node.getParentNode();
if (parentNode) {
if (status) {
if (isSelectAllChildNoes(parentNode)) {
changeNode(parentNode, status);
}
} else {
changeNode(parentNode, status);
}
changeAllParentNoes(parentNode, status);
}
}
//選中的單選框tId
var global_mark = {};
//復選框改變狀態所觸發的事件
function change_v2(treeNode, btn) {
if (btn.attr("checked")) {
var parentNode = treeNode.getParentNode();
if (!isSelectNode(parentNode)) {
changeNode(parentNode, true);
click_v1(parentNode);
}
}
}
//單選框改變狀態所觸發的事件
function click_v1(treeNode) {
if (treeNode.tId != global_mark[treeNode.type]) {
var lastNode = treeObj.getNodeByTId(global_mark[treeNode.type]);
if (lastNode) {
changeAllChildNoes(lastNode, false);
}
global_mark[treeNode.type] = treeNode.tId;
}
}
這樣就實現了先前所提到的功能。
文章作者：iitshare
本文地址：http://www.iitshare.com/ztree-radio-checkbox.html
版權所有 © 轉載時必須以鏈接形式註明作者和原始出處！
結語：
，change_v2綁定到復選框的change事件。代碼及相關注釋如下：//改變節點狀態（選中／取消選中）

⑨ 在vue中使用ztree樹形組件，如何將ztree圖片,改成字體圖標呢求解答求思路

使用npm install jquery –save 在項目中安裝ztree依賴文件 jquery;
在index.html裡面引用ztree樣式文件zTreeStyle.css（前面的圖標可以自定義可以參考官網）

3.在項目中引入ztree文件，在main.js中引入

網上給的資料是在這里同時引入jquery；但是項目中引入 報錯

import from『jquery′−在你的zTree.vue單文件中引入importfrom『jquery′−在你的zTree.vue單文件中引入import from 『jquery』
4.在template中創建盒子,一定要給盒子相應的高度

<div class="tree-box" >
<ul id="treeDemo" class="ztree" ></ul>
</div>

5.在 .vue文件中data配置setting 樹，以及定義存放數據的zNodes

6.使用axios 後台請求數據,下圖使用請求方式是封裝好的

ok完成（希望對你有幫助）

⑩ zTree獲取當前節點的下一級子節點數實例

使用zTree插件實現樹形圖中，需要獲取當前點擊的父節點的子節點數的需求，使用treeNode.children獲取子節點數據集合,使用length方法獲取集合長度。
將當前節點的treeNode傳入即可調用。
/*查找當前節點下一級的子節點數*/
function
findNodes(treeNode)
{
var
count;
/*判斷是不是父節點,是的話找出子節點個數，加一是為了給新增節點*/
if(treeNode.isParent)
{
count
=
treeNode.children.length
+
1
;
}
else
{
/*如果不是父節點,說明沒有子節點,設置為1*/
count
=
1;
}
return
count;
}
以上這篇zTree獲取當前節點的下一級子節點數實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。