首頁 >web前端 >js教程 >如何實作表格中只刪除dom資料（程式碼）

如何實作表格中只刪除dom資料（程式碼）

不言原創: 2018-08-25 11:32:481598瀏覽

這篇文章帶給大家的內容是關於如何實現表格中只刪除dom資料（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

本文記錄僅對表格dom資料的刪除操作；
//在開始之前要避開一個誤區，例如官方給的刪除表格的行的時候只是把行刪除掉，這樣就會導致你的dom資料沒有被改變，所以分頁區顯示的總條數就不會變，點擊翻頁會把之前的dom資料重載到表格中；所以重點就來了，刪除資料要從重載表格入手！！！

var table;
var form;
layui.use(&#39;table&#39;, function() {
table = layui.table;
form = layui.form;
var a = 1;
table.render({
elem : &#39;#deptUser&#39;,
id:&#39;deptId&#39;,
height : 380,
width : 508
,page : true //开启分页
,limits: [10,20,50]
,cols : [ [ //表头
{type:&#39;numbers&#39;, title : &#39;序号&#39;,width : 44
},{field : &#39;CODE&#39;,title : &#39;用户编号&#39;,width : 120
},{field : &#39;NAME&#39;,title : &#39;用户名称&#39;
},{fixed: &#39;right&#39;, title : &#39;操作&#39;, width: 60, align:&#39;center&#39;, toolbar: &#39;#barDemo&#39;
} ] ]
});
/* var $ = layui.$;
//表格顶部操作监听
$(&#39;.demoTable .layui-btn&#39;).on(&#39;click&#39;, function(){
var type = $(this).data(&#39;type&#39;);
active[type] ? active[type].call(this) : &#39;&#39;;
}); */
table.on(&#39;tool(deptU)&#39;, 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: &#39;#deptUser&#39;
    ,id:&#39;deptId&#39;
,height : 380
,width : 508
,page : true //开启分页
,limits: [10,20,50]
,data : newData
  ,cols : [ [ //表头
      {type:&#39;numbers&#39;, title : &#39;序号&#39;,width : 44
      },{field : &#39;CODE&#39;,title : &#39;用户编号&#39;,width : 120
      },{field : &#39;NAME&#39;,title : &#39;用户名称&#39;
      },{fixed: &#39;right&#39;, title : &#39;操作&#39;, width: 60, align:&#39;center&#39;, toolbar: &#39;#barDemo&#39;
      } 
      ] ]
}); 
//上边定义的tableIns可以 使用reload方法，我这里重新渲染就可以了就没用到
}
});
});

如何實作表格中只刪除dom資料（程式碼）

相關文章