《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：
1.26 穿梭框组件transfer
模块加载名称：transfer。
1.26.1 快速使用
transfer组件可以进行数据的交互筛选。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div id="test1"></div>
<script>
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>
运行效果如图1-xx所示。
1.26.2 基础参数
目前transfer组件提供如图1-xx所示的基础参数，可根据需要进行相应的设置。
1.26.3 属性title
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div id="test1"></div>
<script>
var transfer = layui.transfer;
//渲染
transfer.render({
elem: '#test1', //绑定元素
title: ['标题1', '标题2'],
data: [{
"value": "1",
"title": "李白",
"disabled": "",
"checked": ""
}, {
"value": "2",
"title": "杜甫",
"disabled": "",
"checked": ""
}, {
"value": "3",
"title": "贤心",
"disabled": "",
"checked": ""
}],
id: 'demo1' //定义索引
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.26.4 属性value
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div id="test1"></div>
<script>
var transfer = layui.transfer;
//渲染
transfer.render({
elem: '#test1', //绑定元素
title: ['标题1', '标题2'],
data: [{
"value": "1",
"title": "李白",
"disabled": "",
"checked": ""
}, {
"value": "2",
"title": "杜甫",
"disabled": "",
"checked": ""
}, {
"value": "3",
"title": "贤心",
"disabled": "",
"checked": ""
}],
value: [2, 3],
id: 'demo1' //定义索引
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.26.5 属性showSearch
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div id="test1"></div>
<script>
var transfer = layui.transfer;
//渲染
transfer.render({
elem: '#test1', //绑定元素
title: ['标题1', '标题2'],
showSearch: true,
data: [{
"value": "1",
"title": "李白",
"disabled": "",
"checked": ""
}, {
"value": "2",
"title": "杜甫",
"disabled": "",
"checked": ""
}, {
"value": "3",
"title": "贤心",
"disabled": "",
"checked": ""
}],
id: 'demo1' //定义索引
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.26.6 属性width和height
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div id="test1"></div>
<script>
var transfer = layui.transfer;
//渲染
transfer.render({
elem: '#test1', //绑定元素
title: ['标题1', '标题2'],
data: [{
"value": "1",
"title": "李白",
"disabled": "",
"checked": ""
}, {
"value": "2",
"title": "杜甫",
"disabled": "",
"checked": ""
}, {
"value": "3",
"title": "贤心",
"disabled": "",
"checked": ""
}],
width: 500,
height: 500,
id: 'demo1' //定义索引
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.26.7 属性text
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div id="test1"></div>
<script>
var transfer = layui.transfer;
//渲染
transfer.render({
elem: '#test1', //绑定元素
title: ['标题1', '标题2'],
data: [],
showSearch: true,
text: {
none: '无数据', //没有数据时的文案
searchNone: '无匹配数据' //搜索无匹配数据时的文案
},
id: 'demo1' //定义索引
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.26.8 属性parseData
数据格式解析的回调函数，用于将任意数据格式解析成transfer组件规定的数据格式，如图1-xx所示的是合法的数据格式。
然而很多时候返回的数据格式可能并不符合规范，如图1-xx所示。
这时候需要使用属性parseData将其解析成transfer组件所规定的数据格式。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div id="test1"></div>
<script>
var transfer = layui.transfer;
//渲染
transfer.render({
elem: '#test1', //绑定元素
title: ['标题1', '标题2'],
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 //是否选中
}
},
id: 'demo1' //定义索引
});
</script>
</body>
</html>
1.26.9 左右穿梭的回调
当数据在左右穿梭时触发，回调返回当前被穿梭的数据。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div id="test1"></div>
<script>
var transfer = layui.transfer;
//渲染
transfer.render({
elem: '#test1', //绑定元素
title: ['标题1', '标题2'],
data: [{
"value": "1",
"title": "李白",
"disabled": "",
"checked": ""
}, {
"value": "2",
"title": "杜甫",
"disabled": "",
"checked": ""
}, {
"value": "3",
"title": "贤心",
"disabled": "",
"checked": ""
}],
onchange: function(data, index) {
console.log(data); //得到当前被穿梭的数据
console.log(index); //如果数据来自左边，index为0，否则为s1
},
id: 'demo1' //定义索引
});
</script>
</body>
</html>
1.26.10 基础方法
目前所开放的所有基础方法如图1-xx所示。
1.26.11 获得右侧数据
穿梭框的右侧数据通常被认为是选中数据，因此需要得到它并提交到后台。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div id="test1"></div>
<input type="button" id="mybutton" value="取值" />
<script>
var transfer = layui.transfer;
//渲染
transfer.render({
elem: '#test1', //绑定元素
title: ['标题1', '标题2'],
data: [{
"value": "1",
"title": "李白",
"disabled": "",
"checked": ""
}, {
"value": "2",
"title": "杜甫",
"disabled": "",
"checked": ""
}, {
"value": "3",
"title": "贤心",
"disabled": "",
"checked": ""
}],
id: 'demo1' //定义索引
});
$(document).ready(function() {
$("#mybutton").click(function() {
var getData = transfer.getData('demo1');
var test = "test";
});
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.26.12 重载
重载一个已经创建的组件实例，被覆盖新的基础属性。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div id="test1"></div>
<input type="button" id="mybutton" value="重载" />
<script>
var transfer = layui.transfer;
//渲染
transfer.render({
elem: '#test1', //绑定元素
title: ['标题1', '标题2'],
data: [{
"value": "1",
"title": "李白",
"disabled": "",
"checked": ""
}, {
"value": "2",
"title": "杜甫",
"disabled": "",
"checked": ""
}, {
"value": "3",
"title": "贤心",
"disabled": "",
"checked": ""
}],
id: 'demo1' //定义索引
});
$(document).ready(function() {
$("#mybutton").click(function() {
//可以重载所有基础参数
transfer.reload('demo1', {
title: ['新列表1', '新列表2']
});
});
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
