bootstrap table 生成的表格删除tr的总结

最新推荐文章于 2021-09-15 10:49:45 发布

转载最新推荐文章于 2021-09-15 10:49:45 发布 · 496 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/macleo/blog/918937

文章标签：

#json #javascript #php #ViewUI

本文介绍如何在Bootstrap Table中实现数据的增加与删除功能，重点讲解通过为JSON数组添加升序值来标识行，并利用jQuery AJAX进行数据交互的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

bootstrap table 用 data-url="data.php" 的方式填充的数据

不能增加属性。怎么删除呢？

有办法，先将数据填充了再说，用firefox firedebug，查看bootstrap table生成的表格，鼠标悬停点击。

查看到tr有个data-index的属性，属性的值是json数组的数字升序来的。

这就好办了。

先在jquery的ajax中组织好数据，将json数组，增加一个按升序的值

在前端页面将idx的值返回给ajax作为删除的依据：

 function actionFormatter(value, row, index) {
                return [
                    "<button class='btn btn-primary btn-xs like'data-toggle=\"modal\" data-target=\"#viewpw\">查看密码</button> ",
                    "<button class='btn btn-info btn-default btn-xs' data-toggle=\"modal\" data-target=\"#addSource\">生成密码</button> ",
                    "<button class='btn btn-danger btn-xs unlike'data-toggle=\"modal\"  data-target=\"#deleteSource\">删除资源</button>",
                ].join('');
            }

            window.actionEvents = {
                'click .like': function (e, value, row, index) {

                    $.post("viewpw.php", {id: JSON.stringify(row.id)}, function (data) {
                        $("#viewpw #pwpanel").html(data);
                    });
                    return false;
                },
                'click .unlike': function (e, value, row, index) {

                    $("#delbutton").attr("rmid",row.id);
                    $("#delbutton").attr("filename",row.name);
                    $("#delbutton").attr("idx",row.idx);
                    return false;
                },
            };

ajax 删除时后端返回成功的标志后，用jquery 的xpath选择器，附带idx的值，删除行搞定问题

 // Delete function
    $(document).on('click', '#delbutton', function () {
        var filePath = $(this).attr('filename');
        var rmid = $(this).attr('rmid');
        var idx = $(this).attr('idx');
        $.ajax({
            url: 'upload.php',
            type: 'POST',
            dataType: 'json',
            data: {del: rmid, filePath: filePath},
            success: function (res) {
                if (res.type == 'success') {
                   
                    $("[data-index="+idx+"]").remove();
                }
                flashMsg(res.msg);
                $("#deleteSource").modal("hide");
                window.location.href = window.location.href;
            },
            error: function (e) {
                flashMsg(res.msg);
                window.location.href = window.location.href;
            }
        });
    });

总算写了一篇自己解决的心得，真不容易。

好吧，我承认我没有认真看文档：http://issues.wenzhixin.net.cn/bootstrap-table/#methods/remove.html

其他前端表格资源：http://www.yyyweb.com/4687.html

转载于:https://my.oschina.net/macleo/blog/918937