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);
		});
	});
}