【原创】jquery-左勾选（checkbox单选/全选） 选到 右列表（删除） -数组+clone-经典全面版本
前言
实际工做中，此模型常常会遇到过，今天花点时间，整理下思路，作了一个较为全面的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"
}
]
相关文章
- 1. jquery全选删除
- 2. jquery实现checkbox的单选和全选
- 3. Jquery实现checkbox全选和全不选
- 4. jQuery实现CheckBox全选、全不选
- 5. checkbox全选反选
- 6. HTML 点选框（checkbox） 全选/全不选
- 7. 【经典】表格checkbox 全选与取消
- 8. JS checkbox 全选 全不选
- 9. 复选框checkbox全选与全不选
- 10. zTree 勾选checkbox
- 更多相关文章...
- • ionic 单选框 - ionic 教程
- • jQuery Mobile 表单选择菜单 - jQuery Mobile 教程
- • 为了进字节跳动，我精选了29道Java经典算法题，带详细讲解
- • Tomcat学习笔记（史上最全tomcat学习笔记）
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
