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

作者 : admin 本文共439个字,预计阅读时间需要2分钟 发布时间: 2024-06-2 共2人阅读

layui的tree控件没有搜索功能。整理备忘下。

1、html:


	
	

2、javascript:

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(); //展开选项
	})
}

本站无任何商业行为
个人在线分享 » 改造layui-树(tree)组件支持树的关键字搜索操作
E-->