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不提供列的 new 宽度，而仅提供columnResize（）-Event之前之前的宽度。因此，在attachColumnResize（）-事件
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))

我觉得这有点冗长，请随时让我知道任何更时尚的方式！

Javascript / jQuery / SAPUI5：根据另一个表格设置表格的列宽吗？

2 个答案: