Layui穿梭框如何动态更新右侧选中的数据

雨晨大大_8643

雨晨大大_8643

2026-06-20

762人浏览

原创

transfer.render 后无法直接修改 value 属性,必须通过 transfer.set(id, valueArr) 更新右侧数据,id 需与初始化时一致,valueArr 须为合法字符串数组且值存在于原始 data 中。

transfer.render 后无法直接修改 value 属性

渲染完成后,transfer.render 返回的实例不提供 setvalue 或类似方法;你不能通过重新设置 value 选项来“刷新”右侧数据。这是初学者最常误踩的点——以为改了配置对象里的 value 数组再调用一次 render 就能更新,实际会报错或无反应,因为 render 是一次性初始化操作,重复调用会导致 dom 冲突或实例重复注册。

正确做法:用 transfer.getData() + transfer.set()

transfer.getData() 只读取当前右侧已选中的原始数据项(含 value、title 等字段),但它不返回纯 value 字符串数组;你需要自己提取。而真正用于“写入”的是 transfer.set() 方法,它接受一个字符串数组作为新右侧值列表:

  • transfer.set(id, valueArr) 中 id 必须与初始化时传入的 id 参数完全一致(不是 DOM ID,是配置里的 id: 'demo1')
  • valueArr 必须是字符串数组,如 ["2", "4"],且每个值必须存在于原始 data 的 value 字段中
  • 调用前确保 layui.transfer 模块已加载,且 set 方法在 layui 2.5.0+ 才可用

示例:

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

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

下载
const transfer = layui.transfer;
transfer.render({
  elem: '#test1',
  data: [
    {"value": "1", "title": "李白"},
    {"value": "2", "title": "杜甫"},
    {"value": "3", "title": "苏轼"}
  ],
  id: 'authorTransfer' // 注意这个 id,后面 set 时必须用它
});

// 后续动态设右侧为 ["2", "3"]
transfer.set('authorTransfer', ["2", "3"]);

监听 onchange 并做副作用处理时别漏掉异步时机

onchange 回调触发时,DOM 更新尚未完成,如果你立即调用 transfer.getData(),可能拿到旧值。尤其在快速连续点击穿梭按钮时容易出错:

  • 不要在 onchange 里直接依赖 getData() 结果做 UI 同步(比如更新隐藏域)
  • 需要确保 DOM 渲染完毕,可用 setTimeout(() => { ... }, 0) 或 requestAnimationFrame 包裹
  • 更稳妥的做法是:把 onchange 当作“意图通知”,实际数据以 set 调用为准,UI 状态从 set 的参数反推

禁用项(disabled)会影响 set 行为

如果原始 data 中某条目设置了 "disabled": "true",即使你把它包含在 set() 的数组里,它也不会出现在右侧面板中——组件会静默过滤掉。这不是 bug,是设计行为。

  • 检查原始数据中是否误加了 disabled 字段(空字符串 "" 是允许的,但 "true" 或 true 会被识别为禁用)
  • 动态更新前,建议先用 transfer.getData('authorTransfer') 拿全量右侧数据,再比对你要 set 的数组,提前剔除非法项
  • 注意:Layui 不校验 set 数组是否全在 data 中,缺失的 value 会被忽略,也不报错
动态更新右侧数据的关键不在“怎么赋值”,而在“什么时候赋、用什么方式赋、赋之前有没有校验原始约束”。set() 是唯一可靠入口,但它的有效性完全依赖初始化时的 id 和原始 data 结构一致性。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

layui

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
ajax教程
ajax教程

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

2023.06.14

2620

4

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

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

2023.08.31

340

5

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

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

2023.11.15

2453

5

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

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

2024.09.24

1141

6

FrankenPHP集成Laravel详细教程
FrankenPHP集成Laravel详细教程

本专题提供FrankenPHP集成Laravel的详细配置指南,全面解析运行原理、开发环境搭建、Caddyfile配置、Octane工作模式、数据库连接、队列任务、定时任务和生产环境优化,解决部署过程中常见的报错与兼容性问题。

2026.10.08

0

20

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

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

2026.09.30

120

10

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

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

2026.09.30

100

14

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

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

2026.09.30

80

12

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

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

2026.09.30

80

26

热门下载

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

精品课程

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

共87课时 | 12.7万人学习

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

共89课时 | 11万人学习

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

共5课时 | 1.6万人学习