Grid — это новый, более мощный компонент, который должен стать преемником Table (см. Таблица мертва, да здравствует Решетка). Таким образом, не должно быть необходимости отдавать предпочтение Таблице, а не Сетке.

Вот первая из серии статей Ваадина о переходе с таблицы на сетку: https://vaadin.com/blog/-/blogs/mission-rip-table-migrate-to-grid-basic

Резюме

Сетка → Новая и удивительная
Таблица → Почтенная и надежная

Table — очень хороший виджет отображения сетки данных, встроенный в самые ранние версии Ваадина.

Grid — это масштабная переработка с нуля, предназначенная для замены Table. Команда Vaadin использует свою мудрость, полученную из опыта, «если бы мы знали тогда то, что мы знаем сейчас», чтобы создать самую лучшую сетку данных, возможную с учетом сегодняшних веб-технологий. Сетки настолько важны, что у них появилась собственная тщеславная страница. Краткий обзор см. в этой записи в блоге компании.

Итак, вообще говоря, я предлагаю вам сосредоточиться на Grid. Попробуйте его, сначала изучите и посмотрите, соответствует ли он вашим потребностям. Если вы столкнулись с ошибками или проблемами, или вам нужны функции, отсутствующие в таблице, вернитесь к таблице. Вы можете смешивать и сочетать оба в проекте с оговоркой, что разный внешний вид и поведение могут сбить с толку ваших пользователей.

Думайте о Grid как о не по годам развитом подростке, полном надежд и стремящемся сделать прыжок во взрослую жизнь, а о Table как о зрелом взрослом человеке, усердно работающем в свои лучшие годы среднего возраста, в то время как мечтая о заслуженной будущей пенсии, плывущей в закат.

Подробности

Если вы используете Vaadin 6 в продолжающемся проекте или вам нужна поддержка очень старых браузеров, то Table — ваш единственный выбор. Grid требуется Vaadin 7 или более поздней версии.

Вот некоторые основные функции Table, которых в настоящее время не хватает в Grid.

• Функции перетаскивания (будут добавлены позже).
• Изменение размера столбца пользователем путем перетаскивания края заголовка столбца.

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

Выбор строки

Оба позволяют выбирать отдельные строки или несколько строк.

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

Программная поддержка выбора отличается. Grid не расширяет AbstractSelect, вместо этого определяет собственный API выбора. Вызов addSelectionListener() и определите SelectionListener. См. Книгу Ваадина.

Верхние и нижние колонтитулы

У обоих есть верхние и нижние колонтитулы, но у Grid больше возможностей. Сетка может размещать виджеты вместо текста. Сетка может иметь несколько строк заголовков. Сетка может соединять ячейки заголовков, как в таблице HTML.

Редактирование на месте

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

Фильтрация

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

Поддерживается контейнером данных

ОБНОВЛЕНИЕ: Vaadin 8 представляет новую версию Grid, которая использует недавно улучшенная и значительно упрощенная модель данных. Это основная причина использовать Grid вместо Table. Обратите внимание, что как исходная таблица, так и таблица по-прежнему доступны в Vaadin 8 через ссылку Уровень совместимости Vaadin 7.

Следующая старая информация осталась нетронутой…

И Table, и Grid представляют собой виджет только для представления, поддерживаемый отдельным объектом данных, реализующим Container в соответствии с моделью данных Vaadin.

Класс Table также действует как контейнер, что меня всегда смущало. Я рад видеть, что Grid поддерживает более четкое разделение.

Как и Table, Grid предлагает некоторые удобные методы для быстрых и грязных ситуаций, когда вы хотите передать некоторые данные в саму Grid без формального создания Container. Но удобные методы Grid используют термины row и column, в отличие от терминов item и property контейнера. Эти термины делают более ясным, что вы общаетесь с грид, но грид действует в соответствии со своим прикрепленным по умолчанию IndexedContainer от вашего имени.

Содержимое ячейки

ОБНОВЛЕНИЕ: В Vaadin 8.1 Grid получает возможность отображать компонент в ячейке. См. демонстрацию средства визуализации компонентов. .

Обработка содержимого ячейки отличается. Сетка не может напрямую отображать значки столбцов, а также не может размещать компоненты (виджеты) в ячейке. Вместо этого использовались новые функции Renderer.

Документ и демонстрация

Оба имеют главу в Книге Ваадина, один для таблицы и один для Grid.

У обоих есть живые демо. Один для таблицы (и TreeTable). И пара для Grid, одно полное окно и один с различными аспектами.

См. эту страницу брошюры по Grid, включая встроенную демо-версию со ссылкой на другие демонстрации.

Разные отличия

Grid имеет встроенный виджет для отображения числа в виде небольшого виджета термометра. См. этот снимок экрана. , в последнем столбце.

Подробнее о различиях см. в разделе 5.24.1 Обзор – Различия с таблицей в Книге Ваадина.

Esoterica… Grid — это первый компонент в компонентах Vaadin, высококачественном наборе веб-компонентов, созданных на Google Polymer, который готов к использованию с любым фреймворком, поддерживающим Веб-компоненты. Хотя команда Vaadin пообещала поддерживать Table в будущем, не ожидайте, что ему будет уделено такое особое внимание.

Ваадин 8

В Vaadin 8.0 и 8.1 Grid стал еще лучше. Основные улучшения включают в себя:

• Works with the simpler sleeker data model new in Vaadin 8
  • Pass a collection of entities for display
  • Легко определяйте столбцы с помощью безопасного для типов лямбда-синтаксиса
    grid.addColumn( Person::getFirstName ).setCaption( "First Name" );
  • Теперь, когда Container больше нет, ленивая загрузка данных стала проще:
    grid.setDataProvider( ( sortorder , offset , limit) -> service.findAll( offset , limit) , () -> service.count() );
• Возможность отображать компоненты Vaadin, а не только рендереры
• Перетаскивание с помощью поддержки перетаскивания, определенной в HTML5.
• Еще больше скорости

Компонент «Таблица» по-прежнему доступен через уровень совместимости в Vaadin 8 для продолжения использования классов Vaadin 7.

Будущее

У команды Vaadin большие планы на Grid, поэтому многое из того, что вы читаете на странице StackOverflow, изменится. В ближайшие месяцы и годы команда будет активно добавлять функции, улучшения и исправления ошибок. За свою короткую историю в Grid уже было внесено множество улучшений, поэтому будьте осторожны, читая старые документы об ограничениях или недостающих функциях — это может быть уже не так.

На самом деле с ними обоими можно реализовать все, что вы хотите. Но мой опыт показывает, что Grid удобнее в использовании.

Таблица проста для понимания и проста в использовании для простых таблиц (как вы могли догадаться). Так что, если вы просто хотите красиво визуализировать несколько строк данных, используйте Таблицу. Она стабильна и хорошо работает с этим.

Сетка выглядит как таблица, но имеет некоторые особенности, характерные для таблицы. Если у вас есть много данных для рендеринга, Grid может справиться с этим лучше. Также существует хорошая практика «встроенного редактирования» ваших данных. Существует способ широко настроить заголовки сетки. Если вы хотите много настраивать и взаимодействовать внутри табличного компонента, используйте сетку.

Особенности смотрите здесь:

https://vaadin.com/grid

http://demo.vaadin.com/sampler/#ui/grids-and-trees/grid

Существует разница в том, как вы можете выбирать строки/ячейки в этих двух компонентах. Например, EventListeners для выбора используются немного по-разному в отношении значения, которое они возвращают. Также есть разница в том, как вы добавляете к ним столбцы и строки, но это просто вещь реализации, поэтому это не должно иметь большого значения.

В таблице фильтров, если мы щелкнем заголовок таблицы, первая строка будет по умолчанию выделена методом setSelectable(true);, но в таблице сетки такого типа действия нет,

Я хочу применить то же действие в таблице сетки. Есть ли возможность иметь такую ​​природу? Есть ли какой-либо метод или код?

Ниже приведен код, который я использовал в своей таблице сетки:

private void buildPagedGrid(Class<T> clazz) {

     setWidth("100%");      
     setSelectionMode(SelectionMode.SINGLE);
     setImmediate(true);        
     setSizeFull();
     setContainerDataSource(dataSource);
     setFooterVisible(true);
}