Сетка Vaadin против таблицы
в чем разница между Grid
и Table
компоненты фреймворк Vaadin 7?
что я должен использовать, и когда?
4 ответов
Grid-это новый более мощный компонент, который должен быть преемником таблицы (см. таблица мертва, Да здравствует сетка). Таким образом, не должно быть никакой необходимости в пользу таблицы над сеткой.
здесь является первым в серии статей фреймворк Vaadin о переходе от стола к сетке: https://vaadin.com/blog/-/blogs/mission-rip-table-migrate-to-grid-basic
резюме
решетки → Новые И Удивительные
стол → Почтенный И Надежный
Table
это очень хороший виджет отображения сетки данных, встроенный в самые ранние версии Vaadin.
Grid
- это грандиозная переписка с нуля, предназначенная для замены таблицы. Команда Vaadin использует свою мудрость, полученную из опыта, "если бы мы знали тогда, что мы знаем сейчас", чтобы сделайте самую лучшую сетку данных возможной, учитывая сегодняшнюю веб-технологию. Сетка такая большая, что она получает свое собственного тщеславия страницы. См.это сообщение в блоге компании краткий обзор.
Итак, вообще говоря, я предлагаю вам фокус на сетке. Попробуйте, сначала изучите его и посмотрите, соответствует ли он вашим потребностям. Если вы столкнулись с ошибками или проблемами, или вам нужны функции, отсутствующие в сетке, то возврат к таблице. Вы можете смешайте и сопоставьте оба в проекте с оговоркой, что различный внешний вид и поведение могут запутать ваших пользователей.
думать решетки как не по годам развитый подросток, полный надежд и стремящийся совершить прыжок во взрослую жизнь, и стол как зрелый взрослый, упорно работающий в свои лучшие годы среднего возраста, мечтая о хорошо заработанной будущей пенсии, плывущей в закат.
подробности
при использовании Vaadin 6, на продолжение проекта или вам нужно поддерживать очень старые браузеры, то Table
- Это ваш единственный выбор. Grid
требуется Vaadin 7 или более поздней версии.
вот некоторые основные функции таблицы в настоящее время отсутствуют в сетке.
- функции перетаскивания (будут добавлены позже).
- изменение размера столбца путем перетаскивания пользователем края заголовка столбца.
оба имеют много особенностей. Они практикуют ленивую загрузку в браузер, автоматически загружая данные только по мере необходимости на стороне сервера, чтобы не перегружать веб-браузер. Оба позволяют пользователю перетаскивать столбцы в re-order. Оба позволяют пользователю показывать / скрывать столбцы.
Выбор Строки
оба позволяют выбирать отдельные строки или несколько строк.
сетка также имеет автоматическую функцию, где она добавляет столбец флажков. Пользователь может выбрать несколько строк, щелкнув эти флажки, а не с помощью мыши или мыши+клавиатуры. Многие, если не большинство, пользователи неуклюжи с управляемый мышью выбор нескольких строк. См.этот скриншот, и обратите внимание на первый столбец.
поддержка программирования для выбора отличается. Сетка не распространяется AbstractSelect
, вместо этого определяет свой собственный API выбора. Звоните addSelectionListener()
и определить SelectionListener
. См.Книги Фреймворк Vaadin.
Колонтитулы&
оба имеют верхние и нижние колонтитулы, но сетка имеет больше возможностей. Grid может размещать виджеты вместо текста. Сетка может иметь несколько строк заголовков. Сетка может присоединяться к ячейкам заголовка, например, охватывая таблицу HTML.
Редактирование На Месте
оба обеспечивают редактирование данных на месте, но по-разному. Таблица позволяет редактировать данные в ячейке. Grid взял другой подход, для редактирования всей строки, отображая мини-окно, небольшую форму ввода данных. Эта форма включает в себя пару кнопок подтверждения и отмены. Эта форма много более гибкий, чем редактирование ячеек таблицы.
фильтрация
сетка предлагает управляемую пользователем фильтрацию, где строка вводимых ячеек отображается под заголовками. По мере ввода пользователем фильтр применяется для отображения только совпадающих строк. См.этот скриншот. С таблицей, вам нужно создать какой-то пользовательский интерфейс и применить фильтрацию.
Поддерживается Контейнером Данных
обновление: Vaadin 8 приносит новую версию Grid это рычаги новый улучшенный и значительно упрощенная модель данных. Это майор причина использовать сетку вместо таблицы. Обратите внимание, что как исходная сетка, так и таблица по-прежнему доступны в Vaadin 8 через фреймворк Vaadin 7 уровень совместимости.
следующая старая информация осталась нетронутой...
и таблица, и сетка-это виджет только для презентации, поддерживаемый отдельным объектом данных, реализующим Container
интерфейс в соответствии с Модель Данных Vaadin.
класс таблицы также действует as контейнер, который всегда меня смущал. Я рад видеть, что Grid поддерживает более четкое разделение.
как и таблица, Grid предлагает некоторые удобные методы для быстрых и грязных ситуаций, когда вы хотите бросить некоторые данные в саму сетку без формального создания контейнера. Но удобные методы Grid используют row и колонки термины, в отличие от контейнера элемент и свойства термины. Эти условия делают более ясным, что вы разговариваете с сеткой, но сетка действует по умолчаниюIndexedContainer
инстанции от вашего имени.
Содержимое Ячейки
обновление: в Vaadin 8.1 Grid получает возможность отображать компонент в ячейке. Вижу live demo компонента Renderer.
обработка содержимого ячейки отличается. Сетка не может напрямую отображать значки столбцов, а также размещать компоненты (виджеты) в ячейке. Вместо этого используется новый Renderer
функции.
Doc & Demo
обе главы Книги Фреймворк Vaadin, для таблицы и один для сетки.
оба имеют демонстрационные версии. для таблицы (и TreeTable). И пару для сетки,одного окна и один с различными аспектами.
посмотреть этот страница брошюры для сетки, включая встроенную живую демонстрацию, со ссылкой на дальнейшие демонстрации.
Разное Различия
сетка имеет встроенный виджет для отображения числа в виде небольшого виджета термометра. См.этот скриншот в последние колонна.
для более конкретных различий см. раздел 5.24.1 Обзор – Различия В Таблице на Книги Фреймворк Vaadin.
Esoterica... Grid является первым компонентом в Компоненты Фреймворк Vaadin, высококачественный набор веб-компонентов, построенных на Google Polymer который готов к использованию с любой структурой, которая поддерживает Веб-Компоненты. Пока команда фреймворк Vaadin пообещал поддержать таблице годы в будущем, не ожидайте, что он получит такое особое внимание.
фреймворк Vaadin 8
в Vaadin 8.0 и 8.1 сетка становится еще лучше. Основные усовершенствования включают:
- работает с более простой моделью данных sleeker новой в Vaadin 8
- передать коллекцию объектов для отображения
- легко определить столбцы с типизированным лямбда-синтаксис
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 имеет большие планы для сетки, поэтому многое из того, что Вы читаете на странице StackOverflow, изменится. Команда будет с нетерпением добавлять функции, улучшения и исправления ошибок в ближайшие месяцы и годы. Многие улучшения уже были сделаны в 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);
}