bootstrap-table相关

最新推荐文章于 2022-01-23 16:56:16 发布

jojo付啾啾

最新推荐文章于 2022-01-23 16:56:16 发布

阅读量170

点赞数

分类专栏： bootstrap 文章标签： bootstrap-table bootstrap-table给表格添加复选框通过html方式给bootstraptable添加复选框

本文链接：https://blog.csdn.net/DreamFJ/article/details/82840808

版权

bootstrap 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

bootstrap-table官方文档

各种bootstrap-table资源文件下载

使用方法参考（其实也就是介绍了部分官方文档的方法，官方文档很多都写到了，但是没有很详细，所以我每次要看了别人的用法再反过来看官方文档才恍然大悟，原来文档里都写了）：【Bootstrap】 bootstrap-table表格组件

通过Data属性的方式，无需编写JavaScript启用bootstrap table, 设置data-toggle="table"即可，同理，如果相以js方式启用bootstrap table，那就不要设置data-toggle="table"！

bootstrap-table给表格添加复选框，可以通过html方式（必须给checkbox留dom位置），或者js方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-table.min.css">

</head>

<body>
    <!-- <table id="table"></table> -->
    <table class="table table-bordered table-hover" id="table">
        <thead>
            <tr>
                <th></th>
                <th>Item ID</th>
                <th>Item Name</th>
                <th>Item Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td>1</td>
                <td>Item 1</td>
                <td>$1</td>
            </tr>
            <tr>
                <td></td>
                <td>2</td>
                <td>Item 2</td>
                <td>$2</td>
            </tr>
        </tbody>
    </table>
    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.min.js"></script>
    <script>
        $('#table').bootstrapTable({
            pagination: true,
            sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1, //初始化加载第一页，默认第一页,并记录
            pageSize: 5,
            clickToSelect: true,
            maintainSelected: true, // 带分页的话可以保持其他页选中的
            columns: [{
                checkbox: true
            }]
        });

        // 纯js方法
        // $('#table').bootstrapTable({
        //     columns: [{
        //         checkbox: true
        //     }, {
        //         field: 'id',
        //         title: 'Item ID'
        //     }, {
        //         field: 'name',
        //         title: 'Item Name'
        //     }, {
        //         field: 'price',
        //         title: 'Item Price'
        //     }],
        //     data: [{
        //         id: 1,
        //         name: 'Item 1',
        //         price: '$1'
        //     }, {
        //         id: 2,
        //         name: 'Item 2',
        //         price: '$2'
        //     }]
        // });
    </script>
</body>

</html>

jojo付啾啾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap-table相关

bootstrap-table官方文档各种bootstrap-table资源文件下载使用方法参考（其实也就是介绍了部分官方文档的方法，官方文档很多都写到了，但是没有很详细，所以我每次要看了别人的用法再反过来看官方文档才恍然大悟，原来文档里都写了）：【Bootstrap】 bootstrap-table表格组件通过Data属性的方式，无需编写JavaScript启用bootstrap t...
复制链接

扫一扫

专栏目录