在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预定义的，但类名是唯一的）

每次调整列的大小时都会触发该事件，因此该部分工作正常。但列宽不调整（通过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（）方法，但是当初始值设置为“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))

我觉得这有点啰嗦，所以请随时让我知道任何更时尚的方式！