layui 穿梭框 layui.transfer

本文是自己对layui.transfer 穿梭框的基本使用总结，未涉及到的内容可以在layui.transfer官方文档中查找。下图为穿梭框的基本样式，效果还是不错的，能够满足系统中多种场景下的需求，它可以进行数据的交互筛选。

1、基础效果实现

2、数据源格式解析

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 //是否选中
    }
  }
});

3、初始化右侧数据

4、显示搜索框

5、左右穿梭的回调

6、获取右侧数据

  
  
  


  

  获取右侧数据
  
  

7、重新加载

  
  
  


  

  重新加载
  
  

8、基础参数一览表

参数选项	说明	类型	默认值
elem	指向容器选择器	String/Object	-
title	穿梭框上方标题	Array	['标题一', '标题二']
data	数据源	Array	[{'key','value'},{},{}]
parseData	用于对数据源进行格式解析	Function	,parseData: function(res){ return { "value": res.id //数据值 ,"title": res.name //数据标题 ,"disabled": res.disabled //是否禁用 ,"checked": res.checked //是否选中 } }
value	初始选中的数据（右侧列表）	Array	-
id	设定实例唯一索引，用于基础方法传参使用。	String	-
showSearch	是否开启搜索	Boolean	false
width	定义左右穿梭框宽度	Number	200
height	定义左右穿梭框高度	Number	340
text	自定义文本，如空数据时的异常提示等。 text: { none: '无数据' //没有数据时的文案 ,searchNone: '无匹配数据' //搜索无匹配数据时的文案 }	Object	-
onchange	左右数据穿梭时的回调	Function	function(obj, index){       var arr = ['左边', '右边'];       layer.alert('来自 '+ arr[index] + ' 的数据：'+ JSON.stringify(obj)); //获得被穿梭时的数据     }