在SAPUI5中，如何根据另一个table设置一个table列宽？

Question

我有两个 table，我想同步它们的列宽。我在 SAPUI5 中工作，因此每次调整 table.

列的大小时都会触发一个事件

我目前正在使用 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 是我的 class 上面的名字 table 和 bottom 我的下面的名字 [= =43=]。（我不能使用 ID，因为它们是从 SAPUI5 预定义的，但 class 名称是唯一的）

每次调整列大小时都会触发该事件，因此该部分工作正常。但是列宽没有调整（通过console.log...检查）

关于如何设置下部 table 的宽度，我尝试了不同的解决方案。到目前为止的尝试：

$('.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 不提供列的 new 宽度，而只提供 before columnResize() 的宽度-事件。因此，在 attachColumnResize()-Event
SAPUI5为table列提供了getWidth()-方法，但是当初始值设置为"auto"时这个属性为空。所以这也无济于事

我的解决方案：attachColumnResize()-Event 提供了两个参数。首先，调整大小的列，其次，该列的新宽度。因此，我计算出第一个 table 中调整大小的列的索引，并将新宽度应用于第二个 table 中具有相同索引的列。由于 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))

我觉得这有点啰嗦，如果有更好的方法，请随时告诉我！

在SAPUI5中，如何根据另一个table设置一个table列宽？

In SAPUI5, how can I set a table column width according to another table?

javascript

jquery

column-width

tablecolumn

sapui5