layUI 資料從第一張表移至第二張表
阿新 • • 發佈:2019-01-08
從第一張表移至第二張表,我的思路:
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);
});
});
}