bootstrap-table问题总结

• 列宽

有时候会发现直接设置width的话并没有起作用，列宽完全设置不上去，这时候，可通过以下方式设置：也就是formatter里面return一个dom元素，然后设置这个dom元素的宽就可以了。代码如下：

 {
                field: "customer",
                title: "客户",
                align: 'center',
                valign: "middle",
                formatter: function(value, row, index) {
                    if (value == null) {
                        return '';
                    } else {
                        return '' + value + '';
                    }
                }
            },

这种方式设置后，如果表格td的内容是纯英文，可能也不会出现我们想要的效果，因为英文不会自动换行这个时候可以这样设置：

return '' + value + '';

• 前台分页和后台分页的实现及页码的跳转

实现后效果如下图：

sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
页码跳转：设置：paginationShowPageGo: true
在html中添加：bootstrap-table-pagejump.js,具体内容如下所示：

/**
 * @author zhaoshuxue 
 * extensions: https://github.com/zhaoshuxue/bootstrap-table/src/extensions/page-jump
 */

(function($) {
    'use strict';
    $.extend($.fn.bootstrapTable.defaults, {
        // 默认不显示
        paginationShowPageGo: false
    });

    $.extend($.fn.bootstrapTable.locales, {
        pageGo: function() {
            return 'Page Jump';
        }
    });
    $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales);

    var BootstrapTable = $.fn.bootstrapTable.Constructor,
        _initPagination = BootstrapTable.prototype.initPagination;

    BootstrapTable.prototype.initPagination = function() {
        _initPagination.apply(this, Array.prototype.slice.apply(arguments));
        if (this.options.paginationShowPageGo) {
            var html = [];

            html.push(
                '
',
                '
' + this.options.pageGo() + ':
',
                '
',
                '
GO
',
                '
');
            this.$pagination.find('ul.pagination').after(html.join(''));

            this.$pagination.find('.page-go').off('click').on('click', $.proxy(this.onPageGo, this));
            this.$pagination.find('.page-input').off('keyup').on('keyup', function() {
                this.value = this.value.length == 1 ? this.value.replace(/[^1-9]/g, '') : this.value.replace(/\D/g, '');
            });
        }
    };

    BootstrapTable.prototype.onPageGo = function(event) {
        // var $this = $(event.currentTarget);
        var $toPage = this.$pagination.find('.page-input');

        if (this.options.pageNumber === +$toPage.val()) {
            return false;
        }
        this.selectPage(+$toPage.val());
        // this.options.pageNumber = +$toPage.val();
        // this.updatePagination(event);
        // $this.prev().find('input').val(this.options.pageNumber);
        return false;
    };
})(jQuery);

• 根据后台返回的数据，合并指定列数据相同的列，效果如下图：合并加油人相同的行和消费金额相同的行。

在$("#oilTable").bootstrapTable('destroy').bootstrapTable({})方法里面加入以下内容：

     onLoadSuccess: function(res) {
            console.log(res);
            var data = $('#oilTable').bootstrapTable('getData', true);
            // 合并单元格  
            var fieldList = ["operator", "expense"];
            mergeCells(data, "operator", 1, $('#oilTable'), fieldList);
            // oil_file
        },

页面其他地方加入以下方法：

// 合并单元格
/** 
 * 合并单元格 
 *  
 * @param data 
 *            原始数据（在服务端完成排序） 
 * @param fieldName 
 *            合并参照的属性名称 
 * @param colspan 
 *            合并开始列 
 * @param target 
 *            目标表格对象      
 * @param fieldList 
 *            要合并的字段集合 
 */
function mergeCells(data, fieldName, colspan, target, fieldList) {
    // 声明一个map计算相同属性值在data对象出现的次数和  
    var sortMap = {};
    for (var i = 0; i < data.length; i++) {
        for (var prop in data[i]) {
            //例如people.unit.name  
            var fieldArr = fieldName.split(".");
            getCount(data[i], prop, fieldArr, 0, sortMap);
        }
    }
    var index = 0;
    for (var prop in sortMap) {
        var count = sortMap[prop];
        for (var i = 0; i < fieldList.length; i++) {
            $(target).bootstrapTable('mergeCells', { index: index, field: fieldList[i], colspan: colspan, rowspan: count });
            console.log(count);
            console.log("index=" + index);
            // $(target).bootstrapTable("rowStyle", { index: index, })
        }
        index += count;
    }
}

/** 
 * 递归到最后一层 统计数据重复次数 
 * 比如例如people.unit.name 就一直取到name 
 * 类似于data["people"]["unit"]["name"] 
 */
