layUI 数据从第一张表移至第二张表

从第一张表移至第二张表，我的思路：

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">&#xe61a;</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'>&#xe65f;</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);
		});
	});
}