<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<style>
body {
background-color: white;
margin: 0;
padding: 0;
text-align: left;
}
div,
p,
table,
th,
td {
list-style: none;
margin: 0;
padding: 0;
color: #333;
font-size: 12px;
font-family: dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif;
}
#testIframe {
margin-left: 10px;
}
</style>
<script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.all.js"></script>
<SCRIPT type="text/javascript">
<!--
var zTree;
var demoIframe;
var setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false,
nameIsHTML: true
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
beforeClick: function(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree");
if(treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
demoIframe.attr("src", treeNode.file + ".html");
return true;
}
}
}
};
var zNodes = [{
id: 1,
pId: 0,
name: "[core] 基本功能 演示",
open: true
}, {
id: 101,
pId: 1,
name: "最简单的树 -- 标准 JSON 数据",
file: "core/standardData"
}, {
id: 102,
pId: 1,
name: "最简单的树 -- 简单 JSON 数据",
file: "core/simpleData"
}, {
id: 103,
pId: 1,
name: "不显示 连接线",
file: "core/noline"
}, {
id: 104,
pId: 1,
name: "不显示 节点 图标",
file: "core/noicon"
}, {
id: 105,
pId: 1,
name: "自定义图标 -- icon 属性",
file: "core/custom_icon"
}, {
id: 106,
pId: 1,
name: "自定义图标 -- iconSkin 属性",
file: "core/custom_iconSkin"
}, {
id: 107,
pId: 1,
name: "自定义字体",
file: "core/custom_font"
}, {
id: 115,
pId: 1,
name: "超链接演示",
file: "core/url"
}, {
id: 108,
pId: 1,
name: "异步加载 节点数据",
file: "core/async"
}, {
id: 109,
pId: 1,
name: "用 zTree 方法 异步加载 节点数据",
file: "core/async_fun"
}, {
id: 110,
pId: 1,
name: "用 zTree 方法 更新 节点数据",
file: "core/update_fun"
}, {
id: 111,
pId: 1,
name: "单击 节点 控制",
file: "core/click"
}, {
id: 112,
pId: 1,
name: "展开 / 折叠 父节点 控制",
file: "core/expand"
}, {
id: 113,
pId: 1,
name: "根据 参数 查找 节点",
file: "core/searchNodes"
}, {
id: 114,
pId: 1,
name: "其他 鼠标 事件监听",
file: "core/otherMouse"
},
{
id: 2,
pId: 0,
name: "[excheck] 复/单选框功能 演示",
open: false
}, {
id: 201,
pId: 2,
name: "Checkbox 勾选操作",
file: "excheck/checkbox"
}, {
id: 206,
pId: 2,
name: "Checkbox nocheck 演示",
file: "excheck/checkbox_nocheck"
}, {
id: 207,
pId: 206,
name: "Checkbox chkDisabled 演示",
file: "excheck/checkbox_chkDisabled"
}, {
id: 208,
pId: 206,
name: "Checkbox halfCheck 演示",
file: "excheck/checkbox_halfCheck"
}, {
id: 202,
pId: 207,
name: "Checkbox 勾选统计",
file: "excheck/checkbox_count"
}, {
id: 203,
pId: 202,
name: "用 zTree 方法 勾选 Checkbox",
file: "excheck/checkbox_fun"
}, {
id: 204,
pId: 203,
name: "Radio 勾选操作",
file: "excheck/radio"
}, {
id: 209,
pId: 204,
name: "Radio nocheck 演示",
file: "excheck/radio_nocheck"
}, {
id: 210,
pId: 2,
name: "Radio chkDisabled 演示",
file: "excheck/radio_chkDisabled"
}, {
id: 211,
pId: 2,
name: "Radio halfCheck 演示",
file: "excheck/radio_halfCheck"
}, {
id: 205,
pId: 2,
name: "用 zTree 方法 勾选 Radio",
file: "excheck/radio_fun"
},
{
id: 3,
pId: 0,
name: "[exedit] 编辑功能 演示",
open: false
}, {
id: 301,
pId: 3,
name: "拖拽 节点 基本控制",
file: "exedit/drag"
}, {
id: 302,
pId: 3,
name: "拖拽 节点 高级控制",
file: "exedit/drag_super"
}, {
id: 303,
pId: 3,
name: "用 zTree 方法 移动 / 复制 节点",
file: "exedit/drag_fun"
}, {
id: 304,
pId: 3,
name: "基本 增 / 删 / 改 节点",
file: "exedit/edit"
}, {
id: 305,
pId: 3,
name: "高级 增 / 删 / 改 节点",
file: "exedit/edit_super"
}, {
id: 306,
pId: 3,
name: "用 zTree 方法 增 / 删 / 改 节点",
file: "exedit/edit_fun"
}, {
id: 307,
pId: 3,
name: "异步加载 & 编辑功能 共存",
file: "exedit/async_edit"
}, {
id: 308,
pId: 3,
name: "多棵树之间 的 数据交互",
file: "exedit/multiTree"
},
{
id: 4,
pId: 0,
name: "大数据量 演示",
open: false
}, {
id: 401,
pId: 4,
name: "一次性加载大数据量",
file: "bigdata/common"
}, {
id: 402,
pId: 4,
name: "分批异步加载大数据量",
file: "bigdata/diy_async"
}, {
id: 403,
pId: 4,
name: "分批异步加载大数据量",
file: "bigdata/page"
},
{
id: 5,
pId: 0,
name: "组合功能 演示",
open: false
}, {
id: 501,
pId: 5,
name: "冻结根节点",
file: "super/oneroot"
}, {
id: 502,
pId: 5,
name: "单击展开/折叠节点",
file: "super/oneclick"
}, {
id: 503,
pId: 5,
name: "保持展开单一路径",
file: "super/singlepath"
}, {
id: 504,
pId: 5,
name: "添加 自定义控件",
file: "super/diydom"
}, {
id: 505,
pId: 5,
name: "checkbox / radio 共存",
file: "super/checkbox_radio"
}, {
id: 506,
pId: 5,
name: "左侧菜单",
file: "super/left_menu"
}, {
id: 513,
pId: 5,
name: "OutLook 风格",
file: "super/left_menuForOutLook"
}, {
id: 515,
pId: 5,
name: "Awesome 风格",
file: "super/awesome"
}, {
id: 514,
pId: 5,
name: "Metro 风格",
file: "super/metro"
}, {
id: 507,
pId: 5,
name: "下拉菜单",
file: "super/select_menu"
}, {
id: 509,
pId: 5,
name: "带 checkbox 的多选下拉菜单",
file: "super/select_menu_checkbox"
}, {
id: 510,
pId: 5,
name: "带 radio 的单选下拉菜单",
file: "super/select_menu_radio"
}, {
id: 508,
pId: 5,
name: "右键菜单 的 实现",
file: "super/rightClickMenu"
}, {
id: 511,
pId: 5,
name: "与其他 DOM 拖拽互动",
file: "super/dragWithOther"
}, {
id: 512,
pId: 5,
name: "异步加载模式下全部展开",
file: "super/asyncForAll"
},
{
id: 6,
pId: 0,
name: "其他扩展功能 演示",
open: false
}, {
id: 601,
pId: 6,
name: "隐藏普通节点",
file: "exhide/common"
}, {
id: 602,
pId: 6,
name: "配合 checkbox 的隐藏",
file: "exhide/checkbox"
}, {
id: 603,
pId: 6,
name: "配合 radio 的隐藏",
file: "exhide/radio"
}
];
$(document).ready(function() {
var t = $("#tree");
t = $.fn.zTree.init(t, setting, zNodes);
demoIframe = $("#testIframe");
demoIframe.bind("load", loadReady);
var zTree = $.fn.zTree.getZTreeObj("tree");
zTree.selectNode(zTree.getNodeByParam("id", 101));
});
function loadReady() {
var bodyH = demoIframe.contents().find("body").get(0).scrollHeight,
htmlH = demoIframe.contents().find("html").get(0).scrollHeight,
maxH = Math.max(bodyH, htmlH),
minH = Math.min(bodyH, htmlH),
h = demoIframe.height() >= maxH ? minH : maxH;
if(h < 530) h = 530;
demoIframe.height(h);
}
/**
* 展开树
* @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.length;
for(var i = 0; i < nodeLength; i++) {
if(nodes[i].id == '0') {
//根节点：展开
treeObj.expandNode(nodes[i], true, true, false);
} else {
//非根节点：收起
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, searchCondition, flag);
}
/**
* 高亮显示并展示【指定节点s】
* @param treeId
* @param highlightNodes 需要高亮显示的节点数组
* @param flag 需要高亮显示的节点标识
*/
function highlightAndExpand_ztree(treeId, highlightNodes, tx, 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]);
}
//<2>.收起树, 只展开根节点下的一级节点
close_ztree(treeId);
//<3>.把指定节点的样式更新为高亮显示，并展开
if(highlightNodes != null) {
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);
}
} else {
//高亮显示节点，并展开
//highlightNodes[i].checked = true;
var t = highlightNodes[i].name;
t = t.replace(eval("/" + tx + "/gi"), "<span style='background-color: yellow;color:red'>" + tx + "</span>");
highlightNodes[i].name = t;
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);
} else {
return node;
}
}
/**
* 设置树节点字体样式
*/
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"
};
} else {
//父节点
return(!!treeNode.highlight) ? {
color: "#ff0000",
"font-weight": "bold"
} : {
color: "#333",
"font-weight": "normal"
};
}
}
//-->
</SCRIPT>
</head>
<body>
<div style="clear: both;"><input type="text" id="ser" value="check"/><input type="button" value="查找" onclick="search_ztree('tree', 'ser')"/></div>
<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
</body>
</html>
zTree 模糊搜索并高亮文本
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 功能展示： 功能要求：通过拼音或者号码搜索通讯录号码，并且高亮展示出来！ 一 汉字和号码可以直接精确匹配这个很见简...
- 从五一放假回来就一直在搞上线的项目，也没怎么写文章，上周五算是基本结束了。现在有时间研究其他技术，我在逛网页时，无...
