1. transfer组件可以进行数据的交互筛选。模块加载名称: transfer。
2. 基础参数
2.1. 目前transfer组件提供以下基础参数, 可根据需要进行相应的设置:
3. 数据源格式解析的回调函数 - parseData
3.1. 用于将任意数据格式解析成transfer组件规定的数据格式, 以下是合法的数据格式如下:
[
{"value": "1", "title": "李白", "disabled": "", "checked": ""}
,{"value": "2", "title": "杜甫", "disabled": "", "checked": "true"}
,{"value": "3", "title": "李清照", "disabled": true, "checked": ""}
,{"value": "4", "title": "李冶", "disabled": "", "checked": ""}
,{"value": "5", "title": "薛涛", "disabled": "", "checked": ""}
,{"value": "6", "title": "刘采春", "disabled": "", "checked": ""}
]
3.2. 然而很多时候你返回的数据格式可能并不符合规范, 那么您需要将其解析成transfer组件所规定的数据格式:
<script type="text/javascript">
layui.use(['transfer'], function() {
var transfer = layui.transfer;
// 渲染
transfer.render({
elem: '#test1' // 指向容器选择器
,title: ['诗人', '女诗人'] // 穿梭框上方标题
,id: 'poet-transfer' // 设定实例唯一索引, 用于基础方法传参使用
,data: [
{"value": "1", "title": "李白", "disabled": "", "checked": ""}
,{"value": "2", "title": "杜甫", "disabled": "", "checked": "true"}
,{"value": "3", "title": "李清照", "disabled": true, "checked": ""}
,{"value": "4", "title": "李冶", "disabled": "", "checked": ""}
,{"value": "5", "title": "薛涛", "disabled": "", "checked": ""}
,{"value": "6", "title": "刘采春", "disabled": "", "checked": ""}
]
// 对data数据解析。如果data数据不合法, 这个方法可以用来返回合法数据。
,parseData: function(res){
return {
"value": res.value // 数据值
,"title": res.title // 数据标题
,"disabled": res.disabled // 是否禁用
,"checked": res.checked // 是否选中
}
}
});
});
</script>
4. 左右穿梭的回调函数 - onchange
4.1. 当数据在左右穿梭时触发, 回调返回当前被穿梭的数据:
<script type="text/javascript">
layui.use(['transfer'], function() {
var transfer = layui.transfer;
// 渲染
transfer.render({
elem: '#test1' // 指向容器选择器
,title: ['诗人', '女诗人'] // 穿梭框上方标题
,id: 'poet-transfer' // 设定实例唯一索引, 用于基础方法传参使用
,onchange: function(data, index){
console.log(data); // 得到当前被穿梭的数据
console.log(index); // 如果数据来自左边index为0, 否则为1
}
});
});
</script>
5. 获得右侧数据
5.1. 穿梭框的右侧数据通常被认为是选中数据, 因此你需要得到它并提交到后台:
<script type="text/javascript">
layui.use(['transfer'], function() {
var transfer = layui.transfer;
// 渲染
transfer.render({
elem: '#test1' // 指向容器选择器
,title: ['诗人', '女诗人'] // 穿梭框上方标题
,id: 'poet-transfer' // 设定实例唯一索引, 用于基础方法传参使用
});
// 获得右侧数据
var getData = transfer.getData('poet-transfer');
});
</script>
6. 实例重载
6.1. 重载一个已经创建的组件实例, 被覆盖新的基础属性:
<script type="text/javascript">
layui.use(['transfer'], function() {
var transfer = layui.transfer;
// 渲染
transfer.render({
elem: '#test1' // 指向容器选择器
,title: ['诗人', '女诗人'] // 穿梭框上方标题
,id: 'poet-transfer' // 设定实例唯一索引, 用于基础方法传参使用
});
// 可以重载所有基础参数
transfer.reload('poet-transfer', {
title: ['新列表1', '新列表2']
});
});
</script>
7. 设定全局默认参数
var transfer = layui.transfer;
transfer.set(options); // 设定全局默认参数。options即各项基础参数。
8. 例子
8.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>穿梭框 - layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<div id="test1"></div>
<script type="text/javascript">
layui.use(['transfer'], function() {
var transfer = layui.transfer;
// 渲染
transfer.render({
elem: '#test1' // 指向容器选择器
,title: ['诗人', '女诗人'] // 穿梭框上方标题
,id: 'poet-transfer' // 设定实例唯一索引, 用于基础方法传参使用
,showSearch: true
,width: 300
,height: 500
,text: {
none: '无数据' // 没有数据时的文案
,searchNone: '无匹配数据' // 搜索无匹配数据时的文案
}
,data: [
{"value": "1", "title": "李白", "disabled": "", "checked": ""}
,{"value": "2", "title": "杜甫", "disabled": "", "checked": "true"}
,{"value": "3", "title": "李清照", "disabled": true, "checked": ""}
,{"value": "4", "title": "李冶", "disabled": "", "checked": ""}
,{"value": "5", "title": "薛涛", "disabled": "", "checked": ""}
,{"value": "6", "title": "刘采春", "disabled": "", "checked": ""}
]
,value: ["5", "6"]
// 对data数据解析。如果data数据不合法, 这个方法可以用来返回合法数据。
,parseData: function(res){
return {
"value": res.value // 数据值
,"title": res.title // 数据标题
,"disabled": res.disabled // 是否禁用
,"checked": res.checked // 是否选中
}
}
,onchange: function(data, index){
console.log(data); // 得到当前被穿梭的数据
console.log(index); // 如果数据来自左边index为0, 否则为1
}
});
// 获得右侧数据
var getData = transfer.getData('poet-transfer');
});
</script>
</body>
</html>
8.2. 效果图