Пользовательская функция переупорядочения столбцов таблицы -> изменить базовую модель таблицы

Question

Я использую SheetJS, чтобы загрузить лист Excel в ui.table, При загрузке я добавляю технический идентификатор к именам столбцов, который мне понадобится позже в моем проекте. Вот как я добавляю технический идентификатор:

getColumnNames: function(worksheet, aData) {
        var firstRow = aData[0];
        var oColumns = [];
        var cells = Object.keys(worksheet);
        for (var i = 0; i < Object.keys(firstRow).length; i++) {            
            var columnName = Object.keys(firstRow)[i];
            var technicalName = "COL" + ('0' + (i+1)).slice(-2);
            oColumns.push({
                columnId: columnName,
                technicalId: technicalName
            });
        }
    return oColumns;
},

При создании модели я связываю оба columnId и technicalId к каждому столбцу.

У моих пользователей должна быть возможность изменить порядок столбцов таблицы, чтобы сопоставить их с другой таблицей. (Контекст здесь не очень актуален). Итак, в основном под моей загруженной таблицей есть еще одна таблица, и пользователь должен иметь возможность изменить порядок столбцов "uploadTable", чтобы они соответствовали таблице ниже.

Теперь, чтобы сделать правильное отображение, мой технический идентификатор должен быть скорректирован после того, как переупорядочение сделано. Поэтому я хотел бы добавить функцию, которая выполняется после того, как пользователь нажал кнопку "обновить".

Эта функция должна регулировать технические columnNames, -> Например, данные загружаются, столбец в позиции 1 имеет технический идентификатор "COL01", теперь он перетаскивается в позицию 2 -> технический идентификатор должен измениться на COL02 и наоборот.

Я считаю, что единственный способ сделать это - получить доступ к DomRef таблицы, потому что это единственное место, где хранится текущая структура таблицы, но я не совсем уверен, как мне поступить.

Моя функция переупорядочения только получает данные:

onReorder : function() {
    var table = this.getView().byId("uploadData");
    var currentStructre = table.getDomRef();
},

Буду признателен за любые намеки на это. Если что-то неясно, я с удовольствием объясню!

Answer 1

sap.ui.table.Table позволяет перетаскивать его столбцы перетаскиванием, а событие columnMove вызывается после.

Можно отслеживать и обновлять некоторые метки последовательности (например, идентификаторы), используя такой подход:

Запомните идентификаторы (например, метка столбца как идентификатор):

ids = oTable.getColumns().map(oColumn => oColumn.getAggregation('label').getText())

Обновить идентификаторы:

oTable.attachColumnMove(function(oEvent) {
  var from = oEvent.getParameter('column').getIndex();
  var to = oEvent.getParameter('newPos');
  var name = names.splice(from, 1);
  names.splice(to, 0, name);
  // Then write new ids to model;
})