Пересечение всей угловой сетки для обновления одной записи очень неэффективно, и иногда она может вызвать глюки из -за потребляемой памяти. Лучший способ справиться с этим – найти способ для Rerender только эту конкретную запись.
С неизменным режимом в нашем синкфузии Angular Data Grid , вы можете легко обновлять записи, не обращая внимания на весь компонент сетки.
Сетка Angular Data – это элемент управления для отображения данных в табличном формате. Его богатый набор функций включает в себя привязку данных, редактирование, Excel-подобную фильтрацию, пользовательскую сортировку, группировку, замораживающие ряды и столбцы и многое другое. Это также позволяет вам экспортировать данные в форматы Excel, CSV и PDF.
В этом сообщении мы собираемся обсудить использование режима неизменного рендеринга и того, как включить его в компоненте сетки Syncfusion Angular Data, чтобы избежать перестройки всей сети данных.
Режим рендеринга по умолчанию
Прежде чем мы погрузимся в неизменную режим, давайте изучим поток данных, когда действие выполняется в сетке данных в режиме по умолчанию.
Следующее изображение иллюстрирует поток по умолчанию при обновлении данных в сетке данных.
Блок -схема по умолчанию в сетку угловой сетки
По умолчанию сетка Angular Data будет пересекать все элементы строки таблицы, когда вы выполняете какое -либо действие, такие как сортировка или фильтрация. Даже если вы внесете единое изменение значения в источнике данных и вызовите метод обновления, то он будет пересекать всю таблицу. Сетка данных не знает об изменении значения с текущим обновлением.
Как работает неизменная режим и почему он нам нужен?
В неизменном режиме, выполняя действия сетки, сетка Angular Data будет только пересекать модифицированные или вновь добавленные строки. Это предотвращает повторное обработку неизменных рядов.
Когда вы выполняете какое -либо действие, сетка данных сравнит текущий результат JSON с предыдущим результатом с использованием первичного ключа.
Режим неизменного рендеринга оптимизирует производительность ререндеринга угловых данных, используя ссылку на объект и метод глубокого сравнения на основе Объект Diff Concept как сетка поддерживает вложенные объекты. Затем он перемещает просто непревзойденные данные в DOM. Так что, очевидно, мы можем уменьшить манипуляции с DOM и повысить производительность рендеринга в этом режиме.
Блок -схема для неизменного перемещения в сетке Angular Data
Необычный режим умно решает, какой элемент должен быть изменен во время воспроизведения.
Давайте посмотрим на некоторые примеры концепции Diff объекта.
Сценарий 1
//initially bound data.
let data = [{ OrderID: 1, CustomerID: 'VINET', Freight: 34, ShipCountry: 'Germany' },
{ OrderID: 2, CustomerID: 'TOMSP', Freight: 26, ShipCountry: 'USA' },
{ OrderID: 3, CustomerID: 'HANAR', Freight: 23, ShipCountry: 'UK' },
{ OrderID: 4, CustomerID: 'CHOPS', Freight: 98, ShipCountry: 'Brazil' }];
//updated data.
let data = [{ OrderID: 1, CustomerID: 'VINET', Freight: 34, ShipCountry: 'Germany' },
{ OrderID: 2, CustomerID: 'TOMSP', Freight: 26, ShipCountry: 'Swizerland' },
{ OrderID: 3, CustomerID: 'HANAR', Freight: 23, ShipCountry: 'France' },
{ OrderID: 4, CustomerID: 'CHOPS', Freight: 98, ShipCountry: 'Brazil' }];
В данных сценария 1 мы изменили колонку Shipcountry во втором и третьем рядах. Когда вы обновляете эти данные в сетке, он сравнит их с предыдущими данными, обнаружит изменения и обновляет только вторые и третьи строки.
Сценарий 2
//initially bound data.
let data = [{ OrderID: 1, CustomerID: 'VINET', Freight: 34, ShipCountry: 'Germany' },
{ OrderID: 2, CustomerID: 'TOMSP', Freight: 26, ShipCountry: 'USA' },
{ OrderID: 3, CustomerID: 'HANAR', Freight: 23, ShipCountry: 'UK' },
{ OrderID: 4, CustomerID: 'CHOPS', Freight: 98, ShipCountry: 'Brazil' }];
//updated data.
let data = [{ OrderID: 5, CustomerID: 'Robert', Freight: 61, ShipCountry: 'Spain' },
{ OrderID: 1, CustomerID: 'VINET', Freight: 34, ShipCountry: 'Germany' },
{ OrderID: 2, CustomerID: 'TOMSP', Freight: 26, ShipCountry: 'USA' },
{ OrderID: 4, CustomerID: 'CHOPS', Freight: 98, ShipCountry: 'Brazil' }];
В данных сценария 2 мы добавили строку сверху и удалили третью ряд. В этом случае сетка обнаружит изменения, добавит новую строку (TR) вверху и переназначает другие ряды. Затем он удалит удаленную строку на основе первичного ключа.
Примечание: Вы также можете смоделировать тот же сценарий в пользовательском интерфейсе Angular Data Grid, используя функции добавления и удаления строк.
Наконец, давайте посмотрим на производительность неизменного и нормального режима ререндерирования в различных действиях сетки.
Из предыдущего изображения GIF ясно, что режим неизменного рендеринга работает хорошо по сравнению с нормальным режимом рендеринга в сетке угловых данных.
Как включить неизменную моду
Следуйте этим шагам, чтобы включить режим неизменного рендеринга в сетке Angular Data для эффективного обновления данных в вашем приложении.
Шаг 1: Настройка Angular Data Grid
См. Начало работы с Angular Data Grid Документация для настройки угловой среды и добавления компонента сетки данных в ваше приложение.
Шаг 2: Включить режим неизменного рендеринга в сетке угловых данных
После добавления сетки данных в ваше приложение включите EnableImmutAbleMode свойство, установив его на True.
Обратитесь к следующему примеру кода.
Примечание: Функция «Неизвестное режим» использует значение первичного ключа для сравнения данных. Итак, мы должны предоставить ценность iSprimarykey столбец.
Github ссылка
Для получения дополнительной информации обратитесь к Демонстрация режима неизменного рендеринга Анкет
Вывод
Спасибо за чтение! Я надеюсь, что теперь у вас есть четкое представление об неизменном режиме рендеринга и о том, как включить его в синкфузии Угловая сетка . Эта функция уменьшит время воспроизведения и манипуляции с DOM. Попробуйте шаги, приведенные в этом сообщении в блоге и улучшите производительность вашего приложения!
Функция об неизменном режиме также доступна в нашем ASP.NET ( Ядро , MVC ), JavaScript , Угловой В Реагировать и Vue Сетки данных.
Для существующих клиентов новая версия Essential Studio доступна для загрузки из Лицензия и загрузки страница. Если вы еще не являетесь клиентом Syncfusion, вы можете попробовать наши 30-дневные Бесплатная пробная версия Чтобы проверить наши доступные функции.
Вы можете связаться с нами через наш Форум поддержки , Direct-Trac , или Портал обратной связи Анкет Мы здесь, чтобы помочь вам добиться успеха!
Связанные блоги
- Загрузите и просмотрите файлы PDF в угловом приложении
- Включить группировку с ленивым нагрузкой в сетку Angular Data Syncfusion
- Просмотреть и редактировать документы Word в угловых приложениях: Руководство для начинающих
- Загрузите миллион+ записей менее чем за секунду в сетке Angular Data Syncfusion
Оригинал: “https://dev.to/syncfusion/how-to-update-data-without-rerendering-an-entire-grid-in-angular-42g0”