Bootstrap Table中的多选框删除

本文介绍如何使用BootstrapTable插件的getSelections方法获取选中的行,并将其ID用于执行删除操作。通过示例代码展示了从表格中选择多行并获取其ID的过程。
先上代码,后面再进行详细解释:
   
// 删除按钮事件
       $("#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. 效果图


2. 获得要删除的数据




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



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


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

把idcard打印出来,

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

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



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


注意!

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


这样就成功完成,有没有感觉很简单。



<think>首先,用户的问题是:“我想查找在BootstrapTable中添加checkbox框的方法 请问BootstrapTable添加checkbox框的方法”。基于系统级指令,我需要使用中文回答,并且确保回答结构清晰。 用户提供了几个引用,我需要参考这些引用: - 引用[1]: 提到通过设置columns数组添加checkbox,并使用hideColumn来控制checkbox的显示。 - 引用[2]: 讨论复选框默认选中,使用formatter函数。 - 引用[3]: 关于表格行内编辑,提到onClickCell方法。 - 引用[4]: 表头添加搜索框,但似乎不直接相关。 - 引用[5]: 使用checkbox进行删除操作,处理选中的行。 用户的问题核心是添加checkbox框的方法,所以我应该聚焦在如何添加checkbox上。 关键点来自引用[1]和[引用2]: - 在BootstrapTable中添加checkbox,需要在columns定义中添加一个字段,设置checkbox: true。 - 例如:columns: [{ field: 'column', checkbox: true }] - 然后,可以通过bootstrapTable方法来控制其显示或隐藏,如hideColumn。 引用[2]提到了使用formatter来自定义复选框的状态。 我应该结构化我的回答: 1. **介绍方法**:如何使用columns定义添加checkbox。 2. **详细步骤**:给出示例代码。 3. **相关功能**:如如何默认选中,如何控制显示等。 4. **生成相关问题**:根据系统指令,需要在回答末尾生成相关问题。 确保使用中文回答。 回答结构: - 先直接回答添加checkbox的方法。 - 然后提供代码示例。 - 最后生成相关问题。 参考引用: - [^1] 提到添加checkbox列并控制显示。 - [^2] 提到默认选中和formatter。 - [^5] 提到如何处理选中的行。 所以,在回答中引用这些。 代码格式:如指令所说,独立代码块使用```...```。 系统指令要求:行内数学表达式用$...$,但这里不需要数学表达式,所以忽略。 最后,自然地添加引用标识。 生成相关问题:基于添加checkbox的主题,生成相关的问题,如: 1. 如何默认选中某些checkbox? 2. 如何获取选中的行? 3. 如何自定义checkbox的行为? 完整回答框架: 1. 开头解释添加checkbox的方法。 2. 给出代码示例。 3. 解释如何控制显示(参考引用[1])。 4. 提及如何默认选中(参考引用[2])。 5. 简要说明如何处理选中的行(参考引用[5])。 6. 结尾添加相关问题。 </think>### BootstrapTable 添加checkbox框的方法 在BootstrapTable中添加checkbox框是一个常见的需求,主要用于行选择功能(如多选删除、批量操作)。基于您提供的引用[^1]和[^2],核心方法是通过配置columns数组来实现,其中添加一个字段并设置checkbox: true。以下是详细步骤和代码示例,确保方法真实可靠(参考官方文档和引用内容)。 #### 1. **基本配置添加checkbox** 在初始化BootstrapTable时,在columns选项中添加一个字段,设置field属性和checkbox: true。field属性可以是任意字符串,但通常用于存储选中状态。例如: ```javascript $('#tableName').bootstrapTable({ columns: [{ field: 'select', // 字段名,用于标识checkbox checkbox: true // 设置为true表示启用checkbox }, { field: 'id', title: 'ID' }, { field: 'name', title: '名称' }], data: [ // 示例数据 { id: 1, name: '项目A' }, { id: 2, name: '项目B' } ] }); ``` - 这样,表格左侧会自动添加一列checkbox框。 - 引用[^1]提到,通过这种方法定义的checkbox列,可以使用bootstrapTable方法控制其显示或隐藏,例如隐藏checkbox列: `$("#tableName").bootstrapTable('hideColumn', 'select')`。 #### 2. **自定义checkbox行为(可选)** - **默认选中某些行**:如引用[^2]所述,可以使用formatter函数来设置默认选中状态。formatter函数返回一个布尔值控制是否选中。 ```javascript columns: [{ field: 'select', checkbox: true, formatter: function(value, row, index) { // 示例:如果row.status为1,则默认选中 return row.status === 1; // 返回true表示选中,false表示不选中 } }] ``` - **处理选中行的事件**:可以使用BootstrapTable的事件如check.bs.table或uncheck.bs.table来响应选择变化。 ```javascript $('#tableName').on('check.bs.table', function (e, row) { console.log('选中行:', row); // 处理单个行选中事件 }); ``` #### 3. **获取选中的行并处理** 参考引用[^5],可以通过bootstrapTable方法获取所有选中的行,常用于批量操作场景(如删除)。示例代码如下: ```javascript function deleteSelected() { var selectedRows = $('#tableName').bootstrapTable('getSelections'); // 获取选中的行对象数组 if (selectedRows.length === 0) { alert("请选择需要删除的记录"); return; } else { var ids = selectedRows.map(function(row) { return row.id; }).join(','); // 提取ID并拼接 console.log('待删除IDs:', ids); // 这里可添加AJAX请求删除操作 } } ``` - 这个方法使用了getSelections API,确保了高效处理选中数据[^5]。 #### 4. **注意事项** - **控制checkbox显示**:如引用[^1]所示,调用hideColumn或showColumn动态切换checkbox列的可见性。 - **兼容性**:此方法适用于BootstrapTable v1.x及更高版本。 - **常见问题**: - 如果checkbox不显示,检查field是否与数据源冲突。 - 使用formatter时,确保函数逻辑正确,避免影响渲染性能。 通过以上步骤,您可以轻松在BootstrapTable中添加和管理checkbox框。如果需要进一步优化(如行内编辑),引用[^3]提到的onClickCell方法也可结合使用,但这超出了本问题的核心范围。 ### 相关问题 1. 如何实现BootstrapTable中checkbox的默认选中功能? 2. 如何在BootstrapTable中获取并处理多个选中的行数据? 3. BootstrapTable的checkbox列如何支持动态显示或隐藏?
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值