提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

layUI穿梭框获取穿梭值（整理）

获取 整理 layui
2023-09-14 09:13:42 时间 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>layUI穿梭框</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../../layui/css/layui.css" media="all" />
	<!-- 注意：如果你直接复制所有代码到本地，上述 css 路径需要改成你本地的 -->
</head>
<body>
	<div class="layui-btn-container">
		<button type="button" class="layui-btn" lay-demotransferactive="getData">获取右侧数据</button>
	</div>

	<div id="test7" class="demo-transfer"></div>
</body>
<script src="../../../layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
layui.use(['transfer', 'layer', 'util'], function(){
  var $ = layui.$
  ,transfer = layui.transfer
  ,layer = layui.layer
  ,util = layui.util;
  
  //模拟数据
	var data1 = [
		{"value": "1", "title": "李白"}
		,{"value": "2", "title": "杜甫"}
		,{"value": "3", "title": "苏轼"}
		,{"value": "4", "title": "李清照"}
		,{"value": "5", "title": "鲁迅", "disabled": true}
		,{"value": "6", "title": "巴金"}
		,{"value": "7", "title": "冰心"}
		,{"value": "8", "title": "矛盾"}
		,{"value": "9", "title": "贤心"}
	]
  
	var data2 = ['6','7']
	//实例调用
	transfer.render({
		elem: '#test7'
		,data: data1
		,id: 'key123' //定义唯一索引
		,width: 300 //定义宽度
		,height: 500 //定义高度
		,title: ['显示','不显示']
		, value: data2           //右侧数据直接初始化
		,onchange: function(data, index){
			console.log(data,'63'); //得到当前被穿梭的数据
			console.log(index,'64'); //如果数据来自左边，index 为 0，否则为 1  中间按钮点击事件
			var arrD = new Array();
			$.each(data, function(k, v) {
				arrD.push(v.title);
			});
			var name = arrD.join(',');
			console.log(name,'70')
			
		}
		// , value: ["18", "3"]           //右侧数据直接初始化
	})
  
	//批量办法定事件
	util.event('lay-demoTransferActive', {
		getData: function(othis){
			var getData = transfer.getData('key123'); //获取右侧数据
			layer.alert(JSON.stringify(getData)); 
			console.log(JSON.stringify(getData),'55');
			console.log(getData,'55');
		}
	});
  
});
</script>
</html>

在这里插入图片描述

相关文章