前言
本章给大家介绍的layui的穿梭框组件。
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>基础参数
| 设定实例唯一索引，用于基础方法传参使用。~elem | 指向容器选择器 |
|---|---|
| title | 穿梭框上方标题 |
| data | 数据源 |
| parseData | 用于对数据源进行格式解析 |
| value | 初始选中的数据（右侧列表） |
| id | 设定实例唯一索引，用于基础方法传参使用。 |
| showSearch | 是否开启搜索 |
| width | 定义左右穿梭框宽度 |
| height | 定义左右穿梭框高度 |
| text | 自定义文本，如空数据时的异常提示等。 |
| onchange | 左右数据穿梭时的回调 |
数据源格式解析
数据格式解析的回调函数，用于将任意数据格式解析成 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); //重载实例1.获得右侧数据
穿梭框的右侧数据通常被认为是选中数据，因此你需要得到它并提交到后台。
transfer.render({
elem: '#test' ,
data: [] ,
id: 'demo1' //定义索引}); //获得右侧数据var getData = transfer.getData('demo1'); 2.实例重载
重载一个已经创建的组件实例，被覆盖新的基础属性
transfer.render({
elem: '#test' ,
data: [] ,
id: 'demo1' //定义索引}); //可以重载所有基础参数
transfer.reload('demo1', {
title: ['新列表1', '新列表2']
});实例调用效果图：
本章就分享到这，如果有疑问评论区请留言！