Подтвердить что ты не робот

Ваадинская сетка против стола

В чем разница между Grid и Table в Vaadin 7?

Что я должен использовать, а когда?

4b9b3361

ОТВЕТЫ

Ответ 1

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

Вот первая из серии статей Vaadin aboout, мигрирующая из таблицы в сетку: https://vaadin.com/blog/-/blogs/mission-rip-table-migrate-to-grid-basic

Ответ 2

Резюме

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

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

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

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

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

Подробнее

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

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

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

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

Выбор строки

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

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

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

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

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

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

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

Фильтрация

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

Контейнер с резервными данными

UPDATE: Vaadin 8 предлагает новую версию Grid, которая использует недавно улучшенную и значительно упрощенную модель данных, Это основная причина использования Grid вместо таблицы. Обратите внимание, что как исходная сетка, так и таблица по-прежнему доступны в Vaadin 8 через уровень совместимости Vaadin 7.

Следующая старая информация оставлена ​​без изменений...

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

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

Подобно таблице, Grid предлагает некоторые удобные методы для быстрых и грязных ситуаций, когда вы хотите бросить некоторые данные в Grid без формального создания Container. Но удобные методы Grids используют строки и столбцы в отличие от элементов Containers и условий использования. Эти термины дают более четкое представление о том, что вы разговариваете с сеткой, но сетка действует по умолчанию, приложив IndexedContainer экземпляр от вашего имени.

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

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

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

Док и демо

У обоих есть глава в The Book Of Vaadin, one для таблицы и один для сетки.

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

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

Разные различия

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

Более подробные различия см. в разделе 5.24.1 Обзор - Различия в таблице в "Книга Ваадина" .

Эзотерика... Сетка - это первый компонент в Vaadin Components, набор высококачественных веб-компонентов, построенный на Google Polymer, который готов к использованию с любой инфраструктурой, поддерживающей Веб-компоненты. В то время как команда Ваадина обещала поддержать Таблицу в будущем, не ожидайте, что она получит такое особое внимание.

Ваадин 8

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

  • Работает с более простой моделью данных новых моделей в Vaadin 8
    • Передача коллекции объектов для отображения
    • Легко определить столбцы с синтаксисом лямбда, безопасным для типов
      grid.addColumn( Person::getFirstName ).setCaption( "First Name" );
    • Легкая ленивая загрузка данных теперь, когда Container отсутствует:
      grid.setDataProvider( ( sortorder , offset , limit) -> service.findAll( offset , limit) , () -> service.count() );
  • Возможность отображения компонентов Vaadin, а не только рендеров
  • Перетаскивание с помощью поддержки перетаскивания, определенного HTML5.
  • Еще больше скорости

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

Future

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

Ответ 3

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

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

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

Смотрите функции здесь:

https://vaadin.com/grid

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

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

Ответ 4

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

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

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

private void buildPagedGrid(Class<T> clazz) {

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