- 快速使用
- 基础参数
- 数据源格式解析
- 左右穿梭的回调
- 基础方法

- 获得右侧数据
- 实例重载

-

# 穿梭框组件文档 - 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 | 是否开启搜索 | Boolean | 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 - 在每一个细节中，用心与你沟通