← 返回首页

穿梭框组件文档 - Layui

📁 <Category 22> 📅 2026-04-04 13:39:57 👁️ 4 次阅读
<Tag 15> <Tag 82>

📖 正文内容


穿梭框组件文档 - layui.transfer

穿梭框组件的初衷来源于 layui 社区的扩展组件平台，并且在 layui 2.5.0 的版本中开始登场。其适用的业务场景多样，不妨一试。
模块加载名称：transfer
快速使用
transfer 组件可以进行数据的交互筛选

layui.transfer小例子code

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>穿梭框组件</title>
  6. <link rel="stylesheet" href="../src/css/layui.css">
  7. </head>
  8. <body>
  9. <div id="test1"></div>
  10. <script src="../src/layui.js"></script>
  11. <script>
  12. layui.use('transfer', function(){
  13. var transfer = layui.transfer;
  14. //渲染
  15. transfer.render({
  16. elem: '#test1' //绑定元素
  17. ,data: [
  18. {"value": "1", "title": "李白", "disabled": "", "checked": ""}
  19. ,{"value": "2", "title": "杜甫", "disabled": "", "checked": ""}
  20. ,{"value": "3", "title": "贤心", "disabled": "", "checked": ""}
  21. ]
  22. ,id: 'demo1' //定义索引
  23. });
  24. });
  25. </script>
  26. </body>
  27. </html>
基础参数
目前 transfer 组件提供以下基础参数，可根据需要进行相应的设置
参数选项说明类型默认值
elem指向容器选择器String/Object-
title穿梭框上方标题Array['标题一', '标题二']
data数据源Array[{}, {}, …]
parseData用于对数据源进行格式解析Function详见数据源格式解析
value初始选中的数据（右侧列表）Array-
id设定实例唯一索引，用于基础方法传参使用。String-
showSearch是否开启搜索Booleanfalse
width定义左右穿梭框宽度Number200
height定义左右穿梭框高度Number340
text
自定义文本，如空数据时的异常提示等。

</>code

  1. text: {
  2. none: '无数据' //没有数据时的文案
  3. ,searchNone: '无匹配数据' //搜索无匹配数据时的文案
  4. }
Object-
onchange左右数据穿梭时的回调Function详见穿梭时的回调

数据源格式解析
数据格式解析的回调函数，用于将任意数据格式解析成 transfer 组件规定的数据格式，以下是合法的数据格式如下：

合法的数据格式code

  1. [
  2. {"value": "1", "title": "李白", "disabled": "", "checked": ""}
  3. ,{"value": "2", "title": "杜甫", "disabled": "", "checked": ""}
  4. ,{"value": "3", "title": "贤心", "disabled": "", "checked": ""}
  5. ]
然而很多时候你返回的数据格式可能并不符合规范，比如：

不符合规范的数据格式code

  1. [
  2. {"id": "1", "name": "李白"}
  3. ,{"id": "2", "name": "杜甫"}
  4. ,{"id": "3", "name": "贤心"}
  5. ]
那么您需要将其解析成 transfer 组件所规定的数据格式：

codecode

  1. transfer.render({
  2. elem: '#text1'
  3. ,data: [
  4. {"id": "1", "name": "李白"}
  5. ,{"id": "2", "name": "杜甫"}
  6. ,{"id": "3", "name": "贤心"}
  7. ]
  8. ,parseData: function(res){
  9. return {
  10. "value": res.id //数据值
  11. ,"title": res.name //数据标题
  12. ,"disabled": res.disabled //是否禁用
  13. ,"checked": res.checked //是否选中
  14. }
  15. }
  16. });
左右穿梭的回调
当数据在左右穿梭时触发，回调返回当前被穿梭的数据

例子code

  1. transfer.render({
  2. elem: '#text'
  3. ,data: [] //数据源
  4. ,onchange: function(data, index){
  5. console.log(data); //得到当前被穿梭的数据
  6. console.log(index); //如果数据来自左边，index 为 0，否则为 1
  7. }
  8. });
基础方法
基础用法是组件关键组成部分，目前所开放的所有方法如下：

</>code

  1. var transfer = layui.transfer;
  2. transfer.set(options); //设定全局默认参数。options 即各项基础参数
  3. transfer.getData(id); //获得右侧数据
  4. transfer.reload(id, options); //重载实例
获得右侧数据
穿梭框的右侧数据通常被认为是选中数据，因此你需要得到它并提交到后台。

例子code

  1. transfer.render({
  2. elem: '#test'
  3. ,data: []
  4. ,id: 'demo1' //定义索引
  5. });
  6. //获得右侧数据
  7. var getData = transfer.getData('demo1');
实例重载
重载一个已经创建的组件实例，被覆盖新的基础属性

例子code

  1. transfer.render({
  2. elem: '#test'
  3. ,data: []
  4. ,id: 'demo1' //定义索引
  5. });
  6. //可以重载所有基础参数
  7. transfer.reload('demo1', {
  8. title: ['新列表1', '新列表2']
  9. });
结语
穿梭框组件极易上手，在浩瀚的业务需求中，值得一用。
layui - 在每一个细节中，用心与你沟通

💡 示例代码

None

💭 技巧提示

💡
None

📚 参考资料

🔗 相关文章

CSS3动画类文档 - Layui

Layui框架

CSS3动画类 在实用价值的前提之下，我们并没有内置过多花俏的动画。而他们同样在 layui 的许多交互元素中，发挥着重要的作用。layui 的动画全部采用 CSS3，因此不支持 ie8 和部分不支持 ie9。 动画的使用非常简单，直接对元素赋值动画特定的 class 类名即可。如： </>code其中 layui-anim 是必须的，后面跟着的即是不同的动画类<div class="layui-...

2026-04-04
Layui CSS3动画类文档

element模块元素操作文档 - Layui

Python 基础

 常用元素操作 - layui.element页面中有许多元素需要自动去完成一些处理，譬如导航菜单的小滑块、Tab 的切换等操作，他们往往不需要去单独调用一个方法来开启一项功能，而页面上恰恰有太多这样的小交互，所以我们统一归类为 element 组件。模块加载名称：element使用元素功能的开启只需要加载element模块即会自动完成，所以不用跟其它模块一样为某一个功能而调用一个方法。她只需要...

2026-04-04
Layui

layer弹层组件开发文档 - Layui

Layui框架

 弹层组件文档 - layui.layerlayer 至今仍作为 layui 的代表作，它的受众广泛并非偶然，而是这数年来的坚持、不弃的执念，将那些不屑的眼光转化为应得的尊重，不断完善和维护、不断建设和提升社区服务，在 Web 开发者的圈子里口口相传，乃至于成为今天的 layui 最强劲的源动力。目前，layer 已然成为网页弹出层的首选交互方案，几乎随处可见。模块加载名称：layer，独立版本...

2026-04-04
Layui

💬 评论交流

👤
用户 A 2026-03-25

这个技巧很实用，感谢分享！