layui tree 对节点进行搜索
时间:2019-01-22
本文章向大家介绍layui tree 对节点进行搜索,主要包括layui tree 对节点进行搜索使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
参考地址:https://fly.layui.com/jie/46865/
html 代码
<!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="js/layui/v2.3.0/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="js/layui/v2.3.0/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(textTemp.replace(new RegExp(value, 'g'), '<span class="search_hint_text">' + value + '</span>'));
}
});
layui.each(treeElem.find('.' + hintClass), function (index, elem) {
elem = $(elem);
elem.parents('li').removeClass(HIDE);
elem.parents('ul').each(function (i, item) {
if (!$(item).hasClass('layui-show')) {
$(item).parent('li').find('>i').click();
}
});
elem.parents('ul').parent('li').removeClass(HIDE);
});
}
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>
目前情况是搜索父节点子节点没有跟着出来,由于时间紧急暂时没有做,后续有空再补上
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 多线程基础(四):volatile和可见性问题及happens-before原则
- 多线程基础(三):synchronized关键字及java内存模型简介
- 多线程基础(一): 线程概念及生命周期
- Windows下Redis服务的安装及Redis服务的命令行启动和关闭
- git hooks
- 二叉树的层次遍历 II
- Android开发笔记(一百七十三)给安装包APK文件瘦身
- 从 1 到 0 构建博客项目(1) -- 操作系统篇(1)
- Spring JPA 定义查询方法
- 代理工厂的简单应用
- iOS逆向之文件系统
- Kettle构建Hadoop ETL实践(四):建立ETL示例模型
- Java并发总篇
- 逻辑漏洞之密码找回漏洞(semcms)
- 逻辑漏洞之越权、支付漏洞