ztree模糊篩選展開選中節點

時間 2019-12-06

標籤 ztree 模糊篩選展開選中節點简体版

原文原文鏈接

樹呢是一個最簡單的樹，並無作一異步加載，也就是一個篩選，而後跳到第一個符合刪選的數據下，而且全部符合的都會被展開和選中。其中ztreeAry是一個模擬的本地數組json。在test.json中，若是須要你能夠本身建立一個。javascript

<html>css

<head>
<meta charset="utf-8">
<title>ztree 篩選</title>
<link rel="stylesheet" href="zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="test.json"></script>
<script type="text/javascript">
$(function() {
var setting = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "parentId",
rootPId: -1
},
key: {
url:"nourl",
name:"name"
}
}
};
var zTreeObj=$.fn.zTree.init($("#treeDemo"), setting,ztreeAry);
// zTreeObj.expandAll(true);
});html

//搜索框
$(function() {
$('#sch').keydown(function(e) {
if(e.keyCode==13){
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var value = $('#sch').val();
var nodeList = treeObj.getNodesByParamFuzzy('name', value);
treeObj.cancelSelectedNode();
var nodes = treeObj.getNodes();
for(var j=0;j<nodes[0].children.length;j++){
treeObj.expandNode(nodes[0].children[j], false, true, false);
}
if(value){
if (nodeList.length>0) {
for(var i=0;i<nodeList.length;i++){
treeObj.expandNode(nodeList[i], true, false, false);
treeObj.selectNode(nodeList[i],true);
}
}
}
}
});
});
</script>
</head>
<body>
搜索:<input type="text" id="sch" placeholder="回車定位">
<br> 樹狀：
<div style="height:300px;width:200px;">
<ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。