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

Layui穿梭框如何实现搜索过滤后的结果一键全选

落宇小哥_3197

落宇小哥_3197

发布时间:2026-05-16 11:30:20

|

800人浏览过

|

来源于php中文网

原创

开启showSearch后全选按钮仅作用于可见项,因隐藏项无DOM节点;需通过transfer.set({id:xxx,value:true})遍历原始数据手动设置选中状态。

transfer.render 中 showSearch 开启后,全选按钮失效的真相

默认开启 showsearch 后,layui 穿梭框的“全选”按钮(左栏顶部复选框)只对当前可见项生效——但搜索过滤后的隐藏项不会被纳入选中范围,用户点“全选”,实际只勾了没被过滤掉的那几条。这不是 bug,是设计逻辑:layui 的全选动作绑定在渲染后的 dom 节点上,而被 ishidden = true 的项根本没生成 checkbox 元素。

用 transfer.getData() + 手动设置 checked 状态绕过 DOM 限制

真正要实现“搜索后全选所有原始数据”,不能依赖界面按钮,得跳过 UI 层,直接操作数据源和组件状态:

  • transfer.getData() 只返回右侧已选数据,不适用;要用 transfer.config 拿到初始化时传入的原始 data 数组
  • 遍历原始数据,把每个 id 显式调用 transfer.set({id: xxx, value: true})(注意:value 是布尔值,不是字符串)
  • 必须在搜索触发后的回调里执行,比如监听 transfer.on('search') 或在自定义搜索输入的 keyup 后延时处理

formSelects-v4 的 cumHandle 逻辑不能直接套用到 transfer

你看到的 cumHandle('product', formSelects) 是为 formSelects(第三方扩展)写的过滤修复,它重写了 filter 钩子并控制 isHidden 字段。但 transfer 组件没有公开的 filter 钩子,也没有 isHidden 的写入接口——它的过滤是纯 DOM 显示控制,无法通过 JS 数据标记干预。强行复制该逻辑会无效,甚至引发重复渲染异常。

最简可行方案:加一个自定义“全选原始数据”按钮

别改穿梭框原生全选行为,另起一个按钮更可控、更易维护:

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

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

下载
layui.use(['transfer', 'jquery'], function(){
  var transfer = layui.transfer, $ = layui.jquery;
  var ins = transfer.render({
    elem: '#test-transfer',
    data: [{id:1,title:'A'},{id:2,title:'B'},...],
    showSearch: true,
    title: ['待选','已选']
  });

  // 自定义按钮点击事件
  $('#btn-select-all-raw').on('click', function(){
    var rawData = ins.config.data; // 拿到原始数据
    $.each(rawData, function(i, item){
      transfer.set({id: item.id, value: true});
    });
  });
});

这个方案不破坏原有交互,用户能明确区分“选当前显示”和“选全部原始项”,也避免了在搜索态下误操作导致数据错乱。

关键点在于:Layui 的 transfer 没有提供“搜索后全选原始集”的快捷 API,所有试图魔改内部过滤逻辑的尝试,都会撞上它不暴露数据过滤中间态的底层限制。

热门AI工具

更多
WorkBuddy

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

豆包大模型

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

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

UP简历
UP简历 Hot

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

火山引擎

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

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

DeepSeek

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

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

相关专题

更多
ajax教程
ajax教程

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

2820

2023.06.14

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

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

360

2023.08.31

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

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

2633

2023.11.15

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

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

1161

2024.09.24

Revel框架入门与安装配置
Revel框架入门与安装配置

本专题从Revel框架环境搭建讲起,系统介绍命令行工具安装、项目创建、目录结构、配置文件及热代码重载,帮助开发者快速完成首个Go Web应用。

0

2026.10.16

Linux 新手先学哪些命令
Linux 新手先学哪些命令

Linux新手命令专题汇集终端基础、文件目录操作、文本查看、软件安装和权限管理等入门文章,帮助按实际任务练习常用命令并建立命令行操作习惯。

0

2026.10.15

MySQL 忘记密码怎么办
MySQL 忘记密码怎么办

MySQL忘记密码专题汇集不同版本与系统下的root密码重置方法,覆盖MySQL 5.7、8.0、Mac、Linux及本地集成环境,并提示恢复权限与重新登录的检查步骤。

0

2026.10.15

Vue.js 中 ref 和 reactive 的区别
Vue.js 中 ref 和 reactive 的区别

Vue.js中ref和reactive的区别专题汇集两种响应式API的定义、访问方式、对象解构、侦听与性能取舍等文章,帮助结合实际状态类型选择合适写法。

0

2026.10.15

VS Code 怎么配置开发环境
VS Code 怎么配置开发环境

VS Code开发环境专题汇集编辑器安装、语言扩展、编译器、解释器、终端和调试配置文章,覆盖Java、Python、C++和PHP等常见语言的入门设置。

0

2026.10.15

热门下载

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

精品课程

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

共87课时 | 12.9万人学习

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

共89课时 | 11.1万人学习

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

共5课时 | 1.6万人学习

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

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