016-穿梭框

最新推荐文章于 2023-06-27 00:34:53 发布

自由与束缚JavaJavaScript

最新推荐文章于 2023-06-27 00:34:53 发布

阅读量561

点赞数

分类专栏： layui学习

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/113038898

版权

layui学习专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍了layui的Transfer组件，包括其基本参数、数据源格式解析回调函数`parseData`、左右穿梭回调函数`onchange`、获取右侧数据的方法、实例重载以及全局默认参数设置。通过示例代码展示了如何渲染、配置和操作Transfer组件，以实现数据筛选和交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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. 效果图