官方demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FilterTree 樹過濾</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />
<script src="../../scripts/boot.js" type="text/javascript"></script>
</head>
<body>
<h1>FilterTree 樹過濾</h1>
<div>
<label >名稱：</label>
<input id="key" class="mini-textbox" style="width:150px;" onenter="onKeyEnter"/>
<a class="mini-button" style="width:60px;" onclick="search()">查詢</a>
</div>
<ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:250px;padding:5px;height:250px;"
showTreeIcon="true" textField="text" idField="id"
expandOnLoad="true"
>
</ul>
<script type="text/javascript">
mini.parse();
var tree = mini.get("tree1");
function search() {
var key = mini.get("key").getValue();
if (key == "") {
tree.clearFilter();
} else {
key = key.toLowerCase();
tree.filter(function (node) {
var text = node.text ? node.text.toLowerCase() : "";
if (text.indexOf(key) != -1) {
return true;
}
});
}
}
function onKeyEnter(e) {
search();
}
</script>
<div class="description">
<h3>Description</h3>
<p>
</p>
</div>
</body>
</html>如果搜索爲樹的葉子，則沒有問題，
如果搜索爲樹的枝幹，則會出現葉子節點不顯示
改進原demo的 search方法
function search(key) {
if (key == "") {
tree.clearFilter();
} else {
key = key.toLowerCase();
tree.filter(function (node) {
var text = node.name ? node.name.toLowerCase() : "";
if (text.indexOf(key) != -1) {
return true;
} else {
var flag = false;
tree.bubbleParent(node,function(pn){
if(pn.name.indexOf(key) != -1) {
flag = true;
}
});
return flag;
}
});
}
tree.expandAll();
}
function onKeyUp() {
search(document.getElementById("key$text").value);
} 按鍵按下即可搜索，node.name 根據自己的項目屬性，進行更改
效果
