bootstraptable删除行
时间: 2023-12-07 22:38:05 浏览: 146
以下是使用Bootstrap Table删除行的方法和示例代码:
1. 在HTML文件中引入Bootstrap Table的CSS和JS文件:
```html
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css">
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
```
2. 在HTML文件中创建一个表格,并设置表格的ID和data-url属性:
```html
<table id="table" data-url="data.json"></table>
```
3. 在JavaScript文件中初始化表格,并添加删除按钮的点击事件:
```javascript
$(function () {
// 初始化表格
$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: 'Name'
}, {
field: 'price',
title: 'Price'
}],
data: [{
id: 1,
name: 'Item 1',
price: '$1'
}, {
id: 2,
name: 'Item 2',
price: '$2'
}, {
id: 3,
name: 'Item 3',
price: '$3'
}]
});
// 添加删除按钮的点击事件
$('#delete').click(function () {
var ids = $.map($('#table').bootstrapTable('getSelections'), function (row) {
return row.id;
});
$('#table').bootstrapTable('remove', {
field: 'id',
values: ids
});
});
});
```
在上面的代码中,我们首先使用`bootstrapTable()`方法初始化了一个表格,并设置了表格的列和数据。然后,我们添加了一个删除按钮的点击事件,该事件会获取选中行的ID,并使用`remove()`方法从表格中删除这些行。
阅读全文