Bootstrap Table 實現Element UI 表格展開行效果

在使用Bootstrap時候，有時候表格要顯示的內容過多，如果都顯示的話，表格就會顯得太長

在ElementUI中可以設置展開行，這樣部分數據可以隱藏，需要的時候顯示出來。

ElementUI table 展開顯示效果：

 

 

Bootstrap 實現過程

實現效果：

 

 1. 表格數據加載

  2. 在表格加載之后為表格添加展開事件

 

代碼如下：

var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $('#table').BootstrapTable({
            url: '************',        //請求后台的URL（*）
            method: 'post',                      //請求方式（*）
            toolbar: '#toolbar',                //工具按鈕用哪個容器
            striped: false,                      //是否顯示行間隔色
            cache: false,                       //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
            pagination: true,                   //是否顯示分頁（*）
            sortable: false,                     //是否啟用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//傳遞參數（*）
            sidePagination: "server",           //分頁方式：client客戶端分頁，server服務端分頁（*）
            pageNumber: 1,                       //初始化加載第一頁，默認第一頁
            pageSize: 10,                       //每頁的記錄行數（*）
            pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數（*）
            search: false,                       //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大
            strictSearch: true,
            showColumns: false,                  //是否顯示所有的列
            showRefresh: false,                  //是否顯示刷新按鈕
            minimumCountColumns: 2,             //最少允許的列數
            clickToSelect: true,                //是否啟用點擊選中行
            uniqueId: "ID",                     //每一行的唯一標識，一般為主鍵列
            showToggle: false,                    //是否顯示詳細視圖和列表視圖的切換按鈕
            cardView: false,                    //是否顯示詳細視圖
            detailView: false,                   //是否顯示父子表
            columns: [{
                checkbox: true
            }, {
                field: 'Expand',
                name: 'Expand',
                align: table_align,
                title: ' ',
                class: 'expand-column',
                formatter: function (value, row, index) {
                    return '<i class="fa fa-chevron-right expand-row" aria-hidden="true" style="color:gray"></i> ';
                }
            }, {
                field: 'Column1',
                name: 'Column1',
                align: table_align,
                title: '列1',
                class: 'expand-first-column',
                events: detailOperateEvents
            }, {
                field: 'Column2',
                name: 'Column2',
                align: table_align,
                title: '列2'
            }, {
                field: 'Column3',
                name: 'Column3',
                align: table_align,
                title: '列3'
            }, {
                field: 'Column4',
                name: 'Column4',
                align: table_align,
                title: '列4'
            }, {
                field: 'Column5',
                name: 'Column5',
                align: table_align,
                title: '列5'
            }, {
                field: 'Column6',
                name: 'Column6',
                align: table_align,
                visible: false,
                title: '列6'
            }, {
                field: 'Column7',
                name: 'Column7',
                align: table_align,
                title: '列7'
            }, {
                field: 'operate',
                title: '操作',
                align: 'center',
                events: operateEvents,
                width: '10%',
                formatter: operateFormatter
            }],
            onLoadSuccess: function () {
                // 初始化展開按鈕
                expandRow();
            }
        });
    };

    //得到查詢的參數
    oTableInit.queryParams = function (params) {
        var temp = {
            pageSize: params.limit,   //頁面大小
            pageIndex: params.offset / params.limit + 1  //頁碼
        };
        return temp;
    };
    return oTableInit;
};

　　

expandRow 方法

// 展開行
function expandRow() {
    $('.expand-row').click(function (e) {
        var row = e.target.parentElement.parentElement;
        var id = row.dataset.uniqueid;
        // 如果是展開操作
        if (row.dataset.expand == undefined || row.dataset.expand == 'false') {
            $(this).removeClass('fa-chevron-right');
            $(this).addClass('fa-chevron-down');
            row.dataset.expand = true;
            // 獲取行信息
            var rowInfo = $("#table").bootstrapTable('getRowByUniqueId', id);
            // 創建行
            var tr = '<tr>';
            tr += '<td colspan="11">';
            tr += '<div>';
            tr += '<div class="table-item"><label>隱藏列1：</label><div class="table-item__content">' + rowInfo.CloumnA+ '</div></div>';
            tr += '<div class="table-item"><label>隱藏列2：</label><div class="table-item__content">' + rowInfo.CloumnB+ '</div></div>';
            tr += '</div>';
            tr += '</td>';
            tr += '</tr>';
            $(row).after(tr);
        } else {
            // 如果是收縮操作
            $(this).addClass('fa-chevron-right');
            $(this).removeClass('fa-chevron-down');
            row.dataset.expand = false;
            var rowIndex = row.rowIndex;
            $('#tb_main')[0].deleteRow(rowIndex + 1);
        }
    });
}

　　style 樣式：

 .expand-column{
        border-right:none !important;
    }
    .expand-first-column{
        border-left:none !important;
    }
    .table-item{
        display: flex;
        margin-left:5%;
        margin-bottom:5px;
    }
    .table-item>label{
        width:100px;
        color: dimgrey;
    }
    .table-item__content {
        font-size: 14px;
        word-break: break-all;
    }