Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >bootstrap table+layer实现一个表格删除

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

作者头像
王小婷
发布于 2025-05-19 04:44:07
发布于 2025-05-19 04:44:07
870
举报
文章被收录于专栏:编程微刊编程微刊

当选着删除按钮的时候,我们一般都会使用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'

});

}

});

}

```

原文链接:https://blog.csdn.net/qq_36538012/article/details/10051735

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-05-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Bootstrap Table使用教程(请求json数据渲染表格)
今天来写一个关于Bootstrap Table使用教程(请求json数据渲染表格) json数据来源于后端小伙伴的接口,我放在本地进行模拟了
王小婷
2019/11/07
7.7K0
Bootstrap Table使用教程(请求json数据渲染表格)
Bootstrap Table批量(全选)删除
3:最主要的是js里面实现,删除按钮事件 获得要删除整条数据的id,并且传递给后端,在数据库进行操作
王小婷
2025/05/18
1170
Bootstrap Table批量(全选)删除
Bootstrap Table批量(全选)删除
3:最主要的是js里面实现,删除按钮事件 获得要删除整条数据的id,并且传递给后端,在数据库进行操作
王小婷
2019/03/19
7.4K0
Bootstrap Table批量(全选)删除
easyui常用组件
表单 日期选择(html初始化) <input name="tadminModel.birthday" class="easyui-validatebox Wdate" style="width: 370px;" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',position:{right:0,top:0}})"/> 按钮(html初始化) <a type="button" href="javascript:;" class="easyui-linkbutton" i
码客说
2019/10/22
2.4K0
Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结
https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js
授客
2019/09/10
13.6K0
Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结
python测试开发django-124.bootstrap点删除按钮弹确认删除
批量删除bootstrap-table数据,需先弹出确认删除框,提醒用户是否确定删除。 点确定按钮的时候需获取到table表格中选中的数据id数据。
上海-悠悠
2021/09/14
2K0
Bootstrap Table写一个Demo
基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。
王小婷
2019/05/17
1.6K0
python测试开发django-121.bootstrap-table弹出模态框修表格数据提交
整个body内容如下,模态框设置id属性id=”myModal” 修改按钮的id属性id=”btn_edit”
上海-悠悠
2021/09/14
1.4K0
jQuery+Datatables实现表格批量删除功能
祖传代码的存在,这个项目自我进公司以来,就一直在改写加上维护,没有什么太厉害的技术,据说在我进公司之前,是经过两个Java后台来编写遗留下来的代码,公司觉得若是重新搭建框架过于费力,于是一直沿用至今,随着功能的越来越多,维护起来也是相当的费脑,每次修改的时候,我都会将某个部分的功能记录下来,写在自己的技术博客里面,以防混淆。
王小婷
2018/10/26
3.2K0
python测试开发django-125.bootstrapTable获取选中行的数据
选中多行,获取选中行的所有数据:bootstrapTable(‘getSelections’)
上海-悠悠
2021/10/08
1.5K0
LayUI树形表格treetable使用详解
LayUI是现在比较流行的一款前端框架,也有很多人基于LayUI开发了很多不错的组件,比如treetable树形表格。因为treetable是第三方基于LayUI开发的,所以需要先用Layui引入一下文件。
全栈程序员站长
2022/07/01
9.4K1
LayUI树形表格treetable使用详解
自用插件整理之表格bootstrap-table
本插件基于bootstrap,网上各种例子也比较多,本文就不详细列api一类的了,只将自己常用的记录一下。多数代码中存在的注释,就不再重写。
WindCoder
2018/09/20
3.2K0
自用插件整理之表格bootstrap-table
【php增删改查实例】第十二节 - 数据删除功能/2、批量删除
1、单条数据删除 思路:首先,需要也只能允许用户勾选一条数据,然后弹出一个确认框,问用户是否真的要删除?如果是,就把ID传递到PHP,然后写一个delete语句,通过ID去删除即可。 画好了按钮之后,
剽悍一小兔
2018/06/06
1.5K0
EngineerCMS核心代码
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/details/53367020
hotqin888
2018/09/11
1.4K0
layer弹框删除ztree节点非阻塞问题解决
在ztree里面,删除一个节点的时候,会弹出一个弹框询问,是否删除,本来用的是网页自带的confirm弹框,根据公司的业务需求,要用到layer弹框删除,这个时候,就出现了一个问题。
王小婷
2019/09/18
9010
Bootstrap Table根据参数搜索功能
在使用jQuery开发的时候,经常会用到Bootstrap Table来实现需要用到的一些表格。
王小婷
2025/05/19
1100
Bootstrap Table根据参数搜索功能
实例分享jQuery EasyUI开发技巧总结
jQuery EasyUI 是一组基于 jQuery 的 UI 插件集合体,而 jQuery EasyUI 的目标就是帮助 web 开发者更轻松的打造出功能丰富并且美观的 UI 界面。开发者不需要编写复杂的 javascript,也不需要对 css 样式有深入的了解,开发者需要了解的只有一些简单的 html 标签。 jQuery EasyUI 开发技巧总结 1、使用 tabs 时,如果使用的不是 url,而是 content,则要嵌入 iframe addTab({ title:node.text, c
沈唁
2018/05/24
1.1K0
layui 树形表格 treeTable使用详细指南,不能折叠解决办法
最近在写一个商品分类管理的功能,本来想用layui的树形组件来写,但发现layui原生的tree只能展示title,而分类的其他字段无法展示,这就有点不适用了,无意中看到一位大神自定义写的一个树形表格组件,正好满足我的要求,特此将使用方法以及其中遇到的一些坑记录下来。。。
全栈程序员站长
2022/08/22
5.7K0
layui 树形表格 treeTable使用详细指南,不能折叠解决办法
ABP入门系列(14)——应用BootstrapTable表格插件
源码路径:Github-LearningMpaAbp 1. 引言 之前的文章ABP入门系列(7)——分页实现讲解了如何进行分页展示,但其分页展示仅适用于前台web分页,在后台管理系统中并不适用。后台管
圣杰
2018/01/11
4.7K0
ABP入门系列(14)——应用BootstrapTable表格插件
表格插件-bootstrap table的分页使用示例
4:完整的添加数据之后显示在表格里面,自动分页代码,删除和编辑效果 jsp界面 :
王小婷
2018/12/13
3.5K0
表格插件-bootstrap table的分页使用示例
推荐阅读
相关推荐
Bootstrap Table使用教程(请求json数据渲染表格)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档