前言
本章给大家介绍的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']
});
实例调用效果图:
本章就分享到这,如果有疑问评论区请留言!