bootstrap-table给行数据添加按钮，并绑定事件

萌翻天

已于 2022-07-04 14:31:32 修改

阅读量3.3k

点赞数 3

分类专栏： web 文章标签：前端 javascript html

于 2022-07-04 14:30:50 首次发布

本文链接：https://blog.csdn.net/qq_40308101/article/details/125599510

版权

web 专栏收录该内容

36 篇文章

订阅专栏

本文介绍如何在表格中增加操作按钮并绑定点击事件实现下载和删除功能。通过JavaScript和jQuery实现了按钮的动态生成及相应的后端交互。

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

1、增加按钮

{
            title: "操作",
            field: "field_operate",
            width: '150px',
            align: "center",
            events: "operateEvents",
            formatter: function (value, row, index) {//value：表示当前单元格中的值,row：表示当前行,index：表示当前行的下标
                return [
                    '<button id="id_row_download" type="button" class="btn btn-info" singleSelected=true>下载</button>',
                    '<button id="id_row_dalete" type="button" class="btn btn-warning" singleSelected=true>删除</button>',
                ].join('');
            }
        }

2、绑定事件

window.operateEvents = {
    "click #id_row_download": function (e, value, row, index) {
        $.post("/api/platform/redmineBug/downloadHtml", {url: row["url"]}, function (data, status) {
            funDownload(data, row["fileName"])
        });
    },
    "click #id_row_dalete": function (e, value, row, index) {
        Swal.fire(swalDialog('确定删除吗？')).then((result) => {
            if (result.isConfirmed) {
                $.post("/api/platform/redmineBug/delete", {path: row['path']}, function (data, status) {
                    refreshCsv();
                    refreshHtml();
                    if (data !== 'true') swalInfo(data, 'error', '', 0);
                });
            }
        });
    }
}