Bootstrap table 的扩展引用

什么是Boootstrap table?

Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动行、移动列位置等一些特殊的功能，插件可以用基于HTML5的data-*属性标识设置，也可以使用Javascript方式进行设置，非常方便。

怎么使用Bookstrap-table?

• 需要引入Bootstrap的脚本和样式 <link rel="stylesheet" href="./css/bootstrap.min.css">

<script src="./js/jquery.min.js"></script>

<script src="./js/bootstrap.min.js"></script>

• Bookstrap-table的依赖引用: css文件

<link rel="stylesheet" href="./css/bootstrap-table.min.css">

脚本文件引入

<script src="/js/bootstrap-table.min.js"></script>

<script src="./js/bootstrap-table-print.min.js"></script>

<script src="./js/bootstrap-table-export.min.js"></script>

在HTML上声明一个表格对象,html代码

<table class="table"></table>

js代码

 $('.table').bootstrapTable('destroy').bootstrapTable({
    columns: [{
                field: '_id',  //字段  绑定对象的属性
                title: '编号'   //列名
               }, {
                field: 'title',
                title: '标题'
               }, {
                field: 'content',
                title: '内容'
             }]
          })

Bookstrap-table详情

• pagination: true,//启用分页
• pageSize: 3, //分页大小
• pageList:[5,10,20], //自己选择分页大小
• showToggle: true, //列表视图 表格视图
• showPaginationSwitch: true, //分页开关
• showFullscreen: true, //全屏显示
• search: true, //启用查询
• showSearchButton: true, //显示查询按钮
• showPrint: true, //显示打印按钮
• showExport: true, //显示导出按钮

• js代码

 <script>
        $(function () {
            load();

            $(".table").on("click",".glyphicon-remove",function(){
                var id=$(this).parent().attr("data-id");
                $.ajax({
                    url: "http://localhost:5000/content",
                    type: "DELETE",
                    data:{_id:id},
                    success: function (res) {
                        if (res.status === 200) {
                            load();
                        }
                    }
                })
            })

            // Fixed Columns 固定列
            function load() {
                $.ajax({
                    url: "http://localhost:5000/content",
                    type: "GET",
                    success: function (res) {
                        console.log(res);
                        if (res.status === 200) {
                            $('.table').bootstrapTable('destroy').bootstrapTable({
                                data: res.data,
                                // url:"",数据源 请求地址
                                pagination: true,//启用分页
                                pageSize: 3,  //分页大小
                                // pageList:[5,10,20],  //自己选择分页大小

                                showToggle: true,  //列表视图  表格视图
                                showPaginationSwitch: true,  //分页开关
                                showFullscreen: true,  //全屏显示
                                // showRefresh:true,  //刷新   仅支持 url数据源
                                
                                search: true,  //启用查询
                                showSearchButton: true,  //显示查询按钮

                                showPrint: true,  //显示打印按钮
                                showExport: true,   //显示导出按钮

                                // 列
                                columns: [{
                                    field: '_id',  //字段  绑定对象的属性
                                    title: '编号'   //列名
                                }, {
                                    field: 'title',
                                    title: '标题'
                                }, {
                                    field: 'content',
                                    title: '内容'
                                }, {
                                    field: 'top',
                                    title: '是否置顶',
                                    formatter: function (value, data) {
                                        // value当前列的值
                                        // data当前行的数据
                                        return value ? "是" : "否";
                                    }
                                }, {
                                    title: "操作",
                                    formatter: function (value, data) {
                                        return `<a href="#" data-id="${data._id}"><span class="glyphicon glyphicon-edit text-primary"></span></a>
                                                <a href="#" data-id="${data._id}"><span class="glyphicon glyphicon-remove text-danger"></span></a> `
                                    }
                                }],

                                // 自定义按钮集合
                                buttons: function () {
                                    return {
                                        btnAdd: {
                                            icon: 'glyphicon glyphicon-plus',
                                            event: function () {
                                                alert('添加')
                                            },
                                            attributes: {
                                                title: "add"
                                            }
                                        },
                                        btnDel: {
                                            icon: 'glyphicon glyphicon-remove',
                                            event: function () {
                                                alert('删除')
                                            },
                                            attributes: {
                                                title: "remove"
                                            }
                                        }
                                    }
                                }
                            })
                        }
                    }
                })
            }
        })
    </script>

• 运行效果