在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是上表的类名，synScroll是下表的名称。(我不能使用I，因为它们是从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

在“杜比兹”的帮助下，我来到了不同的地方。

• 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))

我觉得这是有点长，所以请让我知道任何更时髦的方式！

Answer 2

@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);
}