改造layui tree组件支持树的关键字搜索操作

2024-10-26前端开发
210

layui的tree控件没有搜索功能,在这里我们需要这个功能,要怎么操作呢?

1、html部分代码如下:

<div class="layui-col-xs2 layui-panel">
	<div><input type="text" id="zf_keyword"  placeholder="按关键词搜索"
			class="layui-input"></div>
	<div class="layui-tab-item layui-show" id="zf_tree"></div>
</div>
2、js代码部分如下:
var search = function(){
		$("#zf_keyword").unbind('change').change(function () {
		let that = this; //this;
		let name = $(that).val().trim();
		  var elem = $("#zf_tree").find('.layui-tree-txt').css('color', ''); //搜索文本与设置默认颜色
		  if (!name) {
			layer.alert("查无记录"); //无搜索值返回
		  }
		  elem.filter(':contains(' + name + ')').css('color', '#FFB800'); //搜索文本并设置标志颜色
		  elem.parents('.layui-tree-pack').prev().find('.layui-tree-iconClick').click(); //展开选项
	})
}
The End
layui tree 搜索功能

相关推荐

layui实现图片上传成功后回显点击放大图片功能
layui实现图片上传成功后回显点击放大图片功能,html代码部分: !-- html代码--div class="layui-form-item" label class="layui-form-label"上传图片/label div class="layui-input-block" button type="button" class="layui-btn" id="license-auth-letter-...
2025-09-06 前端开发
202

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图
Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果,最终效果如下图所示: 实现代码如下,在done函数中调用hoverOpenImg方法 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/postData', //width : 150...
2025-09-04 前端开发
112

layui点击文本输入框调起弹出选择框并选择内容的两种方法参考
我们在用到layui时候,需要点击文本输入框调起弹出选择框并选择内容,这个要怎么操作呢?以下两种方法可以参考: 1、点击名称,弹出信息弹框,选择表格中的某一行,实现效果如下: html页面代码 !--计量器具弹出层-- div id="equipment" lay-filter="equipmen...
2025-09-02 前端开发
167

织梦dedecms搜索结果按点击排序的简单修改
DEDE默认的搜索功能,所得到的结果是按照文章加入的先后排序的 很多时候,我们希望得到的结果按点击数排序,点击多的排前面。 那么就修改这一个地方: include/inc_arcsaerch_view.php的大概第48行,将: $this-OrderBy = 'wmd_full_search.aid desc'; 改为...
2025-06-06 前端开发
202

Layui treetable复选框联动解决方案
我们都知道layui treetable.js没有checked做联动。我们要实现Layui treetable复选框联动要怎么操作呢?实现的最终效果如下: 1. 在当前HTML文档checked监听函数中增加以下代码: //联动 table.on('checkbox(quan_list)', function(obj){ //console.log(obj);...
2025-06-06 前端开发
163

Layui中实现开关按钮的效果
按钮代码如下: {field: 'state', title: '状态', width: 85, templet: function (data) { if (data.state == 0) { return 'div input type="checkbox" checked="" name="codeSwitch" lay-skin="switch" id="open" lay-filter="switchTest" switchId=' + data...
2025-04-13 前端开发
112