搜索组件模块
grid 栅格布局
layout admin 布局
color 颜色
iconfont 字体图标
font 字体大小 颜色
animation 动画
button 按钮
form 表单组
input 输入框
select 下拉选择框
checkbox 复选框
switch 开关
radio 单选框
textarea 文本域
nav 导航菜单
menu 基础通用菜单
breadcrumb 面包屑
tabs 选项卡
progress 进度条
panel 面板 / card
collapse 折叠面板/手风琴
table 表格元素
badge 徽章
timeline 时间线
blockquote 引用块
fieldset 字段集
hr 分割线
layer 弹出层/弹窗综合
laydate 日期时间选择器
laypage 分页
laytpl 模板引擎
table 数据表格
form 表单模块
upload 文件/图片上传
dropdown 下拉菜单
contextmenu 右键菜单
transfer 穿梭框
tree 树形菜单
colorpicker 颜色选择器
element 常用元素操作
slider 滑块
rate 评分
carousel 轮播/跑马灯
layedit 富文本编辑器
flow 信息流/图片懒加载
util 工具集
code 代码文本行修饰
layim
layuiadmin
-

穿梭框组件文档 - 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 是否开启搜索 Boolean false
width 定义左右穿梭框宽度 Number 200
height 定义左右穿梭框高度 Number 340
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 - 在每一个细节中,用心与你沟通