96 Star 435 Fork 123

sunxiaobin/layuiTablePlug

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
testTreeSearch.html 6.04 KB
一键复制 编辑 原始数据 按行查看 历史
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/src/css/layui.css">
<style>
.search_hint_text {
color: red;
}
</style>
</head>
<body style="padding: 10px;">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>基本树</legend>
</fieldset>
<div>
<div class="layui-inline">
<input class="layui-input layui-input-inline" name="searchTree">
</div>
</div>
<div style="display: inline-block; width: 240px; height: 480px; padding: 10px; border: 1px solid #ddd; overflow: auto;"
id="main">
<ul id="demo1"></ul>
</div>
<script src="layui/src/layui.js"></script>
<script>
layui.use(['tree', 'layer'], function () {
var layer = layui.layer
, $ = layui.jquery
, tree = layui.tree;
// 同步(绑定)layui的tree的搜索(过滤)框
// treeId: tree所在的容器的id
// filter: 对应的搜索框的selector或者dom对象,尽量要确保是唯一的节点,或者真的是要控制这个树的input
// callback: 回调 参数(树节点jquery对象, 输入框对象, 匹配到的节点数量)
tree.syncLayuiTreeFilter = function (treeId, filter, callback) {
var treeElem = $('#' + treeId), filterElem = $(filter);
if (!filterElem.length || !filterElem.length) {
return;
}
filterElem.unbind('change').change(function (event) {
var that = this;
var value = $(that).val().trim();
var HIDE = 'layui-hide';
var hintClass = 'search_hit';
// 先恢复现场
treeElem.find('.' + HIDE).removeClass(HIDE);
treeElem.find('.' + hintClass).removeClass(hintClass).each(function (index, item) {
item = $(item);
item.html(item.data('textOld')).data('textOld', null);
});
// 如果有值筛选开始
if (value) {
layui.each(treeElem.find('cite'), function (index, elem) {
elem = $(elem);
var textTemp = elem.text();
if (textTemp.indexOf(value) === -1) {
// 不存在就隐藏
elem.closest('li').addClass(HIDE);
} else {
// 命中就添加一个class
elem.addClass(hintClass)
.data('textOld', textTemp) // 记录原始的文本,下面会替换成命中的文本高亮显示的html
.html(textTemp.replace(new RegExp(value, 'g'), '<span class="search_hint_text">' + value + '</span>'));
}
});
layui.each(treeElem.find('.' + hintClass), function (index, elem) {
elem = $(elem);
// 遍历祖辈的ul
elem.parents('ul').each(function (i, item) {
item = $(item);
// 显示父节点
item.parent('li').removeClass(HIDE);
if (!item.hasClass('layui-show')) {
// 如果是折叠的就点击一下图标让它展开
item.parent('li').removeClass(HIDE).find('>i').click();
}
});
});
}
// 如果设置了回调的话
typeof callback === 'function' && callback.call(that, treeElem, filterElem, treeElem.find('.' + hintClass).length);
});
};
tree({
elem: '#demo1' //指定元素
, target: '_blank' //是否新选项卡打开(比如节点返回href才有效)
, nodes: [ //节点
{
name: '常用文件夹'
, id: 1
, alias: 'changyong'
, children: [
{
name: '所有未读(设置跳转)'
, id: 11
, href: 'http://www.layui.com/'
, alias: 'weidu'
}, {
name: '置顶邮件'
, id: 12
}, {
name: '邮件标签邮件'
, id: 13
}
]
}, {
name: '我的邮箱'
, id: 2
, spread: true
, children: [
{
name: 'QQ邮箱'
, id: 21
, spread: true
, children: [
{
name: '收件箱'
, id: 211
, children: [
{
name: '所有未读'
, id: 2111
}, {
name: '置顶邮件'
, id: 2112
}, {
name: '标签邮件'
, id: 2113
}
]
}, {
name: '已发出的邮件'
, id: 212
}, {
name: '垃圾邮件'
, id: 213
}
]
}, {
name: '阿里云邮'
, id: 22
, children: [
{
name: '收件箱'
, id: 221
}, {
name: '已发出的邮件'
, id: 222
}, {
name: '垃圾邮件'
, id: 223
}
]
}
]
}
, {
name: '收藏夹'
, id: 3
, alias: 'changyong'
, children: [
{
name: '爱情动作片'
, id: 31
, alias: 'love'
}, {
name: '技术栈'
, id: 12
, children: [
{
name: '前端'
, id: 121
}
, {
name: '全端'
, id: 122
}
]
}
]
}
]
});
tree.syncLayuiTreeFilter('demo1', '[name="searchTree"]', function (treeElem, filterElem, hitNumbers) {
console.log('hitNumbers', hitNumbers);
layer.msg('找到' + hitNumbers + '个节点');
});
});
</script>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/sun_zoro/layuiTablePlug.git
git@gitee.com:sun_zoro/layuiTablePlug.git
sun_zoro
layuiTablePlug
layuiTablePlug
master

搜索帮助

0d507c66 1850385 C8b1a773 1850385