layui数据表格删除当前行的实现方法-Layui教程-PHP中文网

layui数据表格删除当前行的实现方法

藏色散人

发布： 2020-11-24 10:52:28

原创

4120人浏览过

layui数据表格删除当前行的实现方法：首先创建一个代码示例文件；然后通过“olddata.splice(obj.tr.data('index'),1);”方法实现删除当前行即可。

layui数据表格删除当前行的实现方法

推荐：《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)

登录后复制

说明

splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

以上就是layui数据表格删除当前行的实现方法的详细内容，更多请关注php中文网其它相关文章！

首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

layui数据表格删除当前行的实现方法