初次使用jquery这个插件,最初想实现的功能:输入框内的内容能够在模糊匹配tree中节点名称.
一开始想用递归实现对象层层筛选,然后拼接~后来发现这个插件自带这样的API 大赞~可怜
先贴上ztree的api地址:ztree Api
html
<input id="keyValue" name="tree" type="text" placeholder="搜索" value="">
<div class="treeview">
<ul id="orgTree" class="ztree"></ul>
</div>
js
这里的textchange是我前面博客中提到可在ie8,9代替input事件的插件语法糖
$('#keyValue').bind("textchange",function(){
search('orgTree','label');
});
function search(id,key){
var value = $('#keyValue').val();
if(value == ""){
orgTree = init.refresh();//重新发送请求
}else{
var treeObj = $.fn.zTree.getZTreeObj(id);//ztreeAPI中的方法,用来获取ztree对象
var nodes = treeObj.transformToArray(treeObj.getNodes());//把全部子节点都转化成数组
treeObj.hideNodes(nodes);//隐藏全部子节点
var nodeList = treeObj.getNodesByParamFuzzy(key, value,null); //关键api在于这个方法,根据节点数据的属性搜索,获取条件模糊匹配的节点数据 JSON 对象集合(完美~~~)
for(var index=0;index<nodeList.length;index++){
treeObj.showNode(nodeList[index]);
hasParent(nodeList[index],treeObj);
}
}
}
//利用递归显示全部父节点
function hasParent(node,treeObj) {
var currnode = node.getParentNode();//获取父节点
treeObj.showNode(currnode);
if(currnode){
hasParent(currnode,treeObj);
}else{
treeObj.expandNode(node, true, true, true);//展开根节点
}
}
OK~~这样就实现了自己想要的效果~~,这个插件很强大,api的丰富度是我见过最高的.