這篇文章帶給大家的內容是關於如何實現表格中只刪除dom資料(程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
本文記錄僅對表格dom資料的刪除操作;
//在開始之前要避開一個誤區,例如官方給的刪除表格的行的時候只是把行刪除掉,這樣就會導致你的dom資料沒有被改變,所以分頁區顯示的總條數就不會變,點擊翻頁會把之前的dom資料重載到表格中;所以重點就來了,刪除資料要從重載表格入手! ! !
var table; var form; layui.use('table', function() { table = layui.table; form = layui.form; var a = 1; table.render({ elem : '#deptUser', id:'deptId', height : 380, width : 508 ,page : true //开启分页 ,limits: [10,20,50] ,cols : [ [ //表头 {type:'numbers', title : '序号',width : 44 },{field : 'CODE',title : '用户编号',width : 120 },{field : 'NAME',title : '用户名称' },{fixed: 'right', title : '操作', width: 60, align:'center', toolbar: '#barDemo' } ] ] }); /* var $ = layui.$; //表格顶部操作监听 $('.demoTable .layui-btn').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); */ table.on('tool(deptU)', function(obj){ //注:tool是工具条事件名 //定义一个接收表格数据的变量 这个可以直接取得ajax返回的数据,也可以用 layui.table.cache.tableid 取得表格的数据 var userData = layui.table.cache.tableId; var user = obj.data //获得当前行数据 ,layEvent = obj.event; //获得 lay-event 对应的值 if(layEvent=="delete"){ //把删除后的新数据接收并返回给userData var newData = new Array(); var ni = 0; for(var i=0;i<userData.length;i++){ if(userData[i].ID != user.ID){ newData[ni] = userData[i]; ni++; } } userData = newData; //所获得的 tableIns 即为当前容器的实例 重点就是这里容易被忽视的,最简单却最不起眼。。。。 var tableIns = table.render({ elem: '#deptUser' ,id:'deptId' ,height : 380 ,width : 508 ,page : true //开启分页 ,limits: [10,20,50] ,data : newData ,cols : [ [ //表头 {type:'numbers', title : '序号',width : 44 },{field : 'CODE',title : '用户编号',width : 120 },{field : 'NAME',title : '用户名称' },{fixed: 'right', title : '操作', width: 60, align:'center', toolbar: '#barDemo' } ] ] }); //上边定义的tableIns可以 使用reload方法,我这里重新渲染就可以了就没用到 } }); });
相關推薦:
DOM節點刪除函數removeChild()用法實例_ javascript技巧
javascript如何快速的動態刪除與刪除dom元素程式碼詳解
以上是如何實作表格中只刪除dom資料(程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!