BootstrapTable之前端导出、字段排序、表头固定

BootstrapTable之前端导出、字段排序、表头固定

BootstrapTable是一个高效的表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。

---

前言

本文章记录的是利用BootstrapTable实现数据展示、数据导出（前端导出）、字段排序、表头固定（设置height属性即可）

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、BootstrapTable实现数据展示

直接上代码：

    <div class="col-md-12">
        <iframe id="frameForExport" src=""  style="visibility: hidden;width: 0;height: 0;padding: 0;margin: 0;border: 0" ></iframe><!-- excel导出功能使用 -->
        <div class="portlet light container-ridius">
            <div class="panel-body">
<%--                <button type="button" onclick="exportData()" class='btn btn-mini btn-info'>导出</button>--%>
                <table data-toggle="table" id="table"
                       data-classes="table table-hover" data-striped="true"
                       data-pagination="true" data-side-pagination="server"
                       data-toolbar="#toolbar" class="text-nowrap">
                </table>
            </div>
        </div>

    </div>



    function renderTable() {
        $("#table").bootstrapTable(
            {
                url : "<%=request.getContextPath()%>/rest/feeReport/getRollDepartmentList",  //后端请求地址
                clickToSelect : true,
                //showToggle : true,
                dataType : "json",
                pageNumber : 1,
                pagination: false,                   //是否显示分页（*）
                height:590,                          //加入height属性即可对表头进行固定

                sortable : true,                      //所在列是否排序

                showExport: true,      //是否显示导出
                buttonsAlign: "left",  //按钮位置
                // exportOptions: {
                //     fileName: '',//下载文件名称
                // },

                //pageSize : 20,
                //pageList : [ 5, 10, 20 ],
                //sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）,
                contentType : "application/x-www-form-urlencoded;charset=utf-8",
                method : 'post',
                cache :false,
                //dataField : "data",
                //是否显示详细视图和列表视图的切换按钮
                queryParams : function(params) {//自定义参数，这里的参数是传给后台的，我这是分页用的
                    return {
                        //这里的params是table提供的
                        //offset : params.offset,//从数据库第几条记录开始
                        //limit : params.limit,//找多少条
                        year:$('#s_year').val(),
                        yearMonth:$('#s_yearMonth').val(),
                        property:$('#s_property').val(),
                        SBU:$('#s_SBU').val(),
                        project:$('#s_project').val(),
                        subjectLevel:$('#s_subjectLevel').val(),
                        versionCode1:$('#s_versionCode1').val(),
                        versionCode2:$('#s_versionCode2').val(),
                        'sortName': this.sortName,    //排序使用
                        'sortOrder': this.sortOrder,  //排序使用
                    };
                },
                columns : [
                    [
                        {
                            field : 'FIELD',
                            title : 'TITLE',
                            align : 'center',
                            rowspan:2
                        },
                        {
                            field : 'FIELD',
                            title : 'TITLE',
                            align : 'center',
                            rowspan:2
                        },
                        {
                            field : 'FIELD',
                            title : 'TITLE',
                            align : 'center',
                            rowspan:2
                        },
                        {
                            field : 'FIELD',
                            title : 'TITLE',
                            align : 'center',
                            rowspan:2
                        },
                            field : 'FIELD',
                            title : 'TITLE',
                            align : 'center',
                            colspan:6
                        },
                        {
                            field : 'FIELD',
                            title : 'TITLE',
                            align : 'center',
                            colspan:6
                        }
                    ],
                    [
                        {
                            field : 'FIELD',
                            title : 'TITLE',
                            sortable : true,   //所在列是否排序
                            align : 'center'
                        },
                        {
                            field : 'FIELD',
                            title : 'TITLE',
                            sortable : true,   //所在列是否排序
                            align : 'center'
                        },
                        {
                            field : 'FIELD',
                            title : 'TITLE',
                            sortable : true,   //所在列是否排序
                            align : 'center'
                        },
                        {
                            field : 'FIELD',
                            title : 'TITLE',
                            sortable : true,   //所在列是否排序
                            align : 'center'
                        },
                        {
                            field : 'FIELD',
                            title : 'TITLE',
                            sortable : true,   //所在列是否排序
                            align : 'center'
                        },
                        {
                            field : 'FIELD',
                            title : 'TITLE',
                            sortable : true,   //所在列是否排序
                            align : 'center'
                        },

                        {
                            field : 'FIELD',
                            title : 'TITLE',
                            sortable : true,   //所在列是否排序
                            align : 'center'
                        },
                        {
                            field : 'FIELD',
                            title : 'TITLE',
                            sortable : true,   //所在列是否排序
                            align : 'center'
                        },
                        {
                            field : 'FIELD',
                            title : 'TITLE',
                            sortable : true,   //所在列是否排序
                            align : 'center'
                        },
                        {
                            field : 'FIELD',
                            title : 'TITLE',
                            sortable : true,   //所在列是否排序
                            align : 'center'
                        },
                        {
                            field : 'FIELD',
                            title : 'TITLE',
                            sortable : true,   //所在列是否排序
                            align : 'center'
                        },
                        {
                            field : 'FIELD',
                            title : 'TITLE',
                            sortable : true,   //所在列是否排序
                            align : 'center'
                        },
                    ]
                ],
                onLoadSuccess: function () {
                    //alert("数据加载成功！");
                },
                onLoadError: function () {
                    //alert("数据加载失败！");
                },

            });

如图所示：

二、字段排序

即上述代码的sortable : true属性；上图中字段上会出现上下的箭头

  'sortName': this.sortName,    //排序使用
  'sortOrder': this.sortOrder,  //排序使用

将字段回传后台在sql中按需排序即可：

        <if test="input.sortName != null and input.sortName != '' and input.sortOrder != null and 							   input.sortOrder != ''">
            ORDER BY ${input.sortName} ${input.sortOrder}
        </if>

二、数据导出（使用BootstrapTable可实现前端导出，即前端表中是数据显示什么，导出的就是什么）

即上述代码的 showExport: true, buttonsAlign: “left”, 两个属性可实现导出，但是BootstrapTable自定义的按钮很难看，可通过下述代码实现自定义按钮：

    自定义按钮导出数据
    function exportData(){
        $('#table').tableExport({
            type: 'excel',
            exportDataType: "all",
            //ignoreColumn: [0],//忽略某一列的索引
            fileName: '',//下载文件名称
            onCellHtmlData: function (cell, row, col, data){//处理导出内容,自定义某一行、某一列、某个单元格的内容
                console.info(data);
                return data;
            },
        });
    }

总结

BootstrapTable是一个很好用的表格插件，但是在使用中遇到了表头固定，表中数据和表头对不齐的问题，至今也没有解决吗，如有解决的大佬请指导我。