zTree的模糊搜索

来源：互联网发布：java嵌入html5 编辑：程序博客网时间：2024/05/17 12:49

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="${ctxStatic}/css/reset.css"/>
<link rel="stylesheet" href="${ctxStatic}/css/system.css"/>
<script src="${ctxStatic}/js/jquery-1.8.3.min.js"></script>
<script src="${ctxStatic}/js/public.js"></script>
<link href="${ctxStatic}/jquery-ztree/3.5.12/css/zTreeStyle/zTreeStyle.min.css" rel="stylesheet" type="text/css"/>
<script src="${ctxStatic}/jquery-ztree/3.5.12/js/jquery.ztree.all-3.5.min.js" type="text/javascript"></script>
<title>树形菜单</title>

</head>

<body style="padding: 0 10px;">
<div style="position: fixed;left:0;top:0;width: 10px;height: 100%;background: #cee1f0;"></div>
<div style="position: fixed;right:0;top:0;width: 10px;height: 100%;background: #cee1f0;"></div>
<div style="width: 100%;background: #cee1f0;height:10px;"></div>
<div class="fw text-center tree-head">选择机构</div>
<form action="">
<div class="jiansuo-cont clearfix">
<label for="" class="dis fl">检索：</label>
<input type="text" placeholder="" class="dis fl" id="keyword"/>
<button class="dis fl jiansuo-botton" type="button" onclick="filter('ztree','keyword')"></button>
</div>
</form>
<div id="ztree" class="ztree">

</div>
<script>
var setting = {data:{simpleData:{enable:true,idKey:"id",pIdKey:"pId",rootPId:'0'}},
callback:{onClick:function(event, treeId, treeNode){
var id = treeNode.id;
$("#officelist",window.parent.document).attr("src","${ctx}/yywh/tbSyDepartment/list?parent.id="+id+"&parent.departName="+treeNode.name);
}
}
};
//刷新
refreshTree();
function refreshTree(){
$.getJSON("${ctx}/yywh/tbSyDepartment/treeData",function(data){
$.fn.zTree.init($("#ztree"), setting, data);
});
}

/**
* 搜索树，显示并展示
* @param treeId
* @param searchConditionId 文本框的id
*/
function filter(treeId, searchConditionId){
searchByFlag_ztree(treeId, searchConditionId, "");
}

/**
* 搜索树，显示并展示
* @param treeId
* @param searchConditionId 搜索条件Id
* @param flag 需要高亮显示的节点标识
*/
function searchByFlag_ztree(treeId, searchConditionId, flag){
//<1>.搜索条件
var searchCondition = $('#' + searchConditionId).val();
if(searchCondition == ""){
refreshTree();
} else {
//<2>.得到模糊匹配搜索条件的节点数组集合
var highlightNodes = new Array();
if (searchCondition != "") {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null);
}
//<3>.显示并展示【指定节点s】
highlightAndExpand_ztree(treeId, highlightNodes, flag);
}
}

/**
* 显示并展示
* @param treeId
* @param highlightNodes 需要高亮显示的节点数组
* @param flag 需要高亮显示的节点标识
*/
function highlightAndExpand_ztree(treeId, highlightNodes, flag){
var treeObj = $.fn.zTree.getZTreeObj(treeId);
//<1>. 先把全部节点更新为普通样式
var treeNodes = treeObj.transformToArray(treeObj.getNodes());
for (var i = 0; i < treeNodes.length; i++) {
treeNodes[i].highlight = false;
treeObj.updateNode(treeNodes[i]);
}
debugger;
//<2>.把指定节点的样式更新为高亮显示，并展开
if (highlightNodes != null) {
var nodesTwo =[];
for (var i = 0; i < highlightNodes.length; i++) {
if (flag != null && flag != "") {
if (highlightNodes[i].flag == flag) {
//显示节点，并展开
highlightNodes[i].highlight = true;
treeObj.updateNode(highlightNodes[i]);
//显示节点的父节点的父节点....直到根节点，并展示
var parentNode = highlightNodes[i].getParentNode();
var parentNodes = getParentNodes_ztree(treeId, parentNode);
treeObj.expandNode(parentNodes, true, false, true);
treeObj.expandNode(parentNode, true, false, true);
if(parentNode != null && parentNode != ""){
nodesTwo.push(parentNode);
}
if(parentNodes != null && parentNodes != ""){
for( var j = 0;j < parentNodes.length; j++){
nodesTwo.push(parentNodes[j]);
}
}
}
} else {
//高亮显示节点，并展开
highlightNodes[i].highlight = true;
treeObj.updateNode(highlightNodes[i]);
//高亮显示节点的父节点的父节点....直到根节点，并展示
var parentNode = highlightNodes[i].getParentNode();
var parentNodes = getParentNodes_ztree(treeId, parentNode);
treeObj.expandNode(parentNodes, true, false, true);
treeObj.expandNode(parentNode, true, false, true);
if(parentNode != null && parentNode != ""){
nodesTwo.push(parentNode);
}
if(parentNodes != null && parentNodes != ""){
for( var k = 0;k < parentNodes.length; k++){
nodesTwo.push(parentNodes[k]);
}
}
}
}
//隐藏所有节点
treeObj.hideNodes(treeNodes);
//展示搜索到的节点
treeObj.showNodes(nodesTwo);
treeObj.showNodes(highlightNodes);
}
}

var nodes =[];
/**
* 递归得到指定节点的父节点的父节点....直到根节点
*/
function getParentNodes_ztree(treeId, node){
if (node != null) {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var parentNode = node.getParentNode();
if(parentNode != null && parentNode !=""){
nodes.push(parentNode);
}
getParentNodes_ztree(treeId, parentNode);
return nodes;
} else {
return nodes;
}
}
</script>
</body>

</html>

效果：

0 0