function getCount(data, prop, fieldArr, index, sortMap) {
    if (index == fieldArr.length - 1) {
        if (prop == fieldArr[index]) {
            var key = data[prop];
            if (sortMap.hasOwnProperty(key)) {
                sortMap[key] = sortMap[key] + 1;
            } else {
                sortMap[key] = 1;
            }
        }
        return;
    }
    if (prop == fieldArr[index]) {
        var sdata = data[prop];
        index = index + 1;

        getCount(sdata, fieldArr[index], fieldArr, index, sortMap);
    }
}

• 用到的一些其他方法有：

现在外部定义一个全局的index变量，用来记录用户操作的时候点击的具体是哪一行。

  //单击行时
        onClickRow: function(row, $element) {
            index = $element.data('index');
        },
        //点击每列前的checkbox时
        onCheck: function(row, $element) {
            index = $element.data('index');
        },
//主要是想实现无ajax的前台填充更新页面的数据，使用updateCell方法。
   $("#oilTable").bootstrapTable('updateCell', {
                        index: index,
                        field: "projectSn", // 字段名称
                        value: $("#add_model .projectSn").val()
                            // 新的值
                    });

• 复杂表头的实现，效果如下图：

具体代码如下：

function loadMaintainList(pageInfo) {
    if (pageInfo == undefined) {
        var pageInfo = { pageNumber: 1, pageSize: 7 };
    }
    $("#maintainTable").bootstrapTable('destroy').bootstrapTable({
        url: allurl + "/car-management/carmaintain/query.action",
        dataType: 'json',
        striped: true, // 是否显示行间隔色
        toggle: "table",
        toolbar: "toolbar_maintainTable",
        pagination: "true", // 是否显示分页（*）
        sortOrder: "asc", // 排序方式
        sidePagination: "server", // 分页方式：client客户端分页，server服务端分页（*）
        pageNumber: pageInfo.pageNumber, // 初始化加载第一页，默认第一页
        pageSize: pageInfo.pageSize, // 每页的记录行数（*）
        paginationShowPageGo: true,
        pageList: [10, 30, 50, 70, 100, 150], // 可供选择的每页的行数（*）
        search: false, // 是否搜索查询
        showColumns: true, // 是否显示所有的列
        showRefresh: false, // 是否显示刷新按钮
        sortable: true, // 是否启用排序
        minimumCountColumns: 2, // 最少允许的列数
        clickToSelect: true, // 是否启用点击选中行
        searchOnEnterKey: true, // 设置为 true时，按回车触发搜索方法
        strictSearch: false, // 设置为 true启用全匹配搜索， 否则为模糊搜索
        showToggle: true, // 是否显示切换视图（table/card）按钮
        searchAlign: "right",
        showExport: true,
        exportDataType: "selected",
        buttonsAlign: "right", // 按钮位置
        exportTypes: ['excel'], // 导出文件类型
        exportOptions: {
            ignoreColumn: [17], // 忽略某一列的索引
            fileName: '测试车辆-车辆维修列表', // 文件名称设置
            worksheetName: 'sheet1', // 表格工作区名称
            tableName: '测试车辆-车辆维修列表',
            excelstyles: ['background-color', 'color', 'font-size', 'font-weight']
                // onMsoNumberFormat: DoOnMsoNumberFormat
        },
        uniqueId: "vSn", // 每一行的唯一标识
        onLoadSuccess: function(res) {
            console.log(res);
            if (window.islogin == undefined || window.islogin == null) {
                $('#maintainTable').bootstrapTable('hideColumn', 'operate');
            } else if (window.islogin.data.roles.length > 0) {
                var userrole = [];
                for (var i = 0; i < window.islogin.data.roles.length; i++) {
                    userrole.push(window.islogin.data.roles[i].name);
                }
                var userroleString = userrole.toString();
                // console.log(userroleString.indexOf("维修技师") != -1);
                if (userroleString.indexOf("超级管理员") != -1 || (userroleString.indexOf("维修管理员") != -1 || userroleString.indexOf("维修技师") != -1)) {
                    $('#maintainTable').bootstrapTable('showColumn', 'operate');
                } else {
                    $('#maintainTable').bootstrapTable('hideColumn', 'operate');
                }
            }
        },
        onLoadError: function() {
            console.log("数据加载失败！");
        },
        onPageChange: function(page, size) {
            var pageInfo = { pageNumber: page, pageSize: size };
            window.sessionStorage.pageInfo = JSON.stringify(pageInfo);
        },
        // 得到查询的参数
        queryParams: function(params) {
            // 这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            var temp = {
                size: params.limit, // 页面大小
                page: (params.offset / params.limit) + 1, // 页码
                sortOrder: "desc", // 排位命令（desc 降序，asc）
                vSn: $(".mainList_vSn").val(),
                status: $("#mainList_status option:selected").val()
            };
            return temp;
        },
        columns: [
            [{
                "title": "测试车辆维修列表",
                "halign": "center",
                "align": "center",
                "colspan": 17
            }],
            [{ field: "checkbox", title: "全选", checkbox: true, valign: "middle", align: 'center', width: "4%", colspan: 1, rowspan: 2 },
                {
                    field: 'ids',
                    title: "序号",
                    valign: "middle",
                    align: "center",
                    width: "4%",
                    colspan: 1,
                    rowspan: 2,
                    formatter: function(value, row, index) {
                        var pageSize = $("#maintainTable").bootstrapTable('getOptions').pageSize; // 通过表的#id
                        var pageNumber = $("#maintainTable").bootstrapTable('getOptions').pageNumber; // 通过表的#id
                        return pageSize * (pageNumber - 1) + index + 1; // 返回每条的序号：
                    }
                },
                { title: "送修申请表", valign: "middle", align: "center", colspan: 7, rowspan: 1 },
                {
                    field: 'status',
                    title: "维修状态",
                    valign: "middle",
                    align: "center",
                    colspan: 1,
                    rowspan: 2,
                    width: "5%",
                    background: '#BFEBEB',
                    formatter: function(value, row, index) {
                        var a = "";
                        if (value == null) {
                            var a = '';
                        } else if (value == "排队中") {
                            var a = '排队中';
                        } else if (value == "维修中") {
                            var a = '维修中';
                        } else if (value == "已完成") {
                            var a = '已完成';
                        }
                        return a;
                    }
                }, {
                    title: "维修协调员填写",
                    valign: "middle",
                    align: "center",
                    colspan: 7,
                    rowspan: 1
                }
            ],
            [{ field: 'vSn', title: '车辆编号', valign: "middle", align: "center", width: "6%" },
                { field: 'item', title: '维修项目', valign: "middle", align: "center", width: "8%" },
                { field: 'send_park', title: '停放地点', valign: "middle", align: "center", width: "6%" },
                { field: 'applyRemark', title: '备注', valign: "middle", align: "center", width: "5%" },
                { field: 'applyPeople', title: '申请人', valign: "middle", align: "center", width: "6%" },
                { field: 'applyTEL', title: '电话', valign: "middle", align: "center", width: "6%" },
                { field: 'applytime', title: '申请日期', valign: "middle", align: "center", width: "7%" },
                { field: 'workContent', title: '工作内容', valign: "middle", align: "center", width: "6%" },
                { field: 'operator', title: '操作员', valign: "middle", align: "center", width: "5%" },
                { field: 'operatorTEL', title: '电话', valign: "middle", align: "center", width: "5%" },
                { field: 'forecastTime', title: '预计完成时间', valign: "middle", align: "center", width: "5%" },
                { field: 'fin_park', title: '停放地点', valign: "middle", align: "center", width: "5%" },
                { field: 'remark', title: '备注', valign: "middle", align: "center", width: "5%" },
                {
                    field: 'operate',
                    title: '操作',
                    valign: "middle",
                    align: 'center',
                    width: "12%",
                    events: maintainListoperateEvents,
                    formatter: maintainListFormatter
                }
            ]
        ]
    })
}

