bootstrap table動態行合並

在bootstrap table實現行合並主要使用方法：

$('#table_list').bootstrapTable('mergeCells', {index: 0, field: 'col_name', rowspan: 5});

 

以下假設已經將需要進行行合並的列名保存在了頁面上ID為tableRowMergeCols的div元素上，列名以逗號分隔，例如：“col1,col2,col3”，這個值可以通過ajax從后台中動態獲取。然后通過二層循環，實現bootstrap table的行合並

$("#table_list").bootstrapTable({
    method: "GET",
    ……
    onLoadSuccess: function (res) {
        var rowMergeCols = $('#tableRowMergeCols').val().split(",");
        for (var i = 0; i < rowMergeCols.length; i++) {
            var colName = rowMergeCols[i];
            var colVal = '';
            var rowStart = 0;
            var rowCount = 0;
            for (var j = 0; j < res.rows.length; j++) {
                var row = res.rows[j];
                if (colVal == '') {
                    colVal = row[colName];
                    rowCount++;
                } else {
                    if (colVal == row[colName]) {// 行的值相同
                        // 計數加1
                        rowCount++;
                        // 最后一行
                        if (j == res.rows.length - 1) {
                            $('#table_list').bootstrapTable('mergeCells', {
                                index: rowStart,
                                field: colName,
                                rowspan: rowCount
                            });
                        }
                    } else {// 行值不同，將前面相同行值的所有行合並
                        $('#table_list').bootstrapTable('mergeCells', {
                            index: rowStart,
                            field: colName,
                            rowspan: rowCount
                        });
                        colVal = row[colName];
                        rowCount = 1;
                        rowStart = j;
                    }
                }
            }
        }
    }
}