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'
                });
            }
        });
    }

```

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


相关文章
|
5月前
|
JSON 前端开发 数据格式
bootstrap table表格的点击详情按钮操作
bootstrap table表格的点击详情按钮操作
50 1
|
5月前
|
前端开发 JavaScript
Bootstrap Table根据参数搜索功能
Bootstrap Table根据参数搜索功能
53 0
|
5月前
|
前端开发
bootstrap table点击修改按钮给弹框赋值
bootstrap table点击修改按钮给弹框赋值
32 0
|
5月前
|
JSON 前端开发 数据库
Bootstrap Table使用教程(请求json数据渲染表格)
Bootstrap Table使用教程(请求json数据渲染表格)
78 0
|
5月前
|
前端开发
bootstrap table分页悬停颜色改变
bootstrap table分页悬停颜色改变
21 0
|
5月前
|
前端开发
解决bootstrap table刷新加载时白色闪屏问题
解决bootstrap table刷新加载时白色闪屏问题
37 0
|
5月前
|
前端开发
bootstrap table表格去掉排序箭头
bootstrap table表格去掉排序箭头
56 2
N..
|
1月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
13 0
|
6月前
|
前端开发 容器
|
6月前
|
前端开发 容器