zTree插件,带复选框,模糊查询,隐藏不符合的节点
<html>
<head>
<title>zTree模糊搜索Demo</title>
<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" type="text/css" />
<script type="text/javascript" src="ztree/js/jquery-1.4.4.min.js"></script>
<script src="ztree/js/jquery.ztree.all.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="ztree/js/jquery.ztree.exhide-3.5.min.js"></script>
<script type="text/javascript" src="js/myScript.js"></script>
</head>
<body onload="">
<div class="container">
<div class="search-bar">
<input id="keyword" type="text" placeholder="请输入...">
<button id="search-bt">搜索</button>
</div>
<div class="content">
<ul id="tree-obj" class="ztree"></ul>
</div>
</div>
</body>
</html>
var nodeList;
$(function() {
init();
})
function init() {
var zNodes = [ //ztree 测试数据,也可以从数据库拉取
{
name: "根节点-000",
open: true,
children: [{
name: "父节点-123-AB",
open: true,
children: [{
name: "叶子节点-A-1"
},
{
name: "叶子节点-A-2"
},
{
name: "叶子节点-B-1"
},
{
name: "叶子节点-B-2"
}
]
}, {
name: "父节点-2123-CD",
open: true,
children: [{
name: "叶子节点-C-1"
},
{
name: "叶子节点-C-2"
},
{
name: "叶子节点-D-1"
},
{
name: "叶子节点-D-2"
}
]
}, {
name: "父节点-123-AB",
open: true,
children: [{
name: "叶子节点-A-1"
},
{
name: "叶子节点-A-2"
},
{
name: "叶子节点-B-1"
},
{
name: "叶子节点-B-2"
}
]
}, {
name: "父节点-2123-CD",
open: true,
children: [{
name: "叶子节点-C-1"
},
{
name: "叶子节点-C-2"
},
{
name: "叶子节点-D-1"
},
{
name: "叶子节点-D-2"
}
]
}]
}
];
var setting = { //ztree配置选项
check: {
enable: true
},
view: {
dblClickExpand: false, //表示双击节点 切换 / 不切换 展开状态
showLine: true,
// selectedMulti: false,// 支持 / 不支持 同时选中多个节点
nameIsHTML: true, //支持 / 不支持 HTML 脚本
showIcon: false //没有小图标
},
data: {
key: {
name: "name",
title: "name"
}
}
};
zTreeObj = $.fn.zTree.init($("#tree-obj"), setting, zNodes);
$("#search-bt").click(filter);
};
//过滤ztree显示数据
function filter() {
var allNode = zTreeObj.transformToArray(zTreeObj.getNodes());
zTreeObj.hideNodes(allNode);
function filterFunc(node) {
var keywords = $("#keyword").val();
if (node.name.indexOf(keywords) != -1) return true;
return false;
};
var keywords = $("#keyword").val();
if (keywords == "") {
zTreeObj.showNodes(allNode);
// zTreeObj.expandAll(false);
} else {
nodeList = zTreeObj.getNodesByFilter(filterFunc);
for (var n in nodeList) {
if (nodeList.hasOwnProperty(n)) {
findParent(zTreeObj, nodeList[n]);
}
}
zTreeObj.showNodes(nodeList);
}
}
function findParent(treeObj, node) {
treeObj.expandNode(node, true, false, false);
var pNode = node.getParentNode();
if (pNode != null) {
nodeList.push(pNode);
findParent(treeObj, pNode);
}
};