穿梭框组件文档 - 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 - 在每一个细节中，用心与你沟通