美文网首页IT@程序员猿媛
Bootstrap Table批量(全选)删除

Bootstrap Table批量(全选)删除

作者: 祈澈菇凉 | 来源:发表于2019-03-13 14:00 被阅读136次

    Bootstrap Table批量(全选)删除,类似以下这样:


    思路
    1:jsp页面,删除按钮

    <div class="mytab">
    <table id="mytab" class="table table-hover"></table>
    </div>
    

    2:在columns里面,checkbox : true


    3:最主要的是js里面实现,删除按钮事件
    获得要删除整条数据的id,并且传递给后端,在数据库进行操作

    部分js代码

    var path = getContextPath();
    
    $(function() {
        $('#mytab').bootstrapTable({
            method : 'get',
            
            url : path + "/alarm/health",// 请求路径
            striped : true, // 是否显示行间隔色
            pageNumber : 1, // 初始化加载第一页
            pagination : true,// 是否分页
            sidePagination : 'server',// server:服务器端分页|client:前端分页
            pageSize : 8,// 单页记录数
            pageList : [ 5, 10, 20, 30 ],// 可选择单页记录数
    
            queryParams : function(params) {// 上传服务器的参数
                var temp = {// 如果是在服务器端实现分页,limit、offset这两个参数是必须的
                    limit : params.limit, // 每页显示数量
                    offset : params.offset, // SQL语句起始索引
    
                    sn : $("#sn").val(),
                    name : $("#sname").val(),
                };
                return temp;
            },
            columns : [ {
                checkbox : true
            }, {
                title : '设备编号',
                field : 'sn',
            }, {
                title : '告警日期',
                field : 'timestamp',
                formatter : formatTime
            }, {
                title : '姓名',
                field : 'name',
            }, {
                title : '心率',
                field : 'heart',
            }, {
                title : '呼吸率',
                field : 'breath',
            }, {
                title : '描述',
                field : 'type',
                formatter : formatBtn
            } ]
    
        })
    
        // 删除按钮事件
        $("#remove").on("click", function() {
            if (!confirm("是否确认删除?"))
                return;
            var rows = $("#mytab").bootstrapTable('getSelections');// 获得要删除的数据
            if (rows.length == 0) {// rows 主要是为了判断是否选中,下面的else内容才是主要
                alert("请先选择要删除的记录!");
                return;
            } else {
                var ids = new Array();// 声明一个数组
                $(rows).each(function() {// 通过获得别选中的来进行遍历
                    ids.push(this.id);// cid为获得到的整条数据中的一列
                });
                deleteMs(ids)
            }
        })
        function deleteMs(ids) {
            $.ajax({
                url : path + "/alarm",
                data : "ids=" + ids,
                type : "post",
                dataType : "json",
                success : function(data) {
                    $('#mytab').bootstrapTable('refresh', {
                        url : path + '/alarm/health'
                    });
                }
            });
        }
    })
    
    参考文章:https://blog.csdn.net/Fly_tom/article/details/81035899
             https://www.jianshu.com/p/761299fd877f
    

    类似文章:jQuery+Datatables实现表格批量删除功能
    https://www.jianshu.com/p/d8de8f062c1d


    原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
    90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,可以加入qq技术交流群聊:649040560。

    相关文章

      网友评论

        本文标题:Bootstrap Table批量(全选)删除

        本文链接:https://www.haomeiwen.com/subject/xvvgpqtx.html