Изменение размера столбцов ag-grid занимает слишком много времени при использовании модального наложения в ember. js - PullRequest
Новая
       32

Изменение размера столбцов ag-grid занимает слишком много времени при использовании модального наложения в ember. js

6 голосов
/ 17 января 2020

Мы столкнулись с проблемой при использовании ag-grid с модальным наложением. У нас есть функция, где мы должны показывать модальное поле, чтобы отображать расширенные элементы при щелчке строки. Теперь, когда этот модальный блок отклонен, а затем пользователь пытается изменить размер столбцов ag-grid, требуется около 10-15 se c, чтобы противостоять первоначальному изменению размера в реальном времени. Кроме того, данные в этом модальном поле заполняются динамически, вот код для того же: - 

for (const data of pop_data) {
    if (count == pop_data.length-1) {
        bn += data;
    }
    else {
        bn += data+' </br>';
    }
    count++
}
jQuery(".ember-modal-dialog").addClass("data-show-more")
jQuery(".ember-modal-dialog").html(bn)

Чтобы показать / скрыть этот модал, мы используем переменную ember. js: 

{{#if isShowingModal}}
  {{#modal-dialog
      onClose=(action "toggleModal")
      targetAttachment="center"
      translucentOverlay=true
  }}
    {{modalMessage}}
  {{/modal-dialog}}
{{/if}}

Вот определение ag-grid: - 

let columnDefs = [
      {
        headerName: "A", field: "email",
        width: 300
      },
      {
        headerName: "B", field: "enabled",
        width: 93
      },
      {
        headerName: "C", field: "f_l",
        width: 200
      },
      { headerName: "D", field: "mp", hide: !assign_features.includes("mp"), width:105 },
      { headerName: "OH", field: "oh", hide: !assign_features.includes("oh"), width:130},
      { headerName: "R", field: "vsr", hide: !assign_features.includes("vsr") },
      { headerName: "EC", field: "ir", hide: !assign_features.includes("ir") },
      { headerName: "UR", field: "ir", hide: !assign_features.includes("vsr") },
      { headerName: "MU", field: "mu", hide: !assign_features.includes("mu") },
      { headerName: "MC", field: "mc", hide: !assign_features.includes("mc")},
      {
        headerName: "CP",
        field: 'buyers',
        cellRenderer: 'modalbuyerRenderer',
        cellClass: 'cell-wrap-text',
        autoHeight: 'true',
        width: 400,
      }
    ];

    let gridOptions = {
      columnDefs: columnDefs,
      components: {
      'modalbuyerRenderer': mbr
      },
      defaultColDef: {
        sortable: true,
        resizable: true,
        width: 130,
        sortingOrder: ['asc','desc'],
      },
      onRowClicked: function(event) {
            onRowClickedEvent(event);
        }
      },
    };

1 Ответ

1 голос
/ 22 января 2020

Не видя работающего plunkr / codepen, я думаю, что решение вашей проблемы может быть ie во встроенном API gridOptions. Недавно я столкнулся с очень похожей проблемой (не с изменением размера, а с повторным рендерингом отдельных ячеек после взаимодействия) и использованием api.setRowData и setColumnDefs, которые решили мою проблему. Код ниже основан на angularJS и сильно упрощен, чтобы дать общее представление о том, что вы можете попробовать. Надеюсь, это поможет - это решило мою похожую проблему.

Сначала инициализация gridOptions: 

$scope.gridOptions = {
    // we are using angular in the templates
    defaultColDef: {
        filter: true,
        sortable: true,
        resizable: true,
    },
    ...,
    onCellClicked: function(event, $event) {
        //
    }
    onGridReady: () => {
        //setup first yourColumnDefs and yourGridData
        //now use the api to set the columnDefs and rowData
        $scope.gridOptions.api.setColumnDefs(yourColumnDefs);
        $scope.gridOptions.api.setRowData(yourGridData);
    },
    onFirstDataRendered: function() {
        //
    }
};

Затем происходит взаимодействие (скажем, удаление одной из строк). Важным примечанием является то, что $ scope.gridLoaded - это логическое значение, которое скрывает / показывает элемент DOM, который является самой ag-grid. Таким образом, в основном в начале взаимодействия элемент на короткое время исчезает (и появляется загрузчик), а когда взаимодействие заканчивается, таблица перерисовывается (и загрузчик исчезает). Для очень больших списков и частых взаимодействий этот повторный рендеринг явно не лучший вариант, хотя для этих списков сама ag-grid (без нумерации страниц) может не дать наилучшей производительности. 

$scope.delete = (params) => {
    // safeApply() is a function which forces update immediately outside of the digest cycle
    // gridLoaded is set false here
    $rootScope.safeApply( () => { $scope.gridLoaded = false; });

    let updatePromise = ...

    $.when(updatePromise).then( () => {
        $rootScope.safeApply(() => {
            $scope.gridLoaded = true;
            $scope.gridOptions.api.setRowData(yourGridData_updated);
            // given that your problem is with resizing it might worth considering re-running the $scope.gridOptions.api.setColumnDefs(yourColumnDefs) function as well
        })
    }, (err) => {
        console.warn(err);
    })
}
...