【原创】jquery-左勾选（checkbox单选/全选）选到右列表（删除） -数组+clone-经典全面版本...

最新推荐文章于 2024-07-22 08:55:10 发布

weixin_33782386

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量245

点赞数

文章标签： javascript json python ViewUI

原文链接：https://my.oschina.net/u/583531/blog/1558814

版权

2019独角兽企业重金招聘Python工程师标准>>>

前言

实际工作中，此模型经常会遇到过，今天花点时间，整理下思路，做了一个较为全面的demo。以备将来回忆使用。

思考（特别注意）

此例只是将data-id获取过来，放到数组里，然后clone元素。本例适合左右两边数据显示一致。
特别注意：如果两边不太一样，则要用，点击后，获取该点击项的多个属性存放到对象中。然后，在需要的地方遍历这个对象，以不同的样式和字段来格式化显示已选择的信息。这个例子请移步====》https://my.oschina.net/u/583531/blog/1528873 它是从chosen中选择到，右侧结果区。两边很不一样，不能用clone来处理。
如果省去去重的判断，可以如何做？一个方法就是，左边一旦勾选，左边点击的项remove掉，直接在右边出现，右边一旦删除，该项又回到左边。

技术实现

【数组+clone为主实现】

左侧表格，数据从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"
  }
]

转载于:https://my.oschina.net/u/583531/blog/1558814