bootstrap-table使用

Bootstrap-Table导出插件bootstrap-table-export使用方式

  • 一、Bootstrap-table-export插件使用
  • 二、Bootstrap-table 表头和表格错位问题
  • 三、表格添加自定义按钮
  • 四、Bootstrap中tab页及插件使用

使用方式

一、Bootstrap-table-export插件使用

Bootstrap-table-export插件下载：https://bootstrap-table.com/docs；
在该文档的extensions目录下，可以看到可以使用的依赖插件列表，其中就包括Export文件。
bootstrap-table-1-2019323123635

导出支持以下格式：
['json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel','xlsx', 'pdf']
默认支持，其他的需要单独引入插件：
['json', 'xml', 'csv', 'txt', 'sql', 'excel']

  1. 找到dist\extensions\export\bootstrap-table-export.min.js文件，引入项目中；
  2. 使用该插件还需要引入以下依赖：

TableExport插件依赖于jQuery（1.2.1+），FileSaver.js。为了支持.xlsx（Office Open XML SpreadsheetML Format）格式，你必须在 FileSaver.js 和 TableExport.js文件之前引入xlsx-core.js文件。为了使旧的浏览器（Firefox < 20, Opera < 15, Safari < 6）支持.xlsx，需要在 FileSaver.js 文件之前引入 Blob.js文件。

二、Bootstrap-table 表头和表格错位问题

在bootstrap-table.js源码中找到以下位置：

1
2
3
4
this.$tableHeader.show();
// 注释掉下面两行 取消表头初始化，解决表头和内容不对齐问题
// this.resetHeader();
// padding += this.$header.outerHeight(true);

三、 表格添加自定义按钮

如下：

bootstrap-table-2-2019323233029

第一步：table 表格上方添加一个div，里面自定义按钮，为了和自带的按钮放到一排，需要设置该div的id为toolbar：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div class="form-group">
    <div id="toolbar" class="btn-group">
        <button type="button" class="btn btn-success" id="btn_add">
            <span class="glyphicon glyphicon-plus"></span>
            新增
        </button>
        <button type="button" class="btn btn-danger" id="btn_del">
            <span class="glyphicon glyphicon-trash"></span>
            批量删除
        </button>
        <button type="button" class="btn btn-info" id="btn_import">
            <span class="glyphicon glyphicon-import"></span>
            批量导入
        </button>
        <button type="button" class="btn btn-primary" id="btn_search">
            <span class="glyphicon glyphicon-search"></span>
            查询
        </button>
    </div>
</div>

第二步：使用js初始化表格时，需要添加设置：

1
2
toolbar: "#toolbar",             //指定工具栏
toolbarAlign: "left",            //工具栏对齐方式

四、Bootstrap中tab页及插件使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
;(function ($) {
    $.extend($, {
        /**
         * 添加标签页
         * @param tabItem {id: '标签页id', name: '标签页name', url: 'iframe要加载的url',closable 是否可关闭}
         */
        addTab: function (tabItem) {
            var theOriginalId = tabItem.id;
            var newId = theOriginalId.replace(/\./g, "");
            var tabId = 'tab_title_' + newId;
            var panelId = 'tab_panel_' + newId;
            var iframeId = 'tab_iframe_' + newId;
            if (!$('#' + tabId)[0]) {
                $("li[id^=tab_title_]").removeClass('active');
                $('.content-wrapper > .tab-content').children($("div[id^=tab_panel_]")).removeClass('active');
                $('.content-wrapper > .nav.nav-tabs').append(
                    $('<li>').attr({'id': tabId}).addClass('active')
                        .append($('<a>').attr({'href': '#' + panelId, 'data-toggle': 'tab'})
                            .append($('<span>').text(tabItem.name))
                            .append(function () {
                                if (tabItem.closable) {
                                    return $('<i>').addClass('glyphicon glyphicon-remove small').attr({'tabclose': tabId})
                                        .css({position: 'absolute', right: '4px', top: '4px', 'cursor': 'pointer'})
                                        .on('click', function (e) {
                                            $.closeTab(tabId);
                                        });
                                }
                            }))
                )
                $('.content-wrapper > .tab-content').append(
                    $('<div>').attr({'role': 'tabpanel', 'id': panelId}).addClass('tab-pane active')
                        .append($('<iframe>').attr({'id': iframeId, frameborder: '0', 'src': tabItem.url})
                            .css({'overflow-x': 'hidden', 'overflow-y': 'hidden', 'width': '100%', 'height': '100%'})
                            .on('load', function () {
                                $(this).parent().height($.ContentHeight());
                            }))
                )
                $('#' + tabId).children('a[data-toggle=tab]').tab('show');
            }
        },
        closeTab: function (tabId) {
            var closeId = tabId;
            var panelId = 'tab_panel_' + closeId.substring(10);
            if ($('#' + panelId).hasClass('active')) {
                $('#' + closeId).prev().children('a').tab('show');
            }
            $("#" + closeId).remove();
            $("#" + panelId).remove();
        }
    });

使用：

1
2
3
4
5
6
$.addTab({
    id: 'bootstrap_tab_id_',
    name: '标签页名称',
    url: '标签页加载的url',
    closable: true  // 是否可关闭
})

相关文档：