Bootstrap-Table 是一个基于 Bootstrap 的表格插件,它提供了丰富的功能和灵活的配置选项,使得在网页中创建美观且功能强大的表格变得非常简单。在本文中,我们将探讨如何使用 Bootstrap-Table 实现列表的选中与操作技巧。
1. 初始化表格
首先,你需要引入 Bootstrap 和 Bootstrap-Table 的 CSS 和 JS 文件。以下是一个基本的 HTML 结构:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table/dist/bootstrap-table.min.css">
</head>
<body>
<div class="container">
<table id="table"></table>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table/dist/bootstrap-table.min.js"></script>
</body>
</html>
2. 配置表格
接下来,我们需要配置表格的列和选项。以下是一个示例:
$(function () {
var $table = $('#table');
$table.bootstrapTable({
url: 'data.json', // 数据源地址
method: 'get', // 请求方式
columns: [{
checkbox: true // 显示复选框
}, {
field: 'id',
title: 'ID'
}, {
field: 'name',
title: '姓名'
}, {
field: 'email',
title: '邮箱'
}, {
field: 'operate',
title: '操作',
formatter: operateFormatter,
events: operateEvents
}]
});
function operateFormatter(value, row, index) {
return [
'<button class="btn btn-primary btn-sm">编辑</button>',
'<button class="btn btn-danger btn-sm">删除</button>'
].join('');
}
window.operateEvents = {
'click .btn-primary': function (e, value, row, index) {
// 编辑操作
},
'click .btn-danger': function (e, value, row, index) {
// 删除操作
$table.bootstrapTable('remove', {
field: 'id',
values: [row.id]
});
}
};
});
3. 选中与操作
3.1 选中行
Bootstrap-Table 支持多种选行方式,包括单选、多选和全选。以下是一个示例:
// 单选
$table.bootstrapTable('select', {field: 'id', values: [1]});
// 多选
$table.bootstrapTable('select', {field: 'id', values: [1, 2, 3]});
// 全选
$table.bootstrapTable('checkAll');
// 取消全选
$table.bootstrapTable('uncheckAll');
3.2 获取选中行
你可以通过以下方法获取选中的行:
var selected = $table.bootstrapTable('getSelections');
3.3 操作行
在 operateFormatter 函数中,我们可以定义操作行的逻辑。以下是一个示例:
function operateFormatter(value, row, index) {
return [
'<button class="btn btn-primary btn-sm">编辑</button>',
'<button class="btn btn-danger btn-sm">删除</button>'
].join('');
}
window.operateEvents = {
'click .btn-primary': function (e, value, row, index) {
// 编辑操作
},
'click .btn-danger': function (e, value, row, index) {
// 删除操作
$table.bootstrapTable('remove', {
field: 'id',
values: [row.id]
});
}
};
4. 总结
通过以上步骤,你可以轻松使用 Bootstrap-Table 实现列表的选中与操作。Bootstrap-Table 提供了丰富的功能和灵活的配置选项,使得在网页中创建美观且功能强大的表格变得非常简单。希望本文能帮助你更好地理解和使用 Bootstrap-Table。
