1. 程式人生 > >layUI 資料從第一張表移至第二張表

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