• 数据导出（前台分页和后台分页）

当前台分页时，发现框架的导出：导出全部、导出当前页、导出选中项都没有问题，可以实现。
但是当采用后台分页的时候，发现框架只能实现导出当前页，其他两种导出模式完全失效。

要想在后台分页的情况下，实现前台数据导出选中项，可以修改bootstrap-table-export.js的源码里面的select下面的内容，将原内容删掉，修改添加的代码为：

else if (that.options.exportDataType === 'selected') {
                        // var data = that.getData(),
                        //     selectedData = that.getAllSelections();

                        // that.load(selectedData);
                        // doExport();
                        // that.load(data);
                        // 经检测试验发现：当bootstrap-table
                        // 要想实现：后台分页后，前台导出选中项数据，修改源码为以下代码即可。
                        var trs = that.$body.children();
                        for (var i = 0; i < trs.length; i++) {
                            var $this = $(trs[i]);
                            if (!$this.find(sprintf('[name="%s"]', that.options.selectItemName)).prop('checked')) {
                                $this['hide']();
                            }
                        }
                        doExport();
                        that.getRowsHidden(true);
                    }

• 当用户在第3页进行了操作，更新了表格后，要实现刷新当前页数据，可以当用户选择页面的时候讲当前页面存储到session中，然后获取session中的page和size进行页面的刷新。

//1
if (pageInfo == undefined) {
        var pageInfo = { pageNumber: 1, pageSize: 13 };
    }
    
    //2
onPageChange: function(page, size) {
            var pageInfo = { pageNumber: page, pageSize: size };
            window.sessionStorage.pageInfo = JSON.stringify(pageInfo);
        },
        
        //3  
        var pageInfo = window.sessionStorage
                        .getItem("pageInfo");
                    pageInfo = JSON.parse(pageInfo);
                    loadUserList(pageInfo);

• 行/列样式的设置

可通过cellStyle的方法设置，也可以return新的dom设置