bootstrap-table問題總結

時間  2019-11-10
標籤 bootstrap table 問題 總結 欄目 Bootstarp 简体版
原文   原文鏈接

  • 列寬

有時候會發現直接設置width的話並無起做用，列寬徹底設置不上去，這時候，可經過如下方式設置：也就是formatter裏面return一個dom元素，而後設置這個dom元素的寬就能夠了。代碼以下：
{
                field: "customer",
                title: "客戶",
                align: 'center',
                valign: "middle",
                formatter: function(value, row, index) {
                    if (value == null) {
                        return '';
                    } else {
                        return '<span style="width:85px;">' + value + '</span>';
                    }
                }
            },
這種方式設置後，若是表格td的內容是純英文，可能也不會出現咱們想要的效果，由於英文不會自動換行這個時候能夠這樣設置：
return '<span style="width:50px;word-break:break-all; word-wrap:break-all;">' + value + '</span>';

noteshare?id=88f243b51f91e9f9f57d558414a6595e&sub=ED5BF86FE78E4E00A240DA15A28BFA59

  • 前臺分頁和後臺分頁的實現及頁碼的跳轉

實現後效果以下圖：圖片描述
sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
頁碼跳轉：設置：paginationShowPageGo: true
在html中添加：bootstrap-table-pagejump.js,具體內容以下所示： 
/**
 * @author zhaoshuxue <zhaoshuxue@163.com>
 * 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(
                '<ul class="pagination-jump">',
                '<li class=""><span>' + this.options.pageGo() + ':</span></li>',
                '<li class=""><input type="text" class="page-input" value="' + this.options.pageNumber + '"   /></li>',
                '<li class="page-go"><a class="jump-go" href="">GO</a></li>',
                '</ul>');
            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 = '<span style="color:red">排隊中</span>';
                        } else if (value == "維修中") {
                            var a = '<span style="color:green">維修中</span>';
                        } else if (value == "已完成") {
                            var a = '<span style="color:blue">已完成</span>';
                        }
                        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下面的內容，將原內容刪掉，修改添加的代碼爲：html

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設置
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程