Skip to content

1
1024程序员开源挑战赛（10.23-11.14）

GitCode / 1024程序员开源挑战赛（10.23-11.14）

通知 180870
Star 1064
Fork 1041
1
1024程序员开源挑战赛（10.23-11.14）
提交 0a82b0e2 编写于 作者: Z ztree
浏览文件
操作

Add Demo: Fuzzy Search Thanks @bigablecat

上级 7da748c6
隐藏空白更改
内联 并排
Showing with 620 addition and 268 deletion
demo/cn/index.html
浏览文件 @ 0a82b0e2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<style>
body {
background-color: white;
margin:0; padding:0;
text-align: center;
}
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;}
body {
background-color: white;
margin: 0;
padding: 0;
text-align: center;
}
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.core.js"></script>
<SCRIPT type="text/javascript" >
<!--
var zTree;
var demoIframe;
<script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.core.js"></script>
<SCRIPT type="text/javascript">
<!--
var zTree;
var demoIframe;
var setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
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 setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
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"},
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:2, name:"Checkbox chkDisabled 演示", file:"excheck/checkbox_chkDisabled"},
{id:208, pId:2, name:"Checkbox halfCheck 演示", file:"excheck/checkbox_halfCheck"},
{id:202, pId:2, name:"Checkbox 勾选统计", file:"excheck/checkbox_count"},
{id:203, pId:2, name:"用 zTree 方法 勾选 Checkbox", file:"excheck/checkbox_fun"},
{id:204, pId:2, name:"Radio 勾选操作", file:"excheck/radio"},
{id:209, pId:2, 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: 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: 2, name: "Checkbox chkDisabled 演示", file: "excheck/checkbox_chkDisabled"},
{id: 208, pId: 2, name: "Checkbox halfCheck 演示", file: "excheck/checkbox_halfCheck"},
{id: 202, pId: 2, name: "Checkbox 勾选统计", file: "excheck/checkbox_count"},
{id: 203, pId: 2, name: "用 zTree 方法 勾选 Checkbox", file: "excheck/checkbox_fun"},
{id: 204, pId: 2, name: "Radio 勾选操作", file: "excheck/radio"},
{id: 209, pId: 2, 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: 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: 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: 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: 516, pId: 5, name: "模糊查找节点", file: "super/fuzzySearch"},
{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"}
];
{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));
$(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);
}
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);
}
//-->
//-->
</SCRIPT>
</HEAD>
</HEAD>
<BODY>
<TABLE border=0 height=600px align=left>
<TR>
<TD width=260px align=left valign=top style="BORDER-RIGHT: #999999 1px dashed">
<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
</TD>
<TD width=770px align=left valign=top><IFRAME ID="testIframe" Name="testIframe" FRAMEBORDER=0 SCROLLING=AUTO width=100% height=600px SRC="core/standardData.html"></IFRAME></TD>
</TR>
<TR>
<TD width=260px align=left valign=top style="BORDER-RIGHT: #999999 1px dashed">
<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
</TD>
<TD width=770px align=left valign=top>
<IFRAME ID="testIframe" Name="testIframe" FRAMEBORDER=0 SCROLLING=AUTO width=100% height=600px
SRC="core/standardData.html"></IFRAME>
</TD>
</TR>
</TABLE>
</BODY>
......
demo/cn/super/fuzzySearch.html 0 → 100644
浏览文件 @ 0a82b0e2
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - fuzzySearch</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exhide.js"></script>
<script type="text/javascript" src="../../js/fuzzysearch.js"></script>
<SCRIPT type="text/javascript">
var setting = {
check: {
enable: true//checkbox
},
view: {
nameIsHTML: true, //允许name支持html
selectedMulti: false
},
edit: {
enable: false,
editNameSelectAll: false
},
data: {
simpleData: {
enable: true
}
}
};
var zNodes =[
{ id:1, pId:0, name:"模糊搜索演示 1", t:"id=1", open:true},
{ id:11, pId:1, name:"[]\\^$.|?*+():关键字可以是js正则元字符", t:"id=11"},
{ id:12, pId:1, name:"{}<>'\"~`!@#%&-;:/,=:关键字可以是其他字符", t:"id=12"},
{ id:2, pId:0, name:"模糊搜索演示 2", t:"id=2", open:true},
{ id:21, pId:2, name:"大写ABDEFGHINQRT:关键字查找不区分大小写", t:"id=21"},
{ id:22, pId:2, name:"小写abdefghinqrt:关键字查找不区分大小写", t:"id=21"},
{ id:3, pId:0, name:"模糊搜索演示 3", t:"id=3", open:true },
{ id:31, pId:3, name:"空 格:关键字是空格", t:"id=31"}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
fuzzySearch('treeDemo','#key',null,true); //初始化模糊搜索方法
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>根据关键字模糊查找节点</h1>
<h6>[ 文件路径: fuzzySearch/fuzzySearch.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title">
<h2>1、fuzzySearch()方法使用说明</h2>
<ul class="list">
<li class="highlight_red">
@param zTreeId ztree对象的id,不需要#
</li>
<li class="highlight_red">
@param searchField 输入框选择器
</li>
<li class="highlight_red">
@param isHighLight 是否高亮,默认高亮,传入false禁用
</li>
<li class="highlight_red">
@param isExpand 是否展开,默认合拢,传入true展开
</li>
<li class="highlight_red">
fuzzySearch ( zTreeId, searchField, isHighLight, isExpand )
</li>
<li><p>搜索试试看：<br/>
关键字：<input type="text" id="key" value="" class="empty" /><br/>
</p>
</li>
</ul>
</li>
<li class="title"><h2>2、依赖的js</h2>
<ul class="list">
<li>ztree v3.5.19.1及以上,使用到getPath()方法</li>
<li>ztree.exhide扩展,使用到hideNode()方法</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>
\ No newline at end of file
demo/en/index.html
浏览文件 @ 0a82b0e2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<style>
body {
background-color: white;
margin:0; padding:0;
text-align: center;
}
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;}
body {
background-color: white;
margin: 0;
padding: 0;
text-align: center;
}
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.core.js"></script>
<SCRIPT type="text/javascript" >
<!--
var zTree;
var demoIframe;
<script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.core.js"></script>
<SCRIPT type="text/javascript">
<!--
var zTree;
var demoIframe;
var setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
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 setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
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] Basic Functions", open: false},
{id: 101, pId: 1, name: "Standard JSON Data", file: "core/standardData"},
{id: 102, pId: 1, name: "Simple JSON Data", file: "core/simpleData"},
{id: 103, pId: 1, name: "Don't Show Line", file: "core/noline"},
{id: 104, pId: 1, name: "Don't Show Icon", file: "core/noicon"},
{id: 105, pId: 1, name: "Custom Icon - icon", file: "core/custom_icon"},
{id: 106, pId: 1, name: "Custom Icon - iconSkin", file: "core/custom_iconSkin"},
{id: 107, pId: 1, name: "Custom Fonts", file: "core/custom_font"},
{id: 115, pId: 1, name: "Hyperlinks Demo", file: "core/url"},
{id: 108, pId: 1, name: "Dynamic Tree with Ajax", file: "core/async"},
{id: 109, pId: 1, name: "Dynamic Tree - zTree methods", file: "core/async_fun"},
{id: 110, pId: 1, name: "Update Node - zTree methods", file: "core/update_fun"},
{id: 111, pId: 1, name: "Control of Click Node", file: "core/click"},
{id: 112, pId: 1, name: "Control of Expand Node", file: "core/expand"},
{id: 113, pId: 1, name: "Search Nodes", file: "core/searchNodes"},
{id: 114, pId: 1, name: "Other Mouse Events for zTree", file: "core/otherMouse"},
var zNodes = [
{id:1, pId:0, name:"[core] Basic Functions", open:false},
{id:101, pId:1, name:"Standard JSON Data", file:"core/standardData"},
{id:102, pId:1, name:"Simple JSON Data", file:"core/simpleData"},
{id:103, pId:1, name:"Don't Show Line", file:"core/noline"},
{id:104, pId:1, name:"Don't Show Icon", file:"core/noicon"},
{id:105, pId:1, name:"Custom Icon - icon", file:"core/custom_icon"},
{id:106, pId:1, name:"Custom Icon - iconSkin", file:"core/custom_iconSkin"},
{id:107, pId:1, name:"Custom Fonts", file:"core/custom_font"},
{id:115, pId:1, name:"Hyperlinks Demo", file:"core/url"},
{id:108, pId:1, name:"Dynamic Tree with Ajax", file:"core/async"},
{id:109, pId:1, name:"Dynamic Tree - zTree methods", file:"core/async_fun"},
{id:110, pId:1, name:"Update Node - zTree methods", file:"core/update_fun"},
{id:111, pId:1, name:"Control of Click Node", file:"core/click"},
{id:112, pId:1, name:"Control of Expand Node", file:"core/expand"},
{id:113, pId:1, name:"Search Nodes", file:"core/searchNodes"},
{id:114, pId:1, name:"Other Mouse Events for zTree", file:"core/otherMouse"},
{id: 2, pId: 0, name: "[excheck] Checkbox & Radio", open: false},
{id: 201, pId: 2, name: "Checkbox Operation", file: "excheck/checkbox"},
{id: 206, pId: 2, name: "Checkbox nocheck Demo", file: "excheck/checkbox_nocheck"},
{id: 207, pId: 2, name: "Checkbox chkDisabled Demo", file: "excheck/checkbox_chkDisabled"},
{id: 208, pId: 2, name: "Checkbox halfCheck Demo", file: "excheck/checkbox_halfCheck"},
{id: 202, pId: 2, name: "Statistics Checkbox is Checked", file: "excheck/checkbox_count"},
{id: 203, pId: 2, name: "Checkbox - zTree methods", file: "excheck/checkbox_fun"},
{id: 204, pId: 2, name: "Radio Operation", file: "excheck/radio"},
{id: 209, pId: 2, name: "Radio nocheck Demo", file: "excheck/radio_nocheck"},
{id: 210, pId: 2, name: "Radio chkDisabled Demo", file: "excheck/radio_chkDisabled"},
{id: 211, pId: 2, name: "Radio halfCheck Demo", file: "excheck/radio_halfCheck"},
{id: 205, pId: 2, name: "Radio - zTree methods", file: "excheck/radio_fun"},
{id:2, pId:0, name:"[excheck] Checkbox & Radio", open:false},
{id:201, pId:2, name:"Checkbox Operation", file:"excheck/checkbox"},
{id:206, pId:2, name:"Checkbox nocheck Demo", file:"excheck/checkbox_nocheck"},
{id:207, pId:2, name:"Checkbox chkDisabled Demo", file:"excheck/checkbox_chkDisabled"},
{id:208, pId:2, name:"Checkbox halfCheck Demo", file:"excheck/checkbox_halfCheck"},
{id:202, pId:2, name:"Statistics Checkbox is Checked", file:"excheck/checkbox_count"},
{id:203, pId:2, name:"Checkbox - zTree methods", file:"excheck/checkbox_fun"},
{id:204, pId:2, name:"Radio Operation", file:"excheck/radio"},
{id:209, pId:2, name:"Radio nocheck Demo", file:"excheck/radio_nocheck"},
{id:210, pId:2, name:"Radio chkDisabled Demo", file:"excheck/radio_chkDisabled"},
{id:211, pId:2, name:"Radio halfCheck Demo", file:"excheck/radio_halfCheck"},
{id:205, pId:2, name:"Radio - zTree methods", file:"excheck/radio_fun"},
{id: 3, pId: 0, name: "[exedit] Editing", open: false},
{id: 301, pId: 3, name: "Normal Drag Node Operation", file: "exedit/drag"},
{id: 302, pId: 3, name: "Advanced Drag Node Operation", file: "exedit/drag_super"},
{id: 303, pId: 3, name: "Move / Copy - zTree methods", file: "exedit/drag_fun"},
{id: 304, pId: 3, name: "Basic Edit Nodes", file: "exedit/edit"},
{id: 305, pId: 3, name: "Advanced Edit Nodes", file: "exedit/edit_super"},
{id: 306, pId: 3, name: "Edit Nodes - zTree methods", file: "exedit/edit_fun"},
{id: 307, pId: 3, name: "Editing Dynamic Tree", file: "exedit/async_edit"},
{id: 308, pId: 3, name: "Multiple Trees", file: "exedit/multiTree"},
{id:3, pId:0, name:"[exedit] Editing", open:false},
{id:301, pId:3, name:"Normal Drag Node Operation", file:"exedit/drag"},
{id:302, pId:3, name:"Advanced Drag Node Operation", file:"exedit/drag_super"},
{id:303, pId:3, name:"Move / Copy - zTree methods", file:"exedit/drag_fun"},
{id:304, pId:3, name:"Basic Edit Nodes", file:"exedit/edit"},
{id:305, pId:3, name:"Advanced Edit Nodes", file:"exedit/edit_super"},
{id:306, pId:3, name:"Edit Nodes - zTree methods", file:"exedit/edit_fun"},
{id:307, pId:3, name:"Editing Dynamic Tree", file:"exedit/async_edit"},
{id:308, pId:3, name:"Multiple Trees", file:"exedit/multiTree"},
{id: 4, pId: 0, name: "Large Amount of Data Loading", open: false},
{id: 401, pId: 4, name: "One-time Large Data Loading", file: "bigdata/common"},
{id: 402, pId: 4, name: "Loading Data in Batches", file: "bigdata/diy_async"},
{id: 403, pId: 4, name: "Loading Data By Pagination", file: "bigdata/page"},
{id:4, pId:0, name:"Large Amount of Data Loading", open:false},
{id:401, pId:4, name:"One-time Large Data Loading", file:"bigdata/common"},
{id:402, pId:4, name:"Loading Data in Batches", file:"bigdata/diy_async"},
{id:403, pId:4, name:"Loading Data By Pagination", file:"bigdata/page"},
{id: 5, pId: 0, name: "Multi-functional", open: false},
{id: 501, pId: 5, name: "Freeze the Root Node", file: "super/oneroot"},
{id: 502, pId: 5, name: "Click to Expand Node", file: "super/oneclick"},
{id: 503, pId: 5, name: "Keep Single Path", file: "super/singlepath"},
{id: 516, pId: 5, name: "Fuzzy Search", file: "super/fuzzySearch"},
{id: 504, pId: 5, name: "Adding Custom DOM", file: "super/diydom"},
{id: 505, pId: 5, name: "Checkbox / Radio Coexistence", file: "super/checkbox_radio"},
{id: 506, pId: 5, name: "Left Menu", file: "super/left_menu"},
{id: 513, pId: 5, name: "OutLook Style", file: "super/left_menuForOutLook"},
{id: 515, pId: 5, name: "Awesome Style", file: "super/awesome"},
{id: 514, pId: 5, name: "Metro Style", file: "super/metro"},
{id: 507, pId: 5, name: "Drop-down Menu", file: "super/select_menu"},
{id: 509, pId: 5, name: "Drop-down Menu with checkbox", file: "super/select_menu_checkbox"},
{id: 510, pId: 5, name: "Drop-down Menu with radio", file: "super/select_menu_radio"},
{id: 508, pId: 5, name: "Right-click Menu", file: "super/rightClickMenu"},
{id: 511, pId: 5, name: "Drag With Other DOMs", file: "super/dragWithOther"},
{id: 512, pId: 5, name: "Expand All Nodes with Async", file: "super/asyncForAll"},
{id:5, pId:0, name:"Multi-functional", open:false},
{id:501, pId:5, name:"Freeze the Root Node", file:"super/oneroot"},
{id:502, pId:5, name:"Click to Expand Node", file:"super/oneclick"},
{id:503, pId:5, name:"Keep Single Path", file:"super/singlepath"},
{id:504, pId:5, name:"Adding Custom DOM", file:"super/diydom"},
{id:505, pId:5, name:"Checkbox / Radio Coexistence", file:"super/checkbox_radio"},
{id:506, pId:5, name:"Left Menu", file:"super/left_menu"},
{id:513, pId:5, name:"OutLook Style", file:"super/left_menuForOutLook"},
{id:515, pId:5, name:"Awesome Style", file:"super/awesome"},
{id:514, pId:5, name:"Metro Style", file:"super/metro"},
{id:507, pId:5, name:"Drop-down Menu", file:"super/select_menu"},
{id:509, pId:5, name:"Drop-down Menu with checkbox", file:"super/select_menu_checkbox"},
{id:510, pId:5, name:"Drop-down Menu with radio", file:"super/select_menu_radio"},
{id:508, pId:5, name:"Right-click Menu", file:"super/rightClickMenu"},
{id:511, pId:5, name:"Drag With Other DOMs", file:"super/dragWithOther"},
{id:512, pId:5, name:"Expand All Nodes with Async", file:"super/asyncForAll"},
{id: 6, pId: 0, name: "Other Extension Package", open: false},
{id: 601, pId: 6, name: "hide ordinary node", file: "exhide/common"},
{id: 602, pId: 6, name: "hide with checkbox mode", file: "exhide/checkbox"},
{id: 603, pId: 6, name: "hide with radio mode", file: "exhide/radio"}
];
{id:6, pId:0, name:"Other Extension Package", open:false},
{id:601, pId:6, name:"hide ordinary node", file:"exhide/common"},
{id:602, pId:6, name:"hide with checkbox mode", file:"exhide/checkbox"},
{id:603, pId:6, name:"hide with radio mode", 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));
$(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);
}
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);
}
//-->
//-->
</SCRIPT>
</HEAD>
</HEAD>
<BODY>
<TABLE border=0 height=600px align=left>
<TR>
<TD width=260px align=left valign=top style="BORDER-RIGHT: #999999 1px dashed">
<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
</TD>
<TD width=770px align=left valign=top><IFRAME ID="testIframe" Name="testIframe" FRAMEBORDER=0 SCROLLING=AUTO width=100% height=600px SRC="core/standardData.html"></IFRAME></TD>
</TR>
<TR>
<TD width=260px align=left valign=top style="BORDER-RIGHT: #999999 1px dashed">
<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
</TD>
<TD width=770px align=left valign=top>
<IFRAME ID="testIframe" Name="testIframe" FRAMEBORDER=0 SCROLLING=AUTO width=100% height=600px
SRC="core/standardData.html"></IFRAME>
</TD>
</TR>
</TABLE>
</BODY>
</BODY>
</HTML>
demo/en/super/fuzzySearch.html 0 → 100644
浏览文件 @ 0a82b0e2
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - fuzzySearch</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exhide.js"></script>
<script type="text/javascript" src="../../js/fuzzysearch.js"></script>
<SCRIPT type="text/javascript">
var setting = {
check: {
enable: true//checkbox
},
view: {
nameIsHTML: true, //allow html in node name for highlight use
selectedMulti: false
},
edit: {
enable: false,
editNameSelectAll: false
},
data: {
simpleData: {
enable: true
}
}
};
var zNodes =[
{ id:1, pId:0, name:"fuzzySearch demo 1", t:"id=1", open:true},
{ id:11, pId:1, name:"[]\\^$.|?*+():keywords with js meta characters", t:"id=11"},
{ id:12, pId:1, name:"{}<>'\"~`!@#%&-;:/,=:keywords with other characters", t:"id=12"},
{ id:2, pId:0, name:"fuzzySearch demo 2", t:"id=2", open:true},
{ id:21, pId:2, name:"uppercase ABDEFGHINQRT:keywords igonore case", t:"id=21"},
{ id:22, pId:2, name:"lowercase abdefghinqrt:keywords igonore case", t:"id=21"},
{ id:3, pId:0, name:"fuzzySearch demo 3", t:"id=3", open:true },
{ id:31, pId:3, name:"blank blank:keywords with blank", t:"id=31"}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
fuzzySearch('treeDemo','#key',null,true); //initialize fuzzysearch function
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>Fuzzy Search</h1>
<h6>[ File Path: fuzzySearch/fuzzySearch.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title">
<h2>1. Explaination of fuzzySearch()</h2>
<ul class="list">
<li class="highlight_red">
@param the ztree id used to get the ztree object
</li>
<li class="highlight_red">
@param searchField selector of your input for fuzzy search
</li>
<li class="highlight_red">
@param isHighLight whether highlight the match words, default true
</li>
<li class="highlight_red">
@param isExpand whether to expand the node, default false
</li>
<li class="highlight_red">
fuzzySearch ( zTreeId, searchField, isHighLight, isExpand )
</li>
<li><p>Try to search：<br/>
Keywords：<input type="text" id="key" value="" class="empty" /><br/>
</p>
</li>
</ul>
</li>
<li class="title"><h2>2. js dependencies</h2>
<ul class="list">
<li>ztree v3.5.19.1 +, getPath() in use</li>
<li>ztree.exhide extension, hideNode() in use</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>
\ No newline at end of file
demo/js/fuzzysearch.js 0 → 100644
浏览文件 @ 0a82b0e2
/*
* email: bigablecat@hotmail.com
* Date: 2018-04-14
*/
/**
* @param zTreeId the ztree id used to get the ztree object
* @param searchField selector of your input for fuzzy search
* @param isHighLight whether highlight the match words, default true
* @param isExpand whether to expand the node, default false
*
* @returns
*/
function fuzzySearch(zTreeId, searchField, isHighLight, isExpand){
var zTreeObj = $.fn.zTree.getZTreeObj(zTreeId);//get the ztree object by ztree id
if(!zTreeObj){
alter("fail to get ztree object");
}
var nameKey = zTreeObj.setting.data.key.name; //get the key of the node name
isHighLight = isHighLight===false?false:true;//default true, only use false to disable highlight
isExpand = isExpand?true:false; // not to expand in default
zTreeObj.setting.view.nameIsHTML = isHighLight; //allow use html in node name for highlight use
var metaChar = '[\\[\\]\\\\\^\\$\\.\\|\\?\\*\\+\\(\\)]'; //js meta characters
var rexMeta = new RegExp(metaChar, 'gi');//regular expression to match meta characters
// keywords filter function
function ztreeFilter(zTreeObj,_keywords,callBackFunc) {
if(!_keywords){
_keywords =''; //default blank for _keywords
}
// function to find the matching node
function filterFunc(node) {
if(node && node.oldname && node.oldname.length>0){
node[nameKey] = node.oldname; //recover oldname of the node if exist
}
zTreeObj.updateNode(node); //update node to for modifications take effect
if (_keywords.length == 0) {
//return true to show all nodes if the keyword is blank
zTreeObj.showNode(node);
zTreeObj.expandNode(node,isExpand);
return true;
}
//transform node name and keywords to lowercase
if (node[nameKey] && node[nameKey].toLowerCase().indexOf(_keywords.toLowerCase())!=-1) {
if(isHighLight){ //highlight process
//a new variable 'newKeywords' created to store the keywords information
//keep the parameter '_keywords' as initial and it will be used in next node
//process the meta characters in _keywords thus the RegExp can be correctly used in str.replace
var newKeywords = _keywords.replace(rexMeta,function(matchStr){
//add escape character before meta characters
return '\\' + matchStr;
});
node.oldname = node[nameKey]; //store the old name
var rexGlobal = new RegExp(newKeywords, 'gi');//'g' for global,'i' for ignore case
//use replace(RegExp,replacement) since replace(/substr/g,replacement) cannot be used here
node[nameKey] = node.oldname.replace(rexGlobal, function(originalText){
//highlight the matching words in node name
var highLightText =
'<span style="color: whitesmoke;background-color: darkred;">'
+ originalText
+'</span>';
return highLightText;
});
zTreeObj.updateNode(node); //update node for modifications take effect
}
zTreeObj.showNode(node);//show node with matching keywords
return true; //return true and show this node
}
zTreeObj.hideNode(node); // hide node that not matched
return false; //return false for node not matched
}
var nodesShow = zTreeObj.getNodesByFilter(filterFunc); //get all nodes that would be shown
processShowNodes(nodesShow, _keywords);//nodes should be reprocessed to show correctly
}
/**
* reprocess of nodes before showing
*/
function processShowNodes(nodesShow,_keywords){
if(nodesShow && nodesShow.length>0){
//process the ancient nodes if _keywords is not blank
if(_keywords.length>0){
$.each(nodesShow, function(n,obj){
var pathOfOne = obj.getPath();//get all the ancient nodes including current node
if(pathOfOne && pathOfOne.length>0){
//i < pathOfOne.length-1 process every node in path except self
for(var i=0;i<pathOfOne.length-1;i++){
zTreeObj.showNode(pathOfOne[i]); //show node
zTreeObj.expandNode(pathOfOne[i],true); //expand node
}
}
});
}else{ //show all nodes when _keywords is blank and expand the root nodes
var rootNodes = zTreeObj.getNodesByParam('level','0');//get all root nodes
$.each(rootNodes,function(n,obj){
zTreeObj.expandNode(obj,true); //expand all root nodes
});
}
}
}
//listen to change in input element
$(searchField).bind('input propertychange', function() {
var _keywords = $(this).val();
searchNodeLazy(_keywords); //call lazy load
});
var timeoutId = null;
// excute lazy load once after input change, the last pending task will be cancled
function searchNodeLazy(_keywords) {
if (timeoutId) {
//clear pending task
clearTimeout(timeoutId);
}
timeoutId = setTimeout(function() {
ztreeFilter(zTreeObj,_keywords); //lazy load ztreeFilter function
$(searchField).focus();//focus input field again after filtering
}, 500);
}
}
\ No newline at end of file
demo/js/fuzzysearch.min.js 0 → 100644
浏览文件 @ 0a82b0e2
/*
* email: bigablecat@hotmail.com
* Date: 2018-04-14
*/
/**
* @param zTreeId the ztree id used to get the ztree object
* @param searchField selector of your input for fuzzy search
* @param isHighLight whether highlight the match words, default true
* @param isExpand whether to expand the node, default false
* @returns
*/
function fuzzySearch(l,h,e,f){function m(b,c,k){c||(c="");k=b.getNodesByFilter(function(a){a&&a.oldname&&0<a.oldname.length&&(a[d]=a.oldname);b.updateNode(a);if(0==c.length)return b.showNode(a),b.expandNode(a,f),!0;if(a[d]&&-1!=a[d].toLowerCase().indexOf(c.toLowerCase())){if(e){var p=c.replace(n,function(a){return"\\"+a});a.oldname=a[d];a[d]=a.oldname.replace(new RegExp(p,"gi"),function(a){return'\x3cspan style\x3d"color: whitesmoke;background-color: darkred;"\x3e'+a+"\x3c/span\x3e"});b.updateNode(a)}b.showNode(a);return!0}b.hideNode(a);return!1});q(k,c)}function q(b,d){if(b&&0<b.length)if(0<d.length)$.each(b,function(a,b){var d=b.getPath();if(d&&0<d.length)for(var e=0;e<d.length-1;e++)c.showNode(d[e]),c.expandNode(d[e],!0)});else{var e=c.getNodesByParam("level","0");$.each(e,function(a,b){c.expandNode(b,!0)})}}function r(b){g&&clearTimeout(g);g=setTimeout(function(){m(c,b);$(h).focus()},500)}var c=$.fn.zTree.getZTreeObj(l);c||alter("fail to get ztree object");var d=c.setting.data.key.name;e=!1===e?!1:!0;f=f?!0:!1;c.setting.view.nameIsHTML=e;var n=RegExp("[\\[\\]\\\\^\\$\\.\\|\\?\\*\\+\\(\\)]","gi");$(h).bind("input propertychange",function(){var b=$(this).val();r(b)});var g=null};
\ No newline at end of file
log v3.x.txt
浏览文件 @ 0a82b0e2
......@@ -13,6 +13,9 @@
</font>
*2018.04.24* v3.5.35
* [增加] Demo：模糊搜索（Fuzzy Search） Thanks @bigablecat
*2018.03.30* v3.5.35
* [修改] 关闭拖拽方法内的 eventMouseDown.preventDefault(); 避免影响 zTree 外部的事件 Thanks @heyusysu
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或