在SAPUI5中，如何根據另一個表設置表的列寬？

Question

我有兩個表，它們的列寬要同步。 我在SAPUI5中工作，因此每次重新調整表的列大小時都會觸發一個事件。

我目前正在使用jQuery來獲取解決方案，但仍無法按照我想要的方式工作。 我意識到同一主題存在多個不同的問題，我已經遍歷了所有問題，但找不到合適的解決方案。

這是我的代碼：

oTable.attachColumnResize(function(oEvent) {
    $('.syncScroll tr:eq(1) td').each(function (i) {
         var width = $('.syncScroll td:eq(' + i + ')').width()
         $('.bottom td:eq(' + i + ')').attr('width', width);
        console.log($('.bottom td:eq(' + i + ')').width());
    })                                              
})

synScroll是我的上層表的類名， 底部是我的下層表的類名。 （由於ID是從SAPUI5中預定義的，所以我不能使用ID，但是類名是唯一的）

每當我調整列大小時都會觸發該事件，因此該部分工作正常。 但是列寬不會調整（已通過console.log進行了檢查...）

我已經嘗試過不同的解決方案來設置下表的寬度。 到目前為止的嘗試：

• $('.bottom td:eq(' + i + ')').width(width);
• $('.bottom td:eq(' + i + ')').css('width', width, 'px');
• $('.bottom td:eq(' + i + ')').width() = width; ->導致無效的左手參數錯誤

Answer 1

@sonja你是對的。 如果未設置列寬，則getWidth（）為空。

這是結合了jquery和ui5 api的更新：

var oTable = this.getView().byId("tableName");
var oSecondTable = this.getView().byId("secondTableName");
var aColumns = oTable.getColumns();
var aSecondColumns = oSecondTable.getColumns();

for(var i=0; i<aColumns.length; i++) {
    var columnWidth = $("#"+aColumns[i].getId()).width(); 
    aSecondColumns[i].setWdith(columnWidth);
}

Answer 2

在@DubZ的幫助下，我找到了不同的方法。

• jQuery不提供列的新寬度，而僅提供columnResize（）-Event 之前的寬度。 因此，在attachColumnResize（）-Event期間訪問該寬度將無濟於事
• SAPUI5為表列提供了getWidth（）-Method，但是當初始值設置為“ auto”時，此屬性為空。 所以這也無濟於事

我的解決方案：attachColumnResize（）-Event提供兩個參數。 首先是調整大小的列，其次是該列的新寬度。 因此，我找出了一個表中已調整大小的列的索引，並將新寬度應用於第二個表中具有相同索引的列。 由於columnWidth設置為auto，因此其他列將進行相應調整。 這是我的代碼：

 oTable.attachColumnResize(function(oEvent) {
        //get position of resized column and adjust column with same position in lower table
        let aColumns = oTable.getColumns();
        let eventId = _.trimStart(oEvent.getParameters().column.sId, '__column');
        let lastIndex = _.trimStart(_.nth(aColumns, -1).sId, '__column')
        let nmbrOfColumns = oTable.getColumns().length;
        let positionId = nmbrOfColumns - (lastIndex - eventId) - 1;    
        let oSecondTable = this.getView().byId("generatedTableView").getContent()[0].getContent()[1];                   
        let aSecondColumns = oSecondTable.getColumns();                 
        aSecondColumns[positionId].setWidth(oEvent.getParameters().width);                  
}.bind(this))

我覺得這有點冗長，請隨時讓我知道任何更時尚的方式！