Bootarp-table

Bootarp-table是在由$.ajax获取后端数据的同时使用 Bootarp-table添加的前端页面格式。 包含将后台数据以表格形式转为前端页面后的各种样式，其中columns等同于<table>标签中的<th>, 而title等同于其中的<td>,field通过数据的name将后端数据传出。

$.ajax({
                    url: "http://localhost:3000/content",
                    type: "GET",
                    success: function (res) {
                        if (res.status === 200) {
                            $('.table').bootstrapTable('destroy').bootstrapTable({
                                data: res.data,//属性名称
                                //url:""  "请求数据源"
                                
                                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>`;
                                    }
                                
                                }
                            }
                   })
            

在Bootarp-table中还有众多按钮，以下是其中一部分，写在columns前。

                                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",//导出按钮

点击查询更多 使用它们需要的外部文件如下：

其中打印需要的文件为：

bootstrap-table-print.min.js

导出需要的文件为：

1. tableExport.min.js
2. jspdf.min.js
3. jspdf.plugin.autotable.js

对应的文件可以在搜索中通过Ctrl + S 获取。 bootstrap-table.min.css与bootstrap-table.min.js为Bootarp-table的基础文件，使用时请选择相对应的版本。