[原创]jquery.ztree使用(一)

初次使用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的丰富度是我见过最高的.