Javascript / jQuery / SAPUI5: установить ширину столбца таблицы в соответствии с другой таблицей? - PullRequest
Новая
       48

Javascript / jQuery / SAPUI5: установить ширину столбца таблицы в соответствии с другой таблицей?

0 голосов
/ 06 марта 2019

У меня есть две таблицы, которые я хотел бы синхронизировать по ширине столбцов.Я работаю в 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 - это имя класса моей верхней таблицы, а bottom - имя моей нижней таблицы.(Я не могу использовать идентификаторы, так как они предопределены из SAPUI5, но имена классов уникальны)

Событие запускается каждый раз, когда я изменяю размер столбца, так что часть работает нормально.Но ширина столбца не изменяется (проверил это с помощью console.log ...)

Я пробовал разные решения о том, как установить ширину нижней таблицы.Попытки до сих пор:

  • $('.bottom td:eq(' + i + ')').width(width);
  • $('.bottom td:eq(' + i + ')').css('width', width, 'px');
  • $('.bottom td:eq(' + i + ')').width() = width; -> приводят к неверной ошибке левого аргумента

Спасибо за любой совет!

Ответы [ 2 ]

1 голос
/ 06 марта 2019

@ Соня, ты был прав.если ширина столбца не установлена, то 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);
}
0 голосов
/ 07 марта 2019

С помощью @DubZ я пришел к различным подходам.

  • jQuery не обеспечивает новую ширину столбца, а только ширину до columnResize () - Событие.Следовательно, доступ к этой ширине не поможет во время 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))

Я чувствую, что это немного запутанно, поэтому не стесняйтесь, дайте мне знать любой более изящный способ!

...