正文

如何轻松使用Bootstrap-Table实现列表的选中与操作技巧

/0 浏览量
0430

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。

-- 展开阅读全文 --