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

Фактически, эта функция разделяет сетку данных на две отдельные части: «замороженную» и «прокручиваемую». «Замороженная» часть таблицы данных будет зафиксирована, а прокручиваемая часть останется подвижной. Если вы много использовали Excel, вы, вероятно, использовали эту функцию один или два раза.

В этой статье я хочу продемонстрировать некоторые функции закрепления на основе того, как мы реализовали их в ag-Grid. Хотя закрепление в качестве общей функции сетки данных поддерживается всеми основными поставщиками сетей данных, только ag-Grid поддерживает полный спектр требований, которые предъявляются пользователями к закреплению. В этой статье я также намерен сравнить реализацию этой функции с другими крупными корпоративными сетями данных. Вот список:

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

Обзор функциональности

Для начала вот список функций, которых следует ожидать от функции закрепления сетки данных javascript:

  • закрепление столбца как с левой, так и с правой стороны
  • закрепление столбца из меню столбца
  • закрепление столбца путем перетаскивания
  • динамическое закрепление начального столбца
  • динамическое закрепление последующих столбцов

Давайте теперь исследуем их более подробно.

Закрепление как с левой, так и с правой стороны

Это говорит само за себя. Благодаря возможности прикреплять столбцы к обеим сторонам, сетка фактически разделяется на 3 части, а горизонтальная прокрутка доступна только для средней «незамороженной» части. Вот демонстрация такой функциональности в ag-Grid:

Оказывается, очень немногие датагриты javascript поддерживают закрепление как с правой, так и с левой стороны. Фактически, помимо ag-Grid, только таблицы данных JavaScript, созданные DevExtreme и Webix, имеют такую ​​поддержку.

Закрепление столбца из меню столбца

Вы можете закрепить столбец либо из меню столбца, либо перетащив столбец в зону закрепленных столбцов. ag-Grid поддерживает оба варианта. Вот демонстрация закрепления столбца через меню столбца:

Хотя большинство таблиц данных поддерживают закрепление из меню столбца, только ag-Grid и пользовательский интерфейс Kendo поддерживают закрепление посредством перетаскивания.

Закрепление столбцов путем перетаскивания

Вот как можно закрепить начальный столбец в ag-Grid, перетащив его:

Кроме того, ag-Grid не требует указывать исходный закрепленный столбец или количество закрепленных столбцов в конфигурации. После инициализации сетки вы все равно можете добавить столько столбцов, сколько захотите.

Помимо ag-Grid, только datagrid от IgniteUI дает пользователям аналогичный уровень гибкости, когда дело доходит до динамического закрепления столбцов. Остальные таблицы данных JavaScript либо требуют наличия хотя бы одного закрепленного столбца все время, либо ограничивают вас, указав количество закрепленных столбцов заранее. Это редко бывает удобно.

Сравнительная таблица

Напомним, вот таблица с функциональностью, поддерживаемой основными массивами данных JavaScript, предназначенными для предприятий:

Как видите, ag-Grid здесь безоговорочно выигрывает. И самое приятное то, что вы можете получить эту функциональность абсолютно бесплатно в общественной версии ag-Grid. Попробуйте это с помощью нашего руководства Начните через 5 минут. Я с радостью отвечу на любые ваши вопросы.

Следите за мной, чтобы оставаться в курсе!

Первоначально опубликовано на https://blog.ag-grid.com 26 июня 2019 г.