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;
                    }
                }
            }
        }
    }
}

 

转载于:https://www.cnblogs.com/wanbao/p/10394634.html