【原創】jquery-左勾選（checkbox單選/全選）選到右列表（刪除） -數組+clone-經典全面版本

時間 2019-11-17

標籤原創 jquery checkbox 單選全選列表刪除數組 clone 經典全面版本欄目 JQuery 简体版

原文原文鏈接

前言

實際工做中，此模型常常會遇到過，今天花點時間，整理下思路，作了一個較爲全面的demo。以備未來回憶使用。css

思考（特別注意）

此例只是將data-id獲取過來，放到數組裏，而後clone元素。本例適合左右兩邊數據顯示一致。
特別注意：若是兩邊不太同樣，則要用，點擊後，獲取該點擊項的多個屬性存放到對象中。而後，在須要的地方遍歷這個對象，以不一樣的樣式和字段來格式化顯示已選擇的信息。這個例子請移步====》http://www.javashuo.com/article/p-quaashfp-kx.html 它是從chosen中選擇到，右側結果區。兩邊很不同，不能用clone來處理。
若是省去去重的判斷，能夠如何作？一個方法就是，左邊一旦勾選，左邊點擊的項remove掉，直接在右邊出現，右邊一旦刪除，該項又回到左邊。

技術實現

【數組+clone爲主實現】html

左側表格，數據從json中獲取，而後for遍歷出來；
左側選擇----》右側顯示；（點擊後，獲取左側input的data-id，寫入數組，而後clone本身appendTo右側。）
左側再次點擊，能去重提示；（其實這塊後來沒用了，我採用了左側點擊後，就disabled了。點都不讓點，也就不會出現去重提示了。）
右側刪除，左側的checkbox選定和背景色去掉；這裏其實就是左右的雙向綁定！（右側刪除須要作3個方面的事情：①數組中刪除記錄；②本身dom刪除；③左側對應的項要A,取消選定；B,去掉灰色背景色，C，去掉diabled。）
批量選擇功能（批量勾選比較簡單，我只用了只要左側勾選批量勾選input，就把左側所有一次性clone到右邊去，這裏不用數組去重的問題，可是有個細節很重要，在全選clone到右側以前，先把右側清空。爲何要這裏處理？由於這裏沒數組，防止用戶首先單選一個數據過去，而後再批量，這樣右側就會有重複記錄的數據了。）

動態圖以下

代碼以下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery-從左到右-數組全程</title>
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
		<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css"/>
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<style>
			body{ padding-top: 100px; background: #333; font-family: "微軟雅黑";}
			.container{ padding: 25px; width: 1000px; background: #fff;}
			#table-select i{ display: none;}
			#table-select input{ padding-left: 15px; cursor: pointer;}
			#table-selected input{ display: none;}
			#table-selected i{ padding-left: 15px; cursor: pointer;}
			#table-selected tbody tr{ background: #f5f5f5;}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-6">
					<p>待選列表</p>
					<table class="table" id="table-select">
						<thead>
							<tr>
								<th>
									<input type="checkbox" name="" id="" value="" />
								</th>
								<th>姓名</th>
								<th>手機</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
				<div class="col-md-6">
					<p>已選列表</p>
					<table class="table" id="table-selected">
						<thead>
							<tr>
								<th>
								</th>
								<th>姓名</th>
								<th>手機</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</body>
</html>

<script>
	$(function(){
		//獲取數據
		$.ajax({
			url : "data/user.json",
			type : "get",
			success:function(data){
				console.log("初始類型："+typeof data) //string
				console.log("數據打印："+data)   
				//var obj = JSON.parse(data);   爲何一樣的代碼，放到html和json中，讀出來的數據類型不同。.json裏面放的就是json對象。
				for( var i= 0; i<data.length; i++){
					$("#table-select tbody").append(
						'<tr>'+
							'<td><input type="checkbox" name="" id="" value="" data-id='+data[i].dataid+'><i class="fa fa-window-close"></i></td>'+
							'<td>'+data[i].name +'</td>'+
							'<td>'+data[i].tel +'</td>'+
						'</tr>'
					)
				}
				
				//取到長度留給後面用
				data_len = data.length;  //var data_len = data.length; 局部變量 ; 全局變量： data_len = data.length;
				//alert(data_len)
				
			}
		})
		
		//單條插入
		var arr_data = [];
		//發生改變時
		$(document).on("change","#table-select tbody input",function(){  
			
			//組去重
			var this_id = $(this).attr("data-id")
			if (arr_data.indexOf(this_id) >=0){
				alert("添加已存在！")
			}
			else{
				arr_data.push(this_id);
				$(this).parent().parent().clone().appendTo("#table-selected tbody");
				console.log(arr_data)
			}
			
			//是否選定
			if($(this).is(':checked')){
				$(this).parent().parent().css("background","#f5f5f5");
				$(this).attr("disabled",true)
			}
			else
			{
				//這下面可能根本不須要...
				
				//去掉tr灰色背景
				$(this).parent().parent().css("background","#ffffff")
				//刪除dom
				$("#table-selected input[data-id="+this_id+"]").parent().parent().remove();  //數據雙向綁定
				//數組中刪除
				var this_index = arr_data.indexOf(this_id);
				arr_data.splice(this_index,1);
				//打印數組
				console.log(arr_data)
			}
		
		})
		
		//批量插入
		$(document).on("change","#table-select thead input",function(){ 
			if($(this).is(':checked'))
			{
				$("#table-selected tbody tr").remove();  //先請空右側已勾選
				$("#table-select tbody tr").clone().appendTo($("#table-selected tbody")); 
				$("#table-select tbody input").prop("checked","checked")
				$("#table-select tbody input").prop("disabled",true);
				$("#table-select tbody tr").css("background","#f5f5f5")
			}
			else
			{
				$("#table-selected tbody tr").remove();
				$("#table-select tbody input").prop("checked","")
				$("#table-select tbody input").prop("disabled",false);
			}
		})
		

        //單條刪除
		$(document).on("click","#table-selected tbody i",function(){  
			//獲取id
			var this_id =$(this).prev().attr("data-id");
			if(this_id!==""){
				//獲取當前id在數組中的索引號
				var this_index = arr_data.indexOf(this_id);
				//數組中刪除
				arr_data.splice(this_index,1)
				//dom刪除
				$(this).parent().parent().remove();
				
				//取消左側check選定和背景色選定---------------------------//數據雙向綁定
				$("#table-select input[data-id="+this_id+"]").prop("checked","");
				$("#table-select input[data-id="+this_id+"]").prop("disabled",false);
				$("#table-select input[data-id="+this_id+"]").parent().parent().css("background","")
				
				alert("刪除成功!")
				
				//取到當前左側選定的checkbox長度
				var checked_len = $("#table-select tbody input:checked").length;
				//alert(checked_len)
				if (checked_len!==data_len)
				{
					$("#table-select thead input").prop("checked","");
				}
			}
			else{
				alert("未找到id!");
				return false;
			}
			console.log(arr_data);
		})	
		
		/*
		 * 特別注意：如何在數組中,刪除已知id值的項?
		 * 1,經過id找到該id在數組中的索引號；
		 * 2，而後經過索引號來刪除就簡單了。
		*/
		
	})
</script>

數據源

[
  {
  	"dataid": "001",
    "name": "大柴",
    "tel": "13685871257"
  },
  {
  	"dataid": "002",
    "name": "小柴",
    "tel": "13588999988"
  },
  {
  	"dataid": "003",
    "name": "五升",
    "tel": "13233556677"
  }
]