10分钟上手layui数据传输transfer：左右穿梭框从入门到精通-优快云博客

10分钟上手layui数据传输transfer：左右穿梭框从入门到精通

【免费下载链接】layui 一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。项目地址: https://gitcode.com/GitHub_Trending/la/layui

你还在为数据选择交互繁琐而烦恼？用户抱怨操作太复杂？本文将带你掌握layui的transfer穿梭框组件，用最简单的方式实现左右数据交互，提升用户体验。读完本文，你将能够：快速创建基础穿梭框、自定义标题和数据源、设置初始选中项、添加搜索功能、处理数据变化事件，以及使用高级API进行实例操作。

什么是transfer穿梭框？

穿梭框组件transfer以左右栏checkbox列表为表现形式，可对列表进行选择并移动到另一栏。它是layui提供的一种直观高效的数据交互方式，适用于权限分配、人员选择、商品分类等多种场景。

官方文档：docs/transfer/index.md

快速开始：基础效果实现

只需几行代码，就能创建一个基础的穿梭框。以下是完整示例：

<div id="ID-transfer-demo"></div>

<!-- 引入layui -->
<script>
layui.use(function(){
  var transfer = layui.transfer;

  // 数据源
  var data = [
    {"value": "1", "title": "李白"},
    {"value": "2", "title": "杜甫"},
    {"value": "3", "title": "苏轼"},
    {"value": "4", "title": "李清照"},
    {"value": "5", "title": "文人", "disabled": true},
    {"value": "6", "title": "巴金"},
    {"value": "7", "title": "冰心"},
    {"value": "8", "title": "矛盾"},
    {"value": "9", "title": "贤心"}
  ];

  // 渲染穿梭框
  transfer.render({
    elem: '#ID-transfer-demo',  // 绑定元素
    data: data  // 数据源
  });
});
</script>

示例代码来源：docs/transfer/detail/demo.md

核心配置：自定义你的穿梭框

定义标题及尺寸

通过title属性自定义左右面板标题，width和height设置尺寸：

transfer.render({
  elem: '#ID-transfer-demo-title',
  title: ['候选文人', '获奖文人'],  // 自定义标题
  data: data,
  width: 150,  // 宽度
  height: 210  // 高度
});

设置初始右侧数据

使用value属性指定初始时右侧面板的数据（通过value值匹配）：

transfer.render({
  elem: '#ID-transfer-demo-value',
  data: data,
  value: ["1", "3", "5", "7", "9", "11"]  // 初始右侧数据的value集合
});

添加搜索功能

设置showSearch: true开启搜索框，支持模糊匹配：

transfer.render({
  elem: '#ID-transfer-demo-showSearch',
  data: data,
  title: ['文人墨客', '获奖文人'],
  showSearch: true  // 开启搜索
});

数据格式与解析

标准数据格式

transfer组件要求的标准数据格式如下：

属性名	描述	类型	默认值
title	数据标题	string	-
value	数据值	string	-
checked	是否选中状态	boolean	false
disabled	是否禁用状态	boolean	false

详细说明：docs/transfer/detail/options.data.md

解析非标准数据

如果你的数据源格式不符合标准，可以使用parseData进行转换：

transfer.render({
  elem: '#ID-transfer-demo-parseData',
  parseData: function(res){
    return {
      "value": res.id,       // 映射数据值
      "title": res.name,     // 映射数据标题
      "disabled": res.disabled,  // 映射禁用状态
      "checked": res.checked     // 映射选中状态
    }
  },
  data: [  // 非标准格式数据
    {"id": "1", "name": "李白"},
    {"id": "2", "name": "杜甫"},
    {"id": "3", "name": "苏轼"}
  ],
  height: 150
});

事件处理：响应数据变化

监听穿梭事件

使用onchange回调函数，在数据穿梭时触发：

transfer.render({
  elem: '#ID-transfer-demo-onchange',
  data: data,
  onchange: function(obj, index){
    var arr = ['左边', '右边'];
    // obj为当前被穿梭的数据，index为来源（0：左边，1：右边）
    console.log('来自 ' + arr[index] + ' 的数据：', obj);
  }
});

双击事件处理（2.9.3+）

2.9.3版本新增dblclick事件，支持双击穿梭功能：

transfer.render({
  elem: '#ID-transfer-demo',
  data: data,
  dblclick: function(obj){
    console.log(obj.data); // 点击项的数据
    console.log(obj.index); // 0：左边，1：右边
    
    // return false; // 可阻止穿梭
  }
});

高级操作：API方法详解

获取实例与重载

为穿梭框设置id属性，可通过API进行后续操作：

// 渲染时指定id
transfer.render({
  elem: '#ID-transfer-demo-inst',
  data: data,
  id: 'demo-inst'  // 定义唯一索引
});

// 获取右侧数据
var getData = transfer.getData('demo-inst');

// 重载实例
transfer.reload('demo-inst', {
  title: ['文人', '喜欢的文人'],
  value: ['2', '5', '9'],
  showSearch: true
});

常用API方法

API	描述
var transfer = layui.transfer	获得`transfer`模块
transfer.render(options)	渲染穿梭框，核心方法
transfer.reload(id, options)	重载指定id的实例
transfer.getData(id)	获取指定id实例的右侧数据
transfer.set(options)	设置全局默认属性

完整API文档：docs/transfer/index.md

实际应用场景

权限分配

使用穿梭框实现角色权限分配，左侧显示所有权限，右侧显示已选权限，直观高效。

商品分类

在电商后台中，可用于将商品从一个分类移动到另一个分类，支持批量操作。

人员选择

在会议安排或任务分配场景中，通过穿梭框快速选择参与人员。

总结与注意事项

数据格式：确保数据源格式正确，或使用parseData进行转换
性能优化：数据量大时建议开启搜索功能，提升用户体验
版本兼容：双击事件dblclick需要layui 2.9.3+版本支持
样式调整：可通过CSS自定义穿梭框样式，如宽度、高度、颜色等

掌握transfer穿梭框，让你的数据交互更简单直观。如果觉得本文有用，别忘了点赞收藏，关注我们获取更多layui实用教程！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考