一聚教程网:一个值得你收藏的教程网站

最新下载

秒速赛车预测网站:Bootstrap Table中的多选框删除功能

时间:2018-07-17 15:12:09 编辑:猪哥 来源:转载

先上代码,后面再进行详细解释:

//删除按钮事件
    $("#remove").on("click", function () {
      // $("#table").bootstrapTable('getSelections');为bootstrapTable自带的,所以说一定要使用bootstrapTable显示表格,#table:为table的id
      var rows = $("#table").bootstrapTable('getSelections');
      console.log(rows);
      if (rows.length == 0) {// rows 主要是为了判断是否选中,下面的else内容才是主要
        alert("请先选择要删除的记录!");
        return;
      } else {
        var arrays = new Array();// 声明一个数组
        $(rows).each(function () {// 通过获得别选中的来进行遍历
          arrays.push(this.cid);// cid为获得到的整条数据中的一列
        });
        var idcard = arrays.join(','); // 获得要删除的id
        console.log(idcard);
      }
    })

1. 效果图

Bootstrap Table中的多选框删除功能

2. 获得要删除的数据

Bootstrap Table中的多选框删除功能

接下来,再来看一下这一行代码的效果,把rows打印到控制台:

Bootstrap Table中的多选框删除功能

可以看到选中删除后,获得到的,就是一条完整重数据库中的查询内容,其中的cid就为每一条数据的id(主键)。

先选中多选框,当点击删除按钮时:在控制台接收到选中的cid,当然后台数据中一定要传递icd来,cid可以不用显示在表格中,

把idcard打印出来,

Bootstrap Table中的多选框删除功能

这时我们获得到的idcard 就是一个我们想要的到的数据,同时给他们中间以逗号隔开,传递到后台,执行多行删除语句:

3. 传递数据到后台执行删除sql

Bootstrap Table中的多选框删除功能

这时就可以成功获得要删除整条数据的id,当然你也可以获得其他列的数据,例如:

Bootstrap Table中的多选框删除功能

注意!

执行上面的功能,一点是要用bootstrapTable 显示的表格,要不然,没有效果,

文章评论

热门栏目

  • 荆门全面实现社会保障卡即时制卡 2019-05-20
  • 【春到渭南】随手拍渭南各地区春景,一贴看尽渭南春色! 2019-05-20
  • 汪峰章子怡带女儿醒醒看马戏表演 满脸幸福 2019-05-19
  • 爱护民生:什么基金都不能买,即使获利,也不会给分多少红利,只是意思意思。 2019-05-19
  • 北京市北京盈之宝4S店【在线咨询】 2019-05-18
  • 美媒:研究发现高血压会增加痴呆风险 2019-05-18
  • 房价还会跌吗?这几条黄金线索告诉你背后的事实 ——凤凰网房产西安 2019-05-17
  • 搞市场经济,也不意味这政府就能偷懒,不是什么都甩给市场,美其名曰"市场会自我调节" 2019-05-17
  • 经常吃它到老耳聪目明牙齿好 让你越来越健康-美食资讯 2019-05-16
  • 端午小长假杭州接待游客454.8万人次 9成民宿预订一空 2019-05-16
  • 十九大党章修正案的新时代意蕴 2019-05-15
  • 勇敢挑战“不可能”(今日谈) 2019-05-14
  • 第十三届“三晋之春”合唱比赛在阳泉开幕 2019-05-14
  • 驴友在北京凤凰岭失联 百人搜救七天仍未找到踪迹 2019-05-13
  • 光明网招聘时事新闻分析编辑 2019-05-12
  • 336| 120| 313| 166| 676| 167| 864| 266| 610| 626|