从第一张表移至第二张表，我的思路：
1.第一张表必须有checkbox(可实现多选)
2.第一张表选取的数据，在点击"添加"按钮的时候，消失
3.第一张表选取的数据消失，那么表中的数据必须重排
4.选取的数据添加到第二张表中，第二张表点击移除的时候，移除的数据又会添加到第一张表中(这里我没管添加到最前面还是最后)
一、初始化第一张表，使用layUI
table.render({
elem : '#mediaMng',//html中table的id
url :'',// 数据接口
contentType : 'application/json',
method : 'post',
page : true, // 开启分页
limit : 5,//自定义一下限制条数
cols : [ [ {
type : 'checkbox',
fixed : 'left'
}, {
field : 'displayName',
title : '文件名',
width : 400
}, {
field : 'timeLength',
title : '播放时长',
width : 150
}, {
field : 'status',
title : '审核状态',
width : 200,
templet: '#sexTpl'//事件
}, {
field : 'createTime',
title : '创建时间',
width : 245
}] ]
});二、选取数据，点击"添加"按钮，数据消失并重排
<button class="layui-btn" data-type="addMedia" type="button">
<i class="layui-icon"></i>添加
</button>//当前数组我保存的是第一张表的数据
var dataArray = new Array();
//事件处理
var $ = layui.$, active = {
//按钮中的 data-type
addMedia: function(){ //选取媒资文件添加至节目表中
var checkStatus = table.checkStatus("a"),//括号中的"a"为第一张表的id
data = checkStatus.data;//得到checkbox勾选的数据
var oldData;
//判断第一张表中有无数据
if(dataArray.length === 0){
//获取第一张表中所有数据
$.post(url,function(r){
oldData = r.data;//赋值
//循环数据
for(var i=0, row; i < oldData.length; i++){
row = oldData[i];
//我的判断条件，如果勾选的数据名称在第一张表所有数据中，则删除这条数据
if((JSON.stringify(data)).search(row.fileName) >= 0){
//删除当前一条数据
oldData.splice(i, 1);
//删除之后，必须下标减一
//因为删除成功，整个数组长度会减一，所以下标也要跟着减一
i--;
}
continue;
}
dataArray = oldData;
//初始化第一张表(已经删除勾选数据)
initAddMeidaTable(dataArray);
});
}else{
//不为空的情况
oldData = dataArray;
for(var i=0, row; i < oldData.length; i++){
row = oldData[i];
if((JSON.stringify(data)).search(row.fileName) >= 0){
oldData.splice(i, 1);
i--;
}
continue;
}
dataArray = oldData;
initAddMeidaTable(dataArray);
}
}
};
//初始化数据
function initAddMeidaTable(dataArray){
table.render({
elem : '#mediaMng',//表格中的id
data : dataArray,
page : true, // 开启分页
limit : 5,
cols : [ [ {
type : 'checkbox',
fixed : 'left'
}, {
field : 'displayName',
title : '文件名',
width : 400
}, {
field : 'timeLength',
title : '播放时长',
width : 150
}, {
field : 'status',
title : '审核状态',
width : 200,
templet: '#sexTpl'
}, {
field : 'createTime',
title : '创建时间',
width : 245
}] ]
});
}
//在前面我们已经初始化的表格，但是在这里的表格有所不同，这里的表格数据是我们自定义的
//所有不会造成重新刷新，重新请求(url)
//判断dataArray的数据，是因为第一次这张表还未加载，所以需要获取第一张表所有数据三、第二张表添加数据(移除：我在每行数据上添加了一个"移除"按钮)
<table class="layui-table" id="programMng">
<thead>
<tr>
<td></td>
<td style='display:none;'>a</td>
<td style='display:none;'>b</td>
<td style='display:none;'>c/td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>操作</td>
</tr>
</thead>
<tbody id="programBody">
</tbody>
</table>//先获取表中的数据
var oldHtml = $("#programBody").html();
var html = "";
//这里的data为第一张表中勾选的data，循环data，添加到表格中
for(var i = 0;i<data.length;i++){
html += "<tr class='add'>" +
"<td><i class='layui-icon'></i></td>" +
"<td style='display:none;'>"+data[i].a+"</td>" +
"<td style='display:none;'>"+data[i].b+"</td>" +
"<td style='display:none;'>"+data[i].c+"</td>" +
"<td>"+data[i].d+"</td>" +
"<td>"+data[i].e+"</td>" +
"<td>"+data[i].f+"</td>" +
"<td><button type='button' onclick='moveMedia(null)' class='layui-btn layui-btn-sm'>移除</button></td>" +
"</tr>"
}
$("#programBody").html(oldHtml+html);四、第二张表数据点击"移除"，数据消失并添加到第一张表中
/**
* 移除第二张表的一行数据
*/
function moveMedia(){
//获取焦点位置
$("#programBody tr").click(function(){
//一行数据
$this = $(this);
//根据split得到当前一行数据的id
var id = $this[0].innerHTML.split("display:none;")[1].split(">")[1].split("<")[0];
//通过id在数据中获取当前对象
//得到点击移除的数据
$.post(url,JSON.stringify({"id":id}),function(r){
//在第二张表中删除这一行数据
$this.remove();
//与上面的初始化第一张表的dataArray中添加一个对象
dataArray.push(r.data[0]);//已点击了增加之后的媒资表格所剩有的数据
//继续初始化第一张表
initAddMeidaTable(dataArray);
});
});
}