foreword
In actual work, this model is often encountered. Today, I took some time to organize my ideas and made a more comprehensive demo. for future recall.
thinking (special attention)
- This example just gets the data-id, puts it in the array, and then clones the element. This example is suitable for the data display on the left and right sides to be consistent.
- Special Note: If the two sides are not the same, you must use it. After clicking, get multiple properties of the clicked item and store it in the object. Then, iterate over this object where needed to format the selected information with different styles and fields. For this example, please move to ====" https://my.oschina.net/u/583531/blog/1528873 It is selected from choosen, the result area on the right. The two sides are very different and cannot be handled with clone .
- What if the heavy judgment is omitted? One method is that once the left side is checked, the item clicked on the left side is removed and appears directly on the right side. Once the right side is deleted, the item will return to the left side.
Technical realization
[Array + clone is the main implementation]
- In the table on the left, the data is obtained from json and then traversed by for;
- Select on the left ---- "Display on the right; (After clicking, get the data-id of the input on the left, write it into the array, and then clone itself appendTo the right. )
- Click again on the left side to remove the re-prompt; (Actually, this piece is useless later. After I use the left-click, it will be disabled. If you don't click, the re-prompt will not appear.)
- The right side is deleted, the left side checkbox is selected and the background color is removed; here is actually the left and right two-way binding! ( Deletion on the right side needs to do 3 things: ① delete the record in the array; ② delete the DOM by yourself; ③ the corresponding item on the left should be A, cancel the selection; B, remove the gray background color, C, remove disabled. )
- Batch selection function (Batch check is relatively simple, I only use the batch check input on the left, and clone all the left side to the right at one time. There is no need to deduplicate the array here, but there is one detail that is very important , before selecting all clones to the right side, clear the right side first. Why do you want to process it here? Because there is no array here, it prevents the user from first selecting a single data and then batching it, so that there will be duplicate records on the right side of the data. . )
The dynamic diagram is as follows
code show as below
<!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>
data source
[
{
"dataid": "001",
"name": "大柴",
"tel": "13685871257"
},
{
"dataid": "002",
"name": "小柴",
"tel": "13588999988"
},
{
"dataid": "003",
"name": "五升",
"tel": "13233556677"
}
]