当前访客身份：游客 [
当前位置：
发布于 日 15时,
工作需要，所以做了一个比较方便的搜索功能；1、功能实现都是基于zTree的API；2、如有更好的建议，欢迎拍我；其中要说明下的是flag&这个字段，&这是我自己定义的扩展字段，代码中涉及到flag&请先了解zTree哦
代码片段(2)
1.&[图片] QQ截图13.png&&&&
search_tree.js&~&5KB&&&&
* @param treeId
function expand_ztree(treeId){
var treeObj = $.fn.zTree.getZTreeObj(treeId);
treeObj.expandAll(true);
* 收起树：只展开根节点下的一级节点
* @param treeId
function close_ztree(treeId){
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var nodes = treeObj.transformToArray(treeObj.getNodes());
var nodeLength = nodes.
for (var i = 0; i & nodeL i++) {
if (nodes[i].id == '0') {
//根节点：展开
treeObj.expandNode(nodes[i], true, true, false);
//非根节点：收起
treeObj.expandNode(nodes[i], false, true, false);
* 搜索树，高亮显示并展示【模糊匹配搜索条件的节点s】
* @param treeId
* @param searchConditionId 文本框的id
function search_ztree(treeId, searchConditionId){
searchByFlag_ztree(treeId, searchConditionId, "");
* 搜索树，高亮显示并展示【模糊匹配搜索条件的节点s】
* @param treeId
* @param searchConditionId
搜索条件Id
* @param flag
需要高亮显示的节点标识
function searchByFlag_ztree(treeId, searchConditionId, flag){
//&1&.搜索条件
var searchCondition = $('#' + searchConditionId).val();
//&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);
* 高亮显示并展示【指定节点s】
* @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. i++) {
treeNodes[i].highlight =
treeObj.updateNode(treeNodes[i]);
//&2&.收起树, 只展开根节点下的一级节点
close_ztree(treeId);
//&3&.把指定节点的样式更新为高亮显示，并展开
if (highlightNodes != null) {
for (var i = 0; i & highlightNodes. i++) {
if (flag != null && flag != "") {
if (highlightNodes[i].flag == flag) {
//高亮显示节点，并展开
highlightNodes[i].highlight =
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);
//高亮显示节点，并展开
highlightNodes[i].highlight =
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);
* 递归得到指定节点的父节点的父节点....直到根节点
function getParentNodes_ztree(treeId, node){
if (node != null) {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var parentNode = node.getParentNode();
return getParentNodes_ztree(treeId, parentNode);
* 设置树节点字体样式
function setFontCss_ztree(treeId, treeNode) {
if (treeNode.id == 0) {
return {color:"#333", "font-weight":"bold"};
} else if (treeNode.isParent == false){
//叶子节点
return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#660099", "font-weight":"normal"};
return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
//==============HTML==============
&!--搜索框--&
&div class="padd" style="padding-bottom: 0"&
&div class="input-append row-fluid" style="margin-bottom: 0"&
&input id="search_condition" type="text" placeholder="请输入搜索条件" class="span8" style="font-size:12px"/&
&button type="button" class="btn btn-info" onclick="search_ztree('dep_tree', 'search_condition')"&搜索&/button&
&ul id="dep_tree" class="ztree"&&/ul&
开源中国-程序员在线工具：
相关的代码(9)
5回/7373阅
6回/5660阅
8回/5474阅
[JavaScript]
56回/2970阅
0回/1947阅
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
这就是所谓的函数式编程？
2楼：GuoYJ 发表于
引用来自“Solowave”的评论这就是所谓的函数式编程？只是对方法的功能引用写的更加透明，解耦和；
3楼：Frankhong 发表于
赞一个，mark，
4楼：osc皮皮 发表于
GYJ0728 看了下代码试了下 效果 好想不是高亮显示匹配的数节点数据
5楼：osc皮皮 发表于
setFontCss_ztree 是在什么时候调用的？
6楼：GuoYJ 发表于
引用来自“osc皮皮”的评论请问下&
setFontCss_ztree 是在什么时候调用的？是在zTree的配置开头处，view: { showIcon: false, selectedMulti: false, nameIsHTML: true, fontCss: setFontCss_ztree },
7楼：GuoYJ 发表于
引用来自“osc皮皮”的评论@
GYJ0728 看了下代码试了下 效果 好想不是高亮显示匹配的数节点数据只能你再仔细检查了，调试一把看看。我本身已经用很久了
8楼：osc皮皮 发表于
引用来自“GYJ0728”的评论引用来自“osc皮皮”的评论请问下&
setFontCss_ztree 是在什么时候调用的？是在zTree的配置开头处，view: { showIcon: false, selectedMulti: false, nameIsHTML: true, fontCss: setFontCss_ztree },好的 谢谢 我试试
9楼：wjjfeng 发表于
你好，ztree中怎么实现模糊搜索功能，将搜索到的节点显示，没有搜索到的节点隐藏
10楼：GuoYJ 发表于
引用来自“wjjfeng”的评论你好，ztree中怎么实现模糊搜索功能，将搜索到的节点显示，没有搜索到的节点隐藏将搜索到的打标记，其余隐藏， 至于最高的父节点要显示还是隐藏你要处理好！
11楼：我的天啊 发表于
请问当输入为空时怎么使它颜色重置？
12楼：xx档案 发表于
想请教你一下,flag ,highlight 这两个字段是怎么定义的?
13楼：GuoYJ 发表于
引用来自“xx档案”的评论想请教你一下,flag ,highlight 这两个字段是怎么定义的?flag 是自定义的， highlight 是官方定义的改变css的参数呀
14楼：汉平兄 发表于
我应用了你的代码，挺好的 ，搜索也可以，但是不知道怎么不能高亮，请问要高亮要引入哪些css文件和js文件呢
15楼：GuoYJ 发表于
引用来自“汉平兄”的评论我应用了你的代码，挺好的 ，搜索也可以，但是不知道怎么不能高亮，请问要高亮要引入哪些css文件和js文件呢把官网提供的CSS和JS按顺序引入就可以了；
16楼：wangbemo 发表于
请问，flag 这个字段是如何定义的
17楼：zhouxyx 发表于
有没有搜索的功能，比如你现在搜索"目"，只显示查询出来的数据以及所有查询数据的所有父子节点，
18楼：GuoYJ 发表于
引用来自“zhouxyx”的评论有没有搜索的功能，比如你现在搜索"目"，只显示查询出来的数据以及所有查询数据的所有父子节点，其余数据隐藏即可
19楼：weicd 发表于
三层内搜索没问题，到第四层就有问题了，第一次搜索可以展开，第二次又合上了
开源从代码分享开始
GuoYJ的其它代码一、节点模糊搜索功能：主要是搜索成功后，节点展开与收缩的控制；这里的代码只考虑三级节点，写死的，有待完善。二、节点异步加载：1、展开节点时加载数据；2、选中节点时加载数据&注意：前后台代码并不是对应的，这里只是示意。&前台代码如下：&script type="text/javascript"&
//ztree设置
var setting = {
fontCss: getFontCss
enable: true
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
enable: true,
url: "#{getStudentsJsonUrl}",
autoParam: ["id", "level"]
callback: {
beforeCheck: zTreeBeforeCheck,
onNodeCreated: zTreeOnNodeCreated,
beforeExpand: zTreeBeforeExpand
//节点展开前
function zTreeBeforeExpand(treeId, treeNode) {
createFlag =
var createFlag =
//节点创建后
function zTreeOnNodeCreated(event, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj(treeId);
if (createFlag) {
zTree.checkNode(treeNode, true, true);
zTree.reAsyncChildNodes(treeNode, "refresh");
//选中节点前
function zTreeBeforeCheck(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj(treeId);
if (!treeNode.children) {
createFlag =
zTree.reAsyncChildNodes(treeNode, "refresh");
//页面加载完成
_run(function () {
require(['zTree/js/jquery.ztree.all-3.5'], function () {
type: "POST",
url: "#{getStudentsJsonUrl}",
success: function (data) {
if (data && data.length != 0) { //如果结果不为空
$.fn.zTree.init($("#tree"), setting, data);
else { //搜索不到结果
$("#inputSubmit").click(function () {
var zTree = $.fn.zTree.getZTreeObj("tree");
var nodes = zTree.getCheckedNodes(true);
var ids = "";
for (var i = 0; i & nodes. i++) {
if (nodes[i].level == 2) {
ids += nodes[i].id.replace("level2", "") + ",";
$("#hidIds").val(ids.substr(0, ids.length - 1));
$("#frm").submit();
//查找节点
var lastNodeList = [];
function searchNode() {
var key = $.trim($("#inputSearchNode").val());
if (key != "" && key != lastKey) {
var zTree = $.fn.zTree.getZTreeObj("tree");
nodeList = zTree.getNodesByParamFuzzy("name", key);
for (var i = 0, l = lastNodeList. i & i++) {
lastNodeList[i].highlight =
zTree.updateNode(lastNodeList[i]);
zTree.expandAll(false);
if (nodeList.length & 0) {
for (var i = 0, l = nodeList. i & i++) {
if (nodeList[i].getParentNode() && nodeList[i].getParentNode().open == false) {
if (nodeList[i].getParentNode().getParentNode() && nodeList[i].getParentNode().getParentNode().open == false) {
zTree.expandNode(nodeList[i].getParentNode().getParentNode(), true, null, false);
zTree.expandNode(nodeList[i].getParentNode(), true, null, false);
nodeList[i].highlight =
zTree.updateNode(nodeList[i]);
lastNodeList = nodeL
function getFontCss(treeId, treeNode) {
return (treeNode.highlight) ? { color: "#A60000", "font-weight": "bold"} : { color: "#333", "font-weight": "normal" };
}&/script&View Code &div style="width: 200 height: 260 overflow: border: solid 1px #666;"&
&ul id="tree" class="ztree"&
&/div&View Code 后台代码（后台返回Json数据）： public void GetEvaJson()
List&Dictionary&string, string&& dicList = new List&Dictionary&string, string&&();
//获取第一级
List&Sys_Evaluation& evaBigList = sys_EvaluationService.findAll&Sys_Evaluation&();
foreach (Sys_Evaluation eva in evaBigList)
Dictionary&string, string& dic = new Dictionary&string, string&();
dic.Add("id", eva.Id.ToString());
dic.Add("pId", "0");
dic.Add("name", eva.Name);
dic.Add("isParent", "true");
dicList.Add(dic);
//获取第二级
List&Sys_EvaluationSub& evaSubList = sys_EvaluationSubService.findAll&Sys_EvaluationSub&();
StringBuilder sbIds = new StringBuilder();
foreach (Sys_EvaluationSub evaSub in evaSubList)
Dictionary&string, string& dic = new Dictionary&string, string&();
dic.Add("id", "level1" + evaSub.Id.ToString());
dic.Add("pId", evaSub.Evaluation.Id.ToString());
dic.Add("name", evaSub.Name);
dic.Add("isParent", "true");
dicList.Add(dic);
sbIds.Append(evaSub.Id + ",");
//获取第三级
List&Sys_Evaluationitem& list = sys_EvaluaTionItemService.GetListByIds(sbIds.ToString(0, sbIds.Length - 1));
foreach (Sys_Evaluationitem item in list)
Dictionary&string, string& dic = new Dictionary&string, string&();
dic.Add("id", "level2" + item.Id.ToString());
dic.Add("pId", "level1" + item.MinTerm.Id.ToString());
dic.Add("name", item.Name);
dic.Add("isParent", "false");
dicList.Add(dic);
echoJson(dicList);
}View Code1184人阅读
有了树还不行，客户还想要模糊查询，zTree都已经替客户想好了模糊查询，所以zTree支持模糊.
项目中使用的方法是：zTreeObj.getNodeByParam
Function(key, value, parentNode)
根据节点数据的属性搜索，获取条件完全匹配的节点数据 JSON 对象
请通过 zTree 对象执行此方法。
Function 参数说明
需要精确匹配的属性名称
需要精确匹配的属性值，可以是任何类型，只要保证与 key 指定的属性值保持一致即可
parentNodeJSON
搜索范围，指定在某个父节点下的子节点中进行搜索
忽略此参数，表示在全部节点中搜索
返回值JSON
匹配精确搜索的节点数据
1、如无结果，返回 null
2、如有多个节点满足查询条件，只返回第一个匹配到的节点
function 举例
1. 查找 id = 1 的节点数据
var treeObj = $.fn.zTree.getZTreeObj(&tree&);
var node = treeObj.getNodeByParam(&id&, 1, null);
模糊查询通过这样就可以完成了，我对ztree只是简单的了解，知道的也就几个常用function。大家想知道更多可以去多看看，下载demo 跑一下可以了解更多。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：195693次
积分：4014
积分：4014
排名：第4568名
原创：165篇
评论：329条
(2)(2)(2)(2)(2)(2)(2)(2)(2)(2)(2)(2)(2)(2)(3)(1)(1)(5)(4)(4)(4)(4)(4)(4)(4)(4)(4)(4)(4)(4)(4)(4)(5)(6)(4)(4)(4)(4)(4)(5)(4)(4)(5)(4)(4)(1)(2)(2)(1)(2)(3)(4)(2)(2)(2)(1)}