穿梭框组件文档 - layui.transfer

穿梭框组件的初衷来源于 layui 社区的扩展组件平台,并且在 layui 2.5.0 的版本中开始登场。其适用的业务场景多样,不妨一试。
模块加载名称:transfer
快速使用

transfer 组件可以进行数据的交互筛选

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>穿梭框组件</title>
  <link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>
  <div id="test1"></div>
  <script src="../src/layui.js"></script>
  <script>
  layui.use('transfer', function(){
    var transfer = layui.transfer;
   
    //渲染
    transfer.render({
      elem: '#test1'  //绑定元素
      ,data: [
        {"value": "1", "title": "李白", "disabled": "", "checked": ""}
        ,{"value": "2", "title": "杜甫", "disabled": "", "checked": ""}
        ,{"value": "3", "title": "贤心", "disabled": "", "checked": ""}
      ]
      ,id: 'demo1' //定义索引
    });
  });
  </script>
</body>
</html>
      
基础参数

目前 transfer 组件提供以下基础参数,可根据需要进行相应的设置

参数选项 说明 类型 默认值
elem 指向容器选择器 String/Object -
title 穿梭框上方标题 Array ['标题一', '标题二']
data 数据源 Array [{}, {}, …]
parseData 用于对数据源进行格式解析 Function 详见数据源格式解析
value 初始选中的数据(右侧列表) Array -
id 设定实例唯一索引,用于基础方法传参使用。 String -
showSearch 是否开启搜索。支持以下值:
false(不开启搜索,默认)
true (开启搜索,则开启搜索且不区分大小写)
'cs' (开启搜索,且区分大小写)
注:上述调整为 v2.7.6 新增。之前版本只有只有 true 和 false 值,且区分大小写
Boolean/String false
width 定义左右穿梭框宽度 Number 200
height 定义左右穿梭框高度 Number 340
text 自定义文本,如空数据时的异常提示等。
text: {
  none: '无数据' //没有数据时的文案
  ,searchNone: '无匹配数据' //搜索无匹配数据时的文案
}             
              
Object -
onchange 左右数据穿梭时的回调 Function 详见穿梭时的回调
数据源格式解析

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

[
  {"value": "1", "title": "李白", "disabled": "", "checked": ""}
  ,{"value": "2", "title": "杜甫", "disabled": "", "checked": ""}
  ,{"value": "3", "title": "贤心", "disabled": "", "checked": ""}
]
      

然而很多时候你返回的数据格式可能并不符合规范,比如:

[
  {"id": "1", "name": "李白"}
  ,{"id": "2", "name": "杜甫"}
  ,{"id": "3", "name": "贤心"}
]
      

那么您需要将其解析成 transfer 组件所规定的数据格式:

transfer.render({
  elem: '#text1'
  ,data: [
    {"id": "1", "name": "李白"}
    ,{"id": "2", "name": "杜甫"}
    ,{"id": "3", "name": "贤心"}
  ]
  ,parseData: function(res){
    return {
      "value": res.id //数据值
      ,"title": res.name //数据标题
      ,"disabled": res.disabled  //是否禁用
      ,"checked": res.checked //是否选中
    }
  }
});
      
左右穿梭的回调

当数据在左右穿梭时触发,回调返回当前被穿梭的数据

transfer.render({
  elem: '#text'
  ,data: [] //数据源
  ,onchange: function(data, index){
    console.log(data); //得到当前被穿梭的数据
    console.log(index); //如果数据来自左边,index 为 0,否则为 1
  }
});
      
基础方法

基础用法是组件关键组成部分,目前所开放的所有方法如下:

var transfer = layui.transfer;
 
transfer.set(options); //设定全局默认参数。options 即各项基础参数
transfer.getData(id); //获得右侧数据
transfer.reload(id, options); //重载实例
    
获得右侧数据

穿梭框的右侧数据通常被认为是选中数据,因此你需要得到它并提交到后台。

transfer.render({
  elem: '#test'
  ,data: []
  ,id: 'demo1' //定义索引
});
 
//获得右侧数据
var getData = transfer.getData('demo1'); 
      
实例重载

重载一个已经创建的组件实例,被覆盖新的基础属性

transfer.render({
  elem: '#test'
  ,data: []
  ,id: 'demo1' //定义索引
});
 
 //可以重载所有基础参数
transfer.reload('demo1', {
  title: ['新列表1', '新列表2']
});
      
结语

穿梭框组件极易上手,在浩瀚的业务需求中,值得一用。

layui - 在每一个细节中,用心与你沟通