bootstrap table+layer实现一个表格删除

简介: bootstrap table+layer实现一个表格删除

当选着删除按钮的时候,我们一般都会使用confirm属性

// 删除按钮事件
    $("#remove").on("click", function() {
        if (!confirm("是否确认删除?"))
            return;
        var rows = $("#mytab").bootstrapTable('getSelections');// 获得要删除的数据
        if (rows.length == 0) {// rows 主要是为了判断是否选中,下面的else内容才是主要
            /* alert("请先选择要删除的记录!"); */
            layer.msg('请先选择要删除的记录!', {
                icon : 5,
                time : 1000
            });
            return;
        } else {
            var ids = new Array();// 声明一个数组
            $(rows).each(function() {// 通过获得别选中的来进行遍历
                ids.push(this.id);// cid为获得到的整条数据中的一列
            });
            deleteMs(ids);
        }
    })
    function deleteMs(ids) {
        $.ajax({
            url : basePath + "/dels/callerAlarm",
            data : "ids=" + ids,
            type : "get",
            dataType : "json",
            success : function(data) {
                $('#mytab').bootstrapTable('refresh', {
                    url : basePath + '/list/callerAlarm'
                });
            }
        });
    }


```

但是效果是这样的,太过于简单,现在要搭配layer样式来改变一下样式

其实代码很简单

// 删除按钮事件
    $("#remove").on("click", function() {
        var rows = $("#mytab").bootstrapTable('getSelections');// 获得要删除的数据
        if (rows.length == 0) {// rows 主要是为了判断是否选中,下面的else内容才是主要
            /* alert("请先选择要删除的记录!"); */
            layer.msg('请先选择要删除的记录!', {
                icon : 5,
                time : 1000
            });
            return;
        } else {
            layer.confirm("确认要删除吗,删除后不能恢复", { title: "删除确认" }, function (index) {
                var ids = new Array();// 声明一个数组
                $(rows).each(function() {// 通过获得别选中的来进行遍历
                    ids.push(this.id);// cid为获得到的整条数据中的一列
                });
                deleteMs(ids);
                layer.close(index);
                });
        }
    })
    function deleteMs(ids) {
        $.ajax({
            url : basePath + "/dels/staffAlarm",
            data : "ids=" + ids,
            type : "get",
            dataType : "json",
            success : function(data) {
                $('#mytab').bootstrapTable('refresh', {
                    url : basePath + '/list/staffAlarm'
                });
            }
        });
    }

```

改完之后,如果样式不满意,可以继续修改。


相关文章
|
JSON 前端开发 数据格式
bootstrap table表格的点击详情按钮操作
bootstrap table表格的点击详情按钮操作
106 1
Bootstrap5 表格1
Bootstrap5 的基础表格通过添加 `.table` 类来设置样式。
Bootstrap5 表格5
使用 `.table-dark` 类可以为表格添加黑色背景,使表格在页面中更加突出。
Bootstrap5 表格7
通过结合使用 `.table-dark` 和 `.table-hover` 类,可以创建一个具有鼠标悬停效果的黑色背景表格。示例表格包含姓名和电子邮件信息,当鼠标悬停在行上时,行会高亮显示。
Bootstrap5 表格6
通过结合使用 `.table-dark` 和 `.table-striped` 类,可以创建一个具有黑色背景和条纹效果的表格。示例表格包含三列:名字、姓氏和电子邮件,并展示了三位用户的信息。
Bootstrap5 表格3
使用 `.table-bordered` 类可为表格添加边框,使表格结构更清晰。示例中,表格包含三列:名字、姓氏和邮箱,展示了三位用户的信息。
|
1月前
|
NoSQL
Bootstrap5 表格12
使用 .table-responsive 类可以创建响应式表格。当屏幕宽度小于 992px 时,表格会出现水平滚动条;当屏幕宽度大于 992px 时,表格正常显示,没有滚动条。示例代码展示了如何实现这一效果。
Bootstrap5 表格11
使用 `.table-sm` 类可以创建一个内边距较小的紧凑型表格。
Bootstrap5 表格10
可以通过添加 `.table-dark` 或 `.table-light` 类来设置表格表头的背景颜色。`.table-dark` 使表头背景变为黑色,而 `.table-light` 则使其变为灰色。示例代码展示了这两种效果的应用。
Bootstrap5 表格9
通过指定意义的颜色类(如 `table-primary`、`table-success` 等),可以为表格的行或单元格设置不同的背景颜色,以突出显示特定信息。示例中展示了多种颜色类的应用效果。