Layui穿梭框的使用

最新推荐文章于 2023-06-27 00:34:53 发布
最新推荐文章于 2023-06-27 00:34:53 发布
阅读量5.2k 收藏 14
点赞数 3
分类专栏： Layui的使用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39736671/article/details/103306801
版权

Layui穿梭框的使用


自己学习中用到了Layui穿梭框的使用；

1.页面

注意：需要引入layui的layui.css和layui.all.js文件；

<body>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  			<legend>穿梭框使用</legend>
		</fieldset>
		<div class="layui-btn-container">
		  <button type="button" class="layui-btn" lay-demotransferactive="getData">获取右侧数据</button>
		  <button type="button" class="layui-btn" lay-demotransferactive="reload">重新加载</button>
		</div>
		<div id="test1" class="demo-transfer" align="left"></div>
</body>

2.js代码

<script type="text/javascript">
		layui.use(['transfer','util'],function(){
			var $=layui.$;
			var transfer=layui.transfer;
			var util=layui.util;
			
			//1.模拟数据
			var data1=[
				{"value": "1", "title": "张三"},
				{"value": "2", "title": "李四"},
				{"value": "3", "title": "王五","disabled": true},
				{"value": "4", "title": "赵六"},
				{"value": "5", "title": "王子"},
				{"value": "6", "title": "小红"},
				{"value": "7", "title": "小zhang","checked": true},
			];
			
			//2.数据格式解析
			  transfer.render({
			    elem: '#test1'
		   		,title: ['未选数据', '已选数据']//自定义标题
			   	,width: 200 //定义宽度
			 	,height: 300 //定义高度
			    ,parseData: function(res){//数据参数来源data1转换处理
			      return {
			        "value": res.value //data1属性
			        ,"title": res.title//data1属性
			        ,"disabled":res.disabled // false  //是否禁用
			        ,"checked":res.checked// false //是否选中
			      }
			    }
			    ,data: data1//数据参数来源
			    ,showSearch: true//显示搜索框
			    ,id:"keyPro"//唯一标识
			   	,value:['6']//用于回显或默认选中
			  });
			
			//3.util监听事件
			util.event('lay-demotransferactive',{
				getData:function(othis){//获取右侧数据
					var getData = transfer.getData('keyPro'); //唯一标识
					layer.alert(JSON.stringify(getData));
				},
				reload:function(){//重新加载
					transfer.reload('keyPro',{
			       		 value: ['6']
					});
				}
			});
		})
	</script>

3.展示

在这里插入图片描述

4.案例

<body>
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	 			<legend><i class="layui-icon layui-icon-util" style="font-size: 22px; color: gray;"></i>穿梭配置</legend>
	</fieldset>
	
	<div id="TEST" class="demo-transfer" align="left"></div><br>
	<div class="layui-btn-container" style="margin-left: 40%">
	  <button type="button" class="layui-btn" lay-demotransferactive="getData">保存</button>
	</div>	
<script type="text/javascript">
	 layui.use(['transfer','util','layer'],function(){
		var $=layui.$;
		var transfer=layui.transfer;
		var layer = layui.layer;
		var util=layui.util;
		
		//1.模拟数据
		var demo1='${demo1}';//后台json串
		demo1 = JSON.parse(demo1);
		var values=new Array();
		var demo2='${demo2}';//后台json串
		demo2 = JSON.parse(demo2);
		for(var i=0;i<demo2.length;i++){
			values.push(demo2[i].demo1Id);
		}
		
		//2.数据格式解析
		  transfer.render({
		    elem: '#TEST'
	   		,title: ['左侧数据', '右侧数据']//自定义标题
		   	,width: 280 //定义宽度
		 	,height: 340 //定义高度
		    ,parseData: function(res){//数据参数来源data转换处理
		      return {
		        "value": res.id //data属性
		        ,"title": res.name//data属性
		      }
		    }
		    ,data: demo1//数据参数来源
		    ,showSearch: true//显示搜索框
		    ,id:"keyPro"//唯一标识
		   	,value:values  //用于回显或默认选中
		  });
		
		//3.util监听事件
		util.event('lay-demotransferactive',{
			getData:function(othis){//获取右侧数据
				var getData = transfer.getData('keyPro'); //唯一标识
				var ids=new Array();
	        	for(var i=0;i<getData.length;i++){
	        		ids.push(getData[i].value);
	        	}
	        	if(ids.sort().toString()==values.sort().toString()){
	        		return layer.msg("穿梭配置没有改变，请勿重复提交！", {icon: 5});
	        	}
				layer.confirm('确定要修改穿梭配置吗？',function(index){
	        		editVerify(ids);
	        	})
			}
		});
		//提交后台
		function editVerify(ids){
			$.ajax({
				type : 'POST',
				traditional:true,
				data : {ids:ids},
				url : "${pageContext.request.contextPath}/autoVerify/editVerify",
				success : function(result) {
					var resultContent = result.msg;
					var resultSuccess = result.success;
					layer.open({
						content : resultContent,
						btn : [ '确定' ],
						yes : function(index,layero) {
							if (true == resultSuccess) {
								window.location.reload();//刷新页面
							} 
							layer.close(index);
						}
					});
				}
			});
		}
	})
</script>
</body>

在这里插入图片描述

冒牌程序员的成长
关注
  • 3
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
layui的select和穿梭框联动
走向CTO的路上...
06-25 753
在事件处理程序中，您可以获取用户选择的选项的值，然后使用 Ajax 请求从服务器获取相应的数据，然后使用 layui 的。这样，当用户选择 Select 框中的选项时，穿梭框的左侧列表将根据选择的选项重新渲染，同时右侧列表的已选城市将被保留。要实现左边的 Select 和右边的穿梭框的联动，您可以使用 JavaScript 和 layui 库。我们还为穿梭框右侧列表的选择事件绑定了一个事件处理程序，以记录用户已选择的城市。方法渲染了一个穿梭框，其中左侧列表的数据是从服务器获取的城市列表。
layui风格穿梭组件 带拼音搜索 添加多选
moonlight的博客
08-19 4940
基于前辈的组件修改，layui风格，已修改成layui第三封控件规范 在原基础上添加多选； 添加拼音搜索； 【原文】整合 layui 穿梭框组件 【引用】拼音搜索用到的JS，用法简单! 链接失效的话,请到这里下载 修改后的源码 在线演示...
layui框架学习（28：穿梭框模块）
gc_2299的博客
06-27 1719
学习并记录layui框架中内置模块的穿梭框模块的函数、参数设置方式。
Layui 设置多个穿梭框，并增加上移下移置顶置底功能
Richard_reallife的博客
07-12 5212
Layui 设置多个穿梭框，并增加上移下移置顶置底功能 介绍 针对layui穿梭框进行了一些修改，增加上移下移置顶置底功能，设置了右侧框的排序功能，按序取值，按序加载的功能。 基于layui 2.5.4 ，致敬贤心大神。 样式 源码 <!DOCTYPE HTML> <%@ page contentType="text/html; charset=UTF-8" pageEncod...
layui 穿梭框的实现
mangobot的博客
02-11 1156
layui.use(['form', 'layer', 'jquery', 'laydate', 'transfer'], function () { var $ = layui.jquery, transfer = layui.transfer; transfer.render({ elem: '#transfer', data: [], value: [], ...
基于layui实现带搜索功能的树形穿梭框
12-19
基于layui封装的多选穿梭框，双列表互选框，树形组件可搜索
layui 穿梭框transfer右侧数据赋值排序错乱小技巧.doc
05-28
在使用 layui 的穿梭框transfer时，右侧数据的排序可能会错乱，导致数据的顺序不符合预期。此问题的出现可能是由于数据的加载顺序问题造成的。 解决方案 解决这个问题的方法非常简单，我们可以通过创建一个函数，...
基于layui实现树形穿梭框
最新发布
05-22
基于layui实现树形穿梭框
layui-表格穿梭-transferTable-源码
10-16
基于layui框架的前端表格穿梭框组件，项目中直接导入，复制demo源码就能使用，开发方便，样式美观
layui穿梭框transfer给右边value赋值,得到transfer右边的值
amberom的专栏
04-19 709
2、loginName这个变量是可以自己随意加的，你加的话那么你得到的getData数据里面就会有这个属性和对应的值。但是value和title这两个不可以更改。1、在划横线的两处地方调用了transfer.getData()。getData这个变量是在上面先定义了的。值是parseData 里面value的值。value就是右侧框里面的值。，最关键的是它里面的。
layui操作完成后刷新页面
小四是个程序猿的博客
07-29 7313
在layui中如果我们没在表格或者表单监听里面操作数据，那么就没办法用自带的重载来刷新数据，这时候我们可以采用重新加载父页面的方式。 我的需求是点击新增按钮，弹出新增的信息输入，输入完成后刷新页面，把新增的信息立即展示出来。 下面直接上代码： $.ajax({ url: "", type: "post", data: $('#add').serialize(), dataType: "json", success: function(dat
layui 穿梭框
qq_45597282的博客
09-04 945
render—渲染\ 穿梭框组件 颖颖变身 }) //渲染 transfer.render({ elem: ‘#test1’ //绑定元素 ,data: [ {“value”: “1”, “title”: “宇智波”, “disabled”: “”, “checked”: “”} ,{“value”: “2”, “title”: “杜甫”, “dis...
layui使用穿梭框
qq_39015306的博客
04-16 1700
layui使用穿梭框 HTML <div class="layui-card"> <div class="layui-card layui-form" lay-filter="component-form-element"> <div id="test7" class="demo-transfer"></div&g...
layui穿梭框改写，单击时勾选进行穿梭，取消原本穿梭框的中间点击change部分
qq_44091061的博客
01-12 692
layui穿梭框改写，单击时勾选进行穿梭，取消原本穿梭框的中间点击change部分
Layui_穿梭框
FortyPigs的博客
09-03 3174
1:render 渲染 2:首先在hubilder里新建一个web项目，其次再建一个文件夹把相关html里的代码复制粘贴到里边，命名为transfer_stu.html;相关代码如下： < !DOCTYPE html> < html> < head> < meta charset=“utf-8”> < title>穿梭框组件 < l...
layui tansfer(穿梭框组件)
热门推荐
dreamMRs的博客
09-02 1万+
穿梭框自我了解全部 实现代码如下layui.use('transfer',funcation(){ var transfer=layui.transfer; transfer.render({ elem:'test1', data:[ {"value":"1","title":"李白","checked":"checked","disabled":"disabled"}, {"...
《layui宇宙版教程》：穿梭框组件transfer
来吧，学习！
08-21 1813
《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入： 1.26 穿梭框组件transfer 模块加载名称：transfer。 1.26.1 快速使用 transfer组件可以进行数据的交互筛选。 　　测试代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
layui 穿梭框数据交互
04-03
layui 穿梭框（Transfer）是一个用于在两个列表之间移动数据的组件。它可以通过前后端的交互来获取和更新数据。下面是两种实现数据交互的方法： 1. 后端获取数据：通过后端接口获取数据，并将数据传递给穿梭框组件。在后端，你可以使用任何你熟悉的编程语言和框架来实现数据的获取和处理。在前端，你需要使用 layui 的穿梭框组件，并通过 AJAX 请求将数据传递给后端接口。具体的实现步骤如下： - 在前端页面中，创建一个 div 元素，并设置一个唯一的 id，用于放置穿梭框组件。 - 在后端，创建一个接口用于获取数据。你可以使用任何你熟悉的后端框架来实现这个接口。 - 在前端的 JavaScript 代码中，使用 layui 的穿梭框组件，并通过 AJAX 请求将数据传递给后端接口。 - 在后端接口中，获取请求中的数据，并进行相应的处理。然后将处理后的数据返回给前端。 - 在前端的 JavaScript 代码中，接收后端返回的数据，并将数据传递给穿梭框组件进行展示。 以下是一个示例代码： ```html <div id="test4" class="demo-transfer"></div> ``` ```javascript layui.use(['transfer'], function(){ var transfer = layui.transfer; // 通过 AJAX 请求获取数据 $.ajax({ url: 'your_backend_api_url', type: 'GET', success: function(res){ // 将数据传递给穿梭框组件 transfer.render({ elem: '#test4', data: res.data // 假设后端返回的数据为 {data: []} }); } }); }); ``` 2. 前端获取数据：在前端页面中，你可以直接定义一个数组来存储数据，并将数据传递给穿梭框组件。具体的实现步骤如下： - 在前端页面中，创建一个 div 元素，并设置一个唯一的 id，用于放置穿梭框组件。 - 在前端的 JavaScript 代码中，定义一个数组来存储数据，并将数据传递给穿梭框组件进行展示。 以下是一个示例代码： ```html <div id="test4" class="demo-transfer"></div> ``` ```javascript layui.use(['transfer'], function(){ var transfer = layui.transfer; // 定义数据数组 var data = [ {value: '1', title: '选项1'}, {value: '2', title: '选项2'}, {value: '3', title: '选项3'} ]; // 将数据传递给穿梭框组件 transfer.render({ elem: '#test4', data: data }); }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值