专栏首页编程微刊Bootstrap Table批量(全选)删除

Bootstrap Table批量(全选)删除

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://cloud.tencent.com/developer/article/1358968

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 高质量编码------属性查询

    为了实现灵活查询供水管网,根据地址,材质,管径组合汇总查询和条件查询。(图片数据经过处理,不涉及地理坐标保密信息)

    MiaoGIS
  • 移动端touch事件无视disabled属性 转

    先上个 demo ,点击全屏查看,切换到移动模拟模式,并点击按钮,查看控制台。发现click没有事件没有触发,而touch事件依然触发。

    山河木马
  • 第十七节 netty源码分析之pipeline的来源

    再看下他们的父类 AbstractChannelHandlerContext 的构造器, 分别以参数 inbound , outbound .来区分head和t...

    用户1418372
  • 第二十节 netty源码分析之 reactor中的EventLoop01

    (如果使用到的是 NIO, 那么通常是 NioEventLoopGroup), 那么这个 NioEventLoopGroup 在 Netty 中到底扮演着什么角...

    用户1418372
  • 第十九节 netty源码分析之 pipleline和handler以及pipeline的数据流向01

    我们一路查看下去,找到重载的方法,且记住我们入参里group、和name都是null

    用户1418372
  • netty源码分析之 server端的源码分析

    group.channel(NioServerSocketChannel.class) 根据源码以及在分析客户端源码很容易看出来服务端channel的初始化

    用户1418372
  • 将旺财珠宝库存管理系统的前端ZUI升级到1.8.1

    ZUI是一套开源的HTML5跨屏框架,是基于 Bootstrap 深度定制开源前端实践方案,帮助中国人快速构建现代跨屏应用。从2014年开始用于旺财珠宝库存管理...

    崔文远TroyCui
  • Tomcat版本号隐藏

    用户1456517
  • python无框架开发网站

    标题很有噱头,其实就是python的一个库的使用。之前记得有个网友问我说想学习python开发网站,但是不想用框架,我当时建议可以去学下cgi方面的东西。现在想...

    the5fire
  • bootstrap入门-做一个简单的页面

    接触bootstrap时间也不算短了,也用这个库做了几个内部系统了,使用的感觉真是很爽。

    the5fire

扫码关注云+社区

领取腾讯云代金券