layui穿梭框回到原位置

最新推荐文章于 2023-11-03 20:47:57 发布

小人物之辈

最新推荐文章于 2023-11-03 20:47:57 发布

阅读量142

点赞数

文章标签： layui javascript ecmascript

本文链接：https://blog.csdn.net/u012230371/article/details/131919143

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
  <link href="https:unpkg.com/layui@2.8.4/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div id="ID-transfer-demo-onchange"></div>
  
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="https://unpkg.com/layui@2.8.4/dist/layui.js"></script>
<script>
layui.use(function(){
  var transfer = layui.transfer;
  var layer = layui.layer;
  // 数据
  var data = [
    {"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 data8 = [
    {"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": "贤心"},
  ];
  //data8.splice(9,1,{"value": "99", "title": "李白1"});
  //console.log(data8);
  var indexs = [];
  // 渲染
  transfer.render({
    elem: '#ID-transfer-demo-onchange',
    data: data,
	id: 'ids',
	showSearch: true,
    onchange: function(obj, index){
		
		if(index == 0){
		console.log(index);
		console.log(data8);
			for(var i=0;i<data.length;i++){
				for(var j=0;j<obj.length;j++){
					if(JSON.stringify(data[i]) == JSON.stringify(obj[j])){
						console.log(data[i]);
						indexs[i] = data[i];
						//data8.splice(i,1);
						data8[i].hide = true;
						
					}
				}
			}
		}
		console.log(data8);
      var arr = ['左边', '右边'];
       // 查看被穿梭时的数据 --  仅用于演示
	  console.log(JSON.stringify(indexs));
	  if(index == 1){
	  console.log(index);
	  //console.log(JSON.stringify(data));
	  console.log(JSON.stringify(indexs));
		for(var i=0;i<indexs.length;i++){
			if(data8[i].hide == true){
			//console.log(888888888888)
				for(var j=0;j<obj.length;j++){ 
					if(JSON.stringify(indexs[i]) == JSON.stringify(obj[j])){
						//console.log(data[i]);
						console.log(obj[j])
						data8.splice(i,1,obj[j]);
						break;
					}
				}
				continue;
			}
		}
		var getData = transfer.getData('ids'); // 获取右侧数据
		//console.log(getData);
		//var selectedStr = '';
		//console.log(Object.values(getData));
		/*for(var i=0;i<getData.length;i++){
			//console.log(getData[i].value);
			selectedStr += getData[i].value + ',';
		}*/
		//console.log(selectedStr);
		//selectedStr = (selectedStr.substring(selectedStr.length - 1) == ',') ? selectedStr.substring(0, selectedStr.length - 1) : selectedStr;
		//var selectedArr;
		//selectedArr = selectedStr.split(',');
		//console.log(data8);
		var selected = [];
		for(var i=0;i<data8.length;i++){
			if(data8[i].hide == true){
				selected.push(data[i].value);
				data8.splice(i,1,data[i]);
			}
		}
		console.log(selected);
		console.log(data8);
		transfer.render({
			elem: '#ID-transfer-demo-onchange',
			data: data8,
			value:selected,
		
		});
		// 重载
		transfer.reload('ids', { // options
		});
	  }
      layer.alert('来自 <strong>'+ arr[index] + '</strong> 的数据：'+ JSON.stringify(obj));
	  //console.log(JSON.stringify(data));
    }
  });
});
function transferRightSort(arr) 
{
	var data=$("ul.layui-transfer-data")[1]
	var item_list=$(data).children("li")
	var middle_list=[]
	for(var key in arr){
		middle_list.push("")
	}
	//console.info(arr)
	for(var i=0;i<item_list.length;i++){
		var item=item_list[i]
		var value=$(item_list).children("input")[i].valueconsole.info(value);
		var index=arr.indexOf(parseInt(value))
		//console.info(index);
		middle_list[index]=item
	}
	var innertHTML=""
	for(var y=0;y<middle_list.length;y++){
		console.info($(middle_list).children("input")[y].value)
		// console.info(middle_list[i].HTML)
		innertHTML+="<li>"+ middle_list[y].innerHTML +"</li>"
	}
	$($("ul.layui-transfer-data")[1]).html(innertHTML)
	// console.info(innertHTML)
}
</script>
</body>
</html>