讲师中心 微信公众号
AI工具推荐 视频效率加速

layui如何实现排除某些关键字的搜索

大晨吖_9285

大晨吖_9285

发布时间:2026-10-30 09:21:12

|

658人浏览过

|

来源于php中文网

原创

必须手动接管搜索逻辑:先过滤 table.cache 中 LAY_DISABLED 为 false 的数据再匹配关键词,用 table.reload 传参并配合 done 回调调用 renderData 刷新 tbody;穿梭框需禁用 showSearch 自行 DOM 控制显隐;表单验证需通过 item.name 区分字段并同步返回结果;前后端禁用字段命名必须严格一致。

layui如何实现排除某些关键字的搜索

layui table 搜索时怎么跳过禁用行

原生 table.search() 不会识别 LAY_DISABLED: true,所有行(包括灰色不可操作的)都会参与匹配,导致搜出一堆点不了的项。必须手动接管搜索逻辑,过滤掉禁用行再渲染。

  • 先调用 table.cache['your-id'] 拿到当前页全部数据,用 .filter(item => !item.LAY_DISABLED) 筛出可用行
  • 对这些可用行做关键词匹配(比如 item.title.includes(keyword)),别直接遍历整个 cache
  • 匹配结果不能直接塞给 table.render({ data: [...] }) —— 这会丢掉分页、排序等状态;应改用 table.reload('your-id', { where: { keyword } }),后端按条件查并返回带 LAY_DISABLED 标记的数据
  • 前端收到响应后,在 done 回调里再次过滤禁用行,再调 table.renderData() 仅刷新 tbody,避免重绘表头

transfer 穿梭框搜索如何排除 disabled 项

showSearch: true 的搜索是全局匹配原始 data 数组,disabled: true 的项只要 title 含关键词就会显示出来,只是 checkbox 灰掉——用户看到“搜到了却点不了”,体验断裂。真正要排除,得在本地过滤逻辑里显式判断字段值。

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
  • 禁用 showSearch,自己在左右面板上方各加一个 <input class="search-left"> 和 <input class="search-right">
  • 监听 input 事件,获取当前输入值 val
  • 遍历原始 data,只保留满足 item.title.includes(val) && item.disabled !== true 的项
  • 用 document.querySelectorAll('.layui-transfer-item') 找到所有条目 DOM,根据是否在过滤结果中设 style.display = 'block' 或 'none'
  • 别用 transfer.reload(),它会清空当前选中态;DOM 显示控制更轻量也更安全

form 表单验证里怎么让关键词不匹配某些字段

自定义 lay-verify 规则时,常需「搜用户名但排除邮箱字段」或「校验手机号但跳过备用号码」。Layui 不提供字段白名单机制,得靠 JS 层面手动识别上下文。

  • 验证函数第二个参数 item 是当前 DOM 元素,可用 item.name 或 item.getAttribute('data-field') 区分字段用途
  • 例如:只对 name="username" 做查重,遇到 name="email" 直接 return '' 跳过
  • 若需动态排除(如编辑时跳过自身 ID),从 item.closest('form') 里找隐藏的 <input name="id">,把 ID 传给后端校验接口
  • 千万别在验证函数里写异步逻辑(如 setTimeout),form.verify 只认同步返回值

搜索功能上线前最易忽略的一点

所有手动过滤都依赖原始数据里的标记字段是否真实可靠——比如 LAY_DISABLED 是后端返回的,还是前端临时加的 class?如果后端没传这个字段,或字段名写成 is_disabled,前端过滤就全失效。上线前务必确认前后端字段命名和语义完全一致,且禁用状态由服务端权威决定,不能靠前端 JS 临时 patch。

热门AI工具

更多
Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

3140

2023.06.14

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

360

2023.08.31

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2953

2023.11.15

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1161

2024.09.24

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4616

2023.06.20

正则表达式不包含
正则表达式不包含

正则表达式,又称规则表达式,,是一种文本模式,包括普通字符和特殊字符,是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串,通常被用来检索、替换那些符合某个模式的文本。php中文网给大家带来了有关正则表达式的相关教程以及文章,希望对大家能有所帮助。

3101

2023.07.05

java正则表达式语法
java正则表达式语法

java正则表达式语法是一种模式匹配工具,它非常有用,可以在处理文本和字符串时快速地查找、替换、验证和提取特定的模式和数据。本专题提供java正则表达式语法的相关文章、下载和专题,供大家免费下载体验。

8642

2023.07.05

java正则表达式匹配字符串
java正则表达式匹配字符串

在Java中,我们可以使用正则表达式来匹配字符串。本专题为大家带来java正则表达式匹配字符串的相关内容,帮助大家解决问题。

812

2023.08.11

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

40

2026.10.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 13.1万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.4万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn