溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。
上篇文章給大家介紹了vue中如何使用ztree，大家可以點擊查看。
之前博客介紹過怎么在vue里展示以及獲取點擊元素的內容，此文章之介紹搜索功能
html
<el-form-item label="機構" class="ztree-par">
<i class="icon_org"></i>
<input type="text" placeholder="請輸入機構" id="ser" v-model="ruleForm.mechanism" @keyup.enter="search_ztree('treeDemo', 'ser')" @click.stop = "control()" class="login-input">
<el-button icon="el-icon-arrow-down" @click.stop="control()"></el-button>
<div class="ztree-z" v-show="ztreeCon">
<ul id="treeDemo" class="ztree"></ul>
</div>
</el-form-item>
main.js需要單獨引入
import "./../static/ztree/js/jquery.ztree.exhide-3.5.min.js";
如果不單獨引入這個會獲取不到很多元素，在input回車事件或者點擊事件的時候直接執行此事件即可
代碼部分
expand_ztree(treeId) {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
treeObj.expandAll(true);
},
close_ztree(treeId) {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var nodes = treeObj.transformToArray(treeObj.getNodes());
var nodeLength = nodes.length;
for (var i = 0; i < nodeLength; i++) {
if (nodes[i].id == '0') {
//根節點：展開
treeObj.expandNode(nodes[i], true, true, false);
} else {
//非根節點：收起
treeObj.expandNode(nodes[i], false, true, false);
}
}
},
search_ztree(treeId, searchConditionId) {
this.searchByFlag_ztree(treeId, searchConditionId, "");
},
searchByFlag_ztree(treeId, searchConditionId, flag) {
//<1>.搜索條件
var searchCondition = $('#' + searchConditionId).val();
//<2>.得到模糊匹配搜索條件的節點數組集合
var highlightNodes = new Array();
if (searchCondition != "") {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null);
}
//<3>.高亮顯示并展示【指定節點s】
this.highlightAndExpand_ztree(treeId, highlightNodes, searchCondition, flag);
},
highlightAndExpand_ztree(treeId, highlightNodes, tx, flag) {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
//<1>. 先把全部節點更新為普通樣式
var treeNodes = treeObj.transformToArray(treeObj.getNodes());
for (var i = 0; i < treeNodes.length; i++) {
treeNodes[i].highlight = false;
treeObj.updateNode(treeNodes[i]);
}
//<2>.收起樹, 只展開根節點下的一級節點
this.close_ztree(treeId);
//<3>.把指定節點的樣式更新為高亮顯示，并展開
if (highlightNodes != null) {
for (var i = 0; i < highlightNodes.length; i++) {
if (flag != null && flag != "") {
if (highlightNodes[i].flag == flag) {
//高亮顯示節點，并展開
highlightNodes[i].highlight = true;
treeObj.updateNode(highlightNodes[i]);
//高亮顯示節點的父節點的父節點....直到根節點，并展示
var parentNode = highlightNodes[i].getParentNode();
var parentNodes = this.getParentNodes_ztree(treeId, parentNode);
treeObj.expandNode(parentNodes, true, false, true);
treeObj.expandNode(parentNode, true, false, true);
}
} else {
treeObj.updateNode(highlightNodes[i]);
var parentNode = highlightNodes[i].getParentNode();
var parentNodes = this.getParentNodes_ztree(treeId, parentNode);
treeObj.expandNode(parentNodes, true, false, true);
treeObj.expandNode(parentNode, true, false, true);
}
}
}
},
getParentNodes_ztree(treeId, node) {
if (node != null) {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var parentNode = node.getParentNode();
return this.getParentNodes_ztree(treeId, parentNode);
} else {
return node;
}
}
展示
這個有個小小的bug，就是做鍵盤按下或者抬起的時候會有問題，https://yq.aliyun.com/articles/308489，這個文章就解決了這個問題
總結
以上所述是小編給大家介紹的ztree在vue項目中使用并且帶有搜索功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
