ztree模糊搜索

1、方法

$(function() {

//加载树结构
searchDepart();
});

//加载树方法和事件
function searchDepart() {
var departName = $("input[name='gridName']").val();
$.ajax({
type : 'POST',
url : '${ctx}/newDepartController.do?getTreeData',
dataType : "JSON",
data : {
'departName' : ''
},
success : function(list) {
var d = list;
if (d.success) {
var datas = eval(d.obj);
$.fn.zTree.init($('#treeNode'), setting, datas);
}
}
});


}

var setting = {
async : {
enable : false,
},
check : {
enable : false,
chkboxType : {
'Y' : '',
'N' : ''
}
},
view : {
dblClickExpand : false
},
data : {
simpleData : {
enable : true
}
},
callback : {
onClick : TreeNodeClick,
beforeExpand : zTreeBeforeExpand
}
};

//加载树节点的方法
var departName = null;  //查询条件
function searchTreeNode() {
departName = $("input[name='gridName']").val();
if(departName==null||departName==''){
return;
}
var zTree_Menu = $.fn.zTree.getZTreeObj('treeNode');
var selectedNodes = zTree_Menu.getSelectedNodes();
var node = zTree_Menu.getNodesByFilter(filter, true); // 第二个参数表示仅查找一个节点
if(node==null){
userHint('没有查询到相关信息！',6);
return;
}
zTree_Menu.selectNode(node, false, false);//指定选中ID的节点 ；参数：节点对象，表示是否单独选中（false只会选中一个，之前的会被取消），是否会让节点自动滚到到可视区域内
zTree_Menu.expandNode(node, true, false);//指定选中ID节点展开  
}

//树节点，查询过滤器
function filter(node) {
return (node.name.indexOf(departName) > -1);

2、

<div class="layui-form-item" style="margin-top: 5px;">
<div class="layui-inline"
style="margin-bottom: 0px; margin-left: 1px; margin-right: 0px;">
<input type="text" name="gridName" class="layui-input"
placeholder="输入机构名称"
onkeydown='if(event.keyCode==13) return false;'>
</div>
<button type="button" class="layui-btn layui-btn-small" onclick="searchTreeNode()">查询</button>

</div>


<ul id="treeNode" class="ztree">
</ul>

3、效果

搜索内容选中并且展开