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

Layui transfer穿梭框如何获取右侧已选数据

夏磊同学_1586

夏磊同学_1586

发布时间:2026-07-06 09:25:07

|

580人浏览过

|

来源于php中文网

原创

transfer.getData()返回对象数组,需用map提取value;done回调直接提供最新value数组,是监听右侧变化的唯一可靠方式。

transfer.getData() 返回的是对象数组,不是纯 value 数组

调用 transfer.getdata(id) 会返回右侧当前所有已选中项的完整对象(含 value、title、disabled 等字段),而不是你常需要的字符串 ["1", "2"] 形式。直接拿这个结果去提交表单或比对权限,大概率出错。

常见错误是写成:JSON.stringify(transfer.getData('myTransfer')),结果提交了一堆冗余字段,后端解析失败。

  • 正确提取纯 value:用 transfer.getData('myTransfer').map(item => item.value)
  • 注意:如果右侧为空,getData() 返回空数组 [],不是 null 或 undefined
  • 该方法不触发重绘,可安全在任何时机调用(比如按钮点击时)

想实时监听右侧变化?别用 onchange,用 done 回调

transfer.render 配置里的 done 是唯一稳定可用的响应点,它在每次左右移动、初始化、set() 后都会触发,并直接传入最新 value 字符串数组 —— 这才是你真正要的“右侧已选数据”。

很多人误绑 click 到箭头图标上,结果双击转移、全选转移都漏掉,且多次渲染后事件重复绑定。

  • done: function(value, elem) { console.log('当前右侧值:', value) } —— value 就是你要的数组
  • 不要在 done 里再调 getData(),纯属多余,还可能因 DOM 渲染延迟拿到旧值
  • 首次触发时 value 是初始化 value 配置项的值;后续每次都是真实最新状态

动态设置右侧数据后,getData() 仍需等 set 完成才准确

用 transfer.set(id, ['2', '4']) 更新右侧后,getData() 不会立刻反映新值 —— 实际上它同步返回,但 DOM 渲染有微小延迟。如果你紧接着做 UI 同步(比如更新隐藏域),可能看到旧状态。

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

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

下载

这不是 bug,而是组件内部异步渲染机制导致的视觉与数据轻微不同步。

  • 稳妥做法:把 set() 的参数当成“事实来源”,UI 状态按此反推,而非依赖 getData() 结果
  • 真要等 DOM 更新完:用 requestAnimationFrame(() => { /* 读取或操作 DOM */ })
  • 禁用项(disabled: true)会被 set() 自动过滤,即使你传进去也不会出现在右侧 —— 这是预期行为,不是 getData 失效

右侧 checkbox 点击事件不能靠 jQuery 直接监听

有人写 $('.layui-transfer-data input[type=checkbox]').on('change', ...) 想捕获单个勾选,这在多次 render() 后会失效,因为 DOM 被重建,事件绑定丢失;而且无法区分是用户点击还是程序 set() 触发的勾选。

更麻烦的是,Layui 内部用的是事件委托,原生 checkbox 的 change 并不总能准确冒泡到你绑的位置。

  • 唯一可靠路径:坚持用 done 回调,它覆盖所有变更入口(箭头、双击、全选、set)
  • 若必须响应单个点击(比如弹窗确认),应在 done 中比对前后 value 差异,找出新增/移除项
  • 不要碰 .layui-transfer-active 或 .layui-transfer-data 这类内部 class 做 DOM 遍历,版本升级可能改名

实际开发中最容易被忽略的,是 done 回调里那个 value 参数——它已经是你需要的最终结果,却总有人绕一圈再去调 getData(),既多一次遍历,又引入潜在延迟。

热门AI工具

更多
切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

UP简历
UP简历 Hot

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

LibLibAI
LibLibAI Hot

一款AI视频创作工具,主要用于国内领先的AI创意平台,以海量模型、低门槛操作与“创作-分享-商业化”生态,让小白与专业创作者都能高效实现图文乃至视频创意表达,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

WorkBuddy

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

豆包大模型

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

DeepSeek

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

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

相关专题

更多
ajax教程
ajax教程

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

2560

2023.06.14

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

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

340

2023.08.31

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

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

2393

2023.11.15

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

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

1141

2024.09.24

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

80

2026.09.30

LLVM RISC-V参数配置教程
LLVM RISC-V参数配置教程

本专题介绍LLVM对RISC-V基础ISA和扩展的支持方式,涵盖RV32、RV64、标准扩展、实验性扩展、厂商扩展、-menable-experimental-extensions和版本差异。

80

2026.09.30

LLVM IR中间表示入门指南
LLVM IR中间表示入门指南

本专题整理LLVM IR的核心概念,包括中间表示作用、模块结构、函数、基本块、SSA形式、类型系统和常见语法,帮助新手理解LLVM编译流程中的关键层。

40

2026.09.30

PDF转图片方法
PDF转图片方法

需要把 PDF 页面用于上传、预览、分享或图片归档时,PDF 转图片方法专题整理 JPG/PNG 格式选择、逐页导出、清晰度设置、批量下载和结果检查等流程,帮助用户稳定完成 PDF 图片化处理。

40

2026.09.30

PixTV AI视频生成与无限画布创作
PixTV AI视频生成与无限画布创作

PixTV专题整理AI视频与视觉内容创作相关功能使用教程,涵盖AI生图、视频生成、无限画布、多模型创作、素材管理、声音音乐及视频剪辑等功能,帮助用户快速掌握PixTV从创意到成片的完整制作方法。

60

2026.09.29

热门下载

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

精品课程

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

共87课时 | 12.7万人学习

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

共89课时 | 10.9万人学习

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

共5课时 | 1.6万人学习

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

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