Блог

Главная - Вопросы по программированию - В SAPUI5, как я могу установить ширину столбца таблицы в соответствии с другой таблицей?

В SAPUI5, как я могу установить ширину столбца таблицы в соответствии с другой таблицей?

#javascript #jquery #sapui5 #tablecolumn #column-width

#javascript #jquery #sapui5 #tablecolumn #ширина столбца

Вопрос:

У меня есть две таблицы, которые я хотел бы синхронизировать по ширине столбцов. Я работаю в 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; —> вызывает ошибку недопустимого левого аргумента

Ответ №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);
}

Комментарии:

1. спасибо @DubZ ! по какой-то причине getWidth() приводит к » » на моей стороне. таким образом, он просто пустой.. Я вижу такие свойства, как _iNewWidth или _Width , но это не совсем хорошее решение, доступ к them..do у вас есть какие-либо идеи, почему это может быть?? кроме того, в вашем коде есть несколько ошибок, на случай, если вы захотите их исправить: последняя строка — «setWidth …», и [i] должен идти сразу после «aColumns»

2. хорошо, проведя некоторое исследование, я выяснил, что для ширины столбцов нет значения, когда начальное значение установлено в «auto». и это имеет место в моем приложении.. к сожалению, я не могу получить доступ к ширине столбца таким образом..

3. Я обновил свой первоначальный пост. попробуйте, если это отвечает на ваш вопрос

4. Еще раз спасибо, я проверил это, и мой вывод заключается в том, что с помощью jQuery вы не получаете «новую» ширину столбца, а только ширину до изменения размера столбца. Поэтому я придумал другой способ. Я опубликую это в качестве ответа. Я был бы благодарен, если бы вы взглянули на это и сказали мне, является ли это «чистым» решением для сценария..

5. Привет, я проверил это и не согласен. Если я сделаю setWidth(«200px»), а затем выполню $(«#tablecolumn»). width(), тогда он показывает мне 200. возможно, вы сэкономили $ («#tablecolumn»). width() в переменную. это не будет автоматически обновляться через событие или sth.

Ответ №2:

С помощью @DubZ я пришел к другим подходам.

  • jQuery не предоставляет новую ширину столбца, а только ширину перед событием columnResize() . Следовательно, доступ к этой ширине не поможет во время attachColumnResize()-события
  • SAPUI5 предоставляет getWidth()-метод для столбцов таблицы, но это свойство пусто, когда начальное значение установлено в «auto». Так что это тоже не помогло бы

Мое решение: событие attachColumnResize() предоставляет два параметра. Во-первых, столбец, размер которого был изменен, и, во-вторых, новая ширина этого столбца. Итак, я вычисляю индекс измененного столбца в одной таблице и применяю новую ширину к столбцу с тем же индексом во второй таблице. Поскольку для 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))

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