首頁 >web前端 >Layui教程 >layui資料表刪除目前行的實作方法

layui資料表刪除目前行的實作方法

藏色散人原創: 2020-11-24 10:52:284343瀏覽

layui資料表刪除目前行的實作方法：先建立一個程式碼範例檔；然後透過「oldData.splice(obj.tr.data('index'),1);」方法實作刪除目前行即可。

layui資料表刪除目前行的實作方法

本教學操作環境：windows10系統、layui2.5.6版，該方法適用於所有品牌電腦。

資料表如下：

t2 = {
      elem: &#39;#test2&#39;,
      data: tableData2,
      page: false,
      width: $(parent.window).width()-50,
      cols: [[
        {type:&#39;checkbox&#39;,field:&#39;id&#39;},
        {field:&#39;cstMoldNo&#39;, title: &#39;客户模号&#39;,edit:&#39;text&#39;},
        {field:&#39;cstProdName&#39;, title: &#39;产品名称&#39;,edit:&#39;text&#39;},
        {field:&#39;material&#39;, title: &#39;产品材料&#39;,edit:&#39;text&#39;},
        {field:&#39;firstTryDate&#39;, title: &#39;验证日期&#39;,edit:&#39;text&#39;},
        {field:&#39;deliveryDate&#39;, title: &#39;交货日期&#39;,edit:&#39;text&#39;},
        {field:&#39;unit&#39;, title: &#39;单位&#39;,edit:&#39;text&#39;},
        {field:&#39;count&#39;,   title: &#39;数量&#39;,edit:&#39;text&#39;},
        {field:&#39;upTax&#39;,   title: &#39;含税单价&#39;,edit:&#39;text&#39;},
        {field:&#39;priceTax&#39;,    title: &#39;含税金额&#39;,edit:&#39;text&#39;},
        {field:&#39;remark&#39;, title: &#39;备注&#39;,edit:&#39;text&#39;},
        {fixed: &#39;right&#39;, title: &#39;操作&#39;,width: &#39;10%&#39;,align: &#39;center&#39;,toolbar: &#39;#barDemo&#39;}
      ]]
    };

點選刪除目前行的方法：

if(obj.event === "del"){
       layer.confirm("你确定要删除么？",{btn:[&#39;是的,我确定&#39;,&#39;我再想想&#39;]},
           function(){
             var oldData = table.cache["test2"];
             oldData.splice(obj.tr.data(&#39;index&#39;),1);
             layer.msg("删除成功",{time: 10},function(){
               table.reload(&#39;test2&#39;,{data : oldData});
             });
           }
       )
     }

layui中刪除表格目前行主要使用splice()方法，

# splice() 方法向/從陣列中新增/刪除項目，然後傳回已刪除的項目。

註解：此方法會改變原始陣列。

語法

arrayObject.splice(index,howmany,item1,.....,itemX)

layui資料表刪除目前行的實作方法

說明

#splice() 方法可刪除從index 開始的零個或多個元素，並且使用參數清單中宣告的一個或多個值來取代那些被刪除的元素。

以上是layui資料表刪除目前行的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

layui tr

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：layui input只讀屬性是什麼下一篇：layui input只讀屬性是什麼

看更多