穿梭框组件

穿梭框组件 transfer 以左右栏 checkbox 列表为表现形式，可对列表进行选择并移动到另一栏。

示例

  <div id="ID-transfer-demo"></div>
<!-- import 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>

定义标题及数据源

  <div id="ID-transfer-demo-title"></div>
<!-- import 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-title',
    title: ['候选文人', '获奖文人'],  //自定义标题
    data: data,
    // width: 150, // 定义宽度
    height: 210 // 定义高度
  });
});
</script>

初始右侧数据

  <div id="ID-transfer-demo-value"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var transfer = layui.transfer;
  // 数据
  var data = [
    {"value": "1", "title": "瓦罐汤"},
    {"value": "2", "title": "油酥饼"},
    {"value": "3", "title": "炸酱面"},
    {"value": "4", "title": "串串香", "disabled": true},
    {"value": "5", "title": "豆腐脑"},
    {"value": "6", "title": "驴打滚"},
    {"value": "7", "title": "北京烤鸭"},
    {"value": "8", "title": "烤冷面"},
    {"value": "9", "title": "毛血旺", "disabled": true},
    {"value": "10", "title": "肉夹馍"},
    {"value": "11", "title": "臊子面"},
    {"value": "12", "title": "凉皮"},
    {"value": "13", "title": "羊肉泡馍"},
    {"value": "14", "title": "冰糖葫芦", "disabled": true},
    {"value": "15", "title": "狼牙土豆"}
  ];
  // 渲染
  transfer.render({
    elem: '#ID-transfer-demo-value',
    data: data,
    value: ["1", "3", "5", "7", "9", "11"]
  });
});
</script>

显示搜索框

  <div id="ID-transfer-demo-showSearch"></div>
<!-- import 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-showSearch',
    data: data,
    title: ['文人墨客', '获奖文人'],
    showSearch: true
  });
});
</script>

数据格式解析

  <div id="ID-transfer-demo-parseData"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var transfer = layui.transfer;
  // 渲染
  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
  });
});
</script>

穿梭时的回调

  <div id="ID-transfer-demo-onchange"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var transfer = layui.transfer;
  var layer = layui.layer;
  // 数据
  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-onchange',
    data: data,
    onchange: function(obj, index){
      var arr = ['左边', '右边'];
       // 查看被穿梭时的数据 --  仅用于演示
      layer.alert('来自 <strong>'+ arr[index] + '</strong> 的数据：'+ JSON.stringify(obj));
    }
  });
});
</script>

实例调用

  <div class="layui-btn-container">
  <button type="button" class="layui-btn" lay-on="getData">获取右侧数据</button>
  <button type="button" class="layui-btn" lay-on="reload">重载实例</button>
</div>
<div id="ID-transfer-demo-inst"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var transfer = layui.transfer;
  var util = layui.util;
  var layer = layui.layer;
  // 数据
  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-inst',
    data: data,
    id: 'demo-inst' // 定义唯一索引
  });
  // 批量事件
  util.on('lay-on', {
    getData: function(othis){
      var getData = transfer.getData('demo-inst'); // 获取右侧数据
      layer.alert(JSON.stringify(getData)); 
    },
    reload:function(){
      //实例重载
      transfer.reload('demo-inst', {
        title: ['文人', '喜欢的文人'],
        value: ['2', '5', '9'],
        showSearch: true
      })
    }
  });
});
</script>

API

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

渲染

transfer.render(options);

参数 options : 基础属性配置项。#详见属性

属性

属性名	描述	类型	默认值
elem	绑定元素选择器或 DOM 对象	string/DOM	-
title	穿梭框左右面板头部标题	array
data	穿梭框的数据源。格式详见：#data 格式	array	-
value	初始选中的数据（右侧列表）	array	-
id	设置实例唯一索引，用于其他方法传参使用。	string	-
showSearch	是否开启搜索。支持以下可选值： `false` 不开启搜索（默认） `true` 开启搜索，且匹配时不区分大小写 `cs` 开启搜索，且匹配时区分大小写 ^2.7+	boolean string	`false`
width	定义左右穿梭框宽度	number	`200`
height	定义左右穿梭框高度	number	`360`
text	自定义默认文本， `object` 类型。支持以下属性： `text: { none: '无数据', // 没有数据时的文案 searchNone: '无匹配数据' // 搜索无匹配数据时的文案 }`
回调函数
onchange	左右穿梭时的回调函数。返回的参数如下： `onchange: function(data, index){ console.log(data); // 得到当前被穿梭的数据 console.log(index); // 如果数据来自左边，index 为 0，否则为 1 }`	boolean	`false`
dblclick ^2.9.3+	双击时的回调函数。返回的参数如下： `dblclick: function(obj){ console.log(obj.elem); // 点击的元素 console.log(obj.data); // 得到点击项的数据 console.log(obj.index); // 如果数据来自左边，index 为 0，否则为 1 return false // 返回 false 会阻止穿梭 }`	function	`null`
parseData	数据格式解析的回调函数，用于将返回的任意数据格式解析成 transfer 组件规定的 data 格式 `transfer.render({ elem: '', data: [ // 任意数据 {"id": "1", "name": "李白"}, {"id": "2", "name": "杜甫"}, {"id": "3", "name": "贤心"} ], parseData: function(res){ // 解析成规定的 data 格式 return { "value": res.id, // 数据值 "title": res.name, // 数据标题 "disabled": res.disabled, // 是否禁用 "checked": res.checked // 是否选中 }; } });`

data 格式

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

重载

transfer.reload(id, options);

参数 id : 对应渲染时定义的 id 属性值
参数 options : 基础属性配置项。#详见属性

var transfer = layui.transfer;
// 渲染
transfer.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 重载
transfer.reload('test', { // options
  title: ['title 1', 'title 2']
});

获得右侧数据

transfer.getData(id);

参数 id : 对应渲染时定义的 id 属性值

穿梭框的右侧数据通常被认为是选中数据，因此你需要得到它，并进行提交等操作。

var transfer = layui.transfer;
// 渲染
transfer.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 获得右侧数据
var getData = transfer.getData('test');

设置全局默认属性

transfer.set(options);

参数 options : 基础属性配置项。#详见属性

该方法对所有的 transfer 实例有效，设置的属性优先级低于 transfer.render(options)

// 设置 transfer 全局默认属性
transfer.set({
  height: 'auto', // 所有穿梭框默认高度为自动
  // …
});