Сетки данных были одним из наиболее распространенных визуальных элементов программного обеспечения с момента появления самих пользовательских интерфейсов. Они обращаются к инстинкту, который заставляет всех нас принимать и понимать как можно больше данных и как можно быстрее. Сетки данных более полезны, чем когда-либо, не только для отображения данных, но и для их редактирования.
Благодаря автоматическим удобствам, таким как сортировка и автозаполнение, и расширенным функциям, таким как настраиваемые формулы, Microsoft Excel станет естественным выбором для большинства пользователей. Пользователи выбирают Excel, потому что он знаком. Хотя Excel стал наиболее распространенным примером программного обеспечения, использующего сетку данных, эта парадигма распространилась по всей области программного обеспечения. Поскольку веб-приложения продолжают заменять традиционные нативные приложения, к которым мы привыкли, вполне логично, что сетки данных также появятся в пользовательском интерфейсе веб-приложений.
На рынке существует множество сеток данных JavaScript: с открытым исходным кодом, сторонних и собственных. Что выбрать?
В другом посте мы обсудим, что делает сетки данных такими полезными в качестве элементов пользовательского интерфейса и почему Flexgrid — лучшая сетка данных React. Вы можете увидеть FlexGrid в действии и узнать о нем больше с помощью нашего приложения Learn Wijmo. Вы можете получить свою копию с NPM, с нашего CDN или скачать с нашего сайта.
Все это звучит здорово, правда? Давайте запустим FlexGrid, создав настраиваемую сетку данных React за считанные минуты. Мы будем использовать следующее приложение, чтобы продемонстрировать, как использовать FlexGrid с React, фреймворком JavaScript для Facebook:
https://stackblitz.com/edit/react-j3qjou
Мы использовали stackblitz для создания образца, чтобы его было легко поддерживать и делиться им.
Давайте начнем!
Создайте React-приложение
Чтобы создать собственную копию приложения, выполните следующие действия:
- Откройте stackblitz
- Нажмите кнопку «React/JavaScript» в нижней части экрана.
- Добавьте Wijmo в проект, введя «wijmo» в список зависимостей:
Импортируйте необходимые модули
В версии приложения React весь код и логика содержатся в файле index.js.
Код начинается с импорта необходимых классов и стилей из React и из Wijmo:
// index.js import React, { Component } from 'react'; import { render } from 'react-dom'; import './style.css';import { CollectionView } from 'wijmo/wijmo'; import { FlexGrid } from 'wijmo/wijmo.react.grid'; import { FlexGridFilter } from 'wijmo/wijmo.react.grid.filter'; import 'wijmo/styles/themes/wijmo.theme.material.css';
Обратите внимание, что в дополнение к классам код импортирует CSS. В данном случае мы выбрали материальную тему Wijmo, одну из нескольких, включенных в Wijmo.
Стиль приложения
Чтобы стилизовать приложение, отредактируйте файл styles.css следующим образом:
/* styles.css */
body {
font-family: Lato, Arial, Helvetica;
}
.wj-flexgrid { /* limit the grid's width and height */
max-height: 300px;
max-width: 32em;
}Добавьте источник данных в свою сетку
Наш источник данных будет частью состояния компонента приложения, как обычно для приложений React.
Компонент приложения определяется следующим образом:
// index.js class App extends Component { constructor() { super(); this.state = { data: new CollectionView([], { // grouped CollectionView groupDescriptions: ['make'] }), }; this.filterApplied = () => { let view = this.state.data; this.setState({ // to update summary info data: view, }); } }componentDidMount() { fetch('https://api.myjson.com/bins/cqvk8') .then(result => result.json()) .then(data => { let view = this.state.data; view.sourceCollection = data; this.setState({ data: view }); }); } render() { … } }
Состояние приложения предоставляет данные через свое свойство данные, которое представляет собой CollectionView, сгруппированное по марке. Данные загружаются асинхронно после монтирования компонента. Когда данные получены, они присваиваются свойству sourceCollection объекта CollectionView и становятся доступными для приложения.
Компонент также определяет метод filterApplied, который используется для обновления состояния при фильтрации данных. Это необходимо для обновления общего количества, отображаемого в заголовке приложения.
Визуализируйте данные в React
Последний шаг — реализация метода render компонента приложения, который отображает весь пользовательский интерфейс, включая сетку:
// index.js
class App extends Component {
constructor() {…}
componentDidMount() {…}
render() {
return (
<div>
<h1>
2019 Sedans (React)
</h1>
<p>
Sort by model …</p>
<p>
Showing{' '}
<b>{this.state.data.items.length}</b> models from{' '}
<b>{this.state.data.groups.length}</b> makes.</p>
<FlexGrid
allowResizing={'None'}
showAlternatingRows={false}
isReadOnly={true}
selectionMode={'ListBox'}
headersVisibility={'Column'}
autoGenerateColumns={false}
columns={[
{binding:'make', header:'Make', width:"*", visible:false},
{binding:'model', header:'Model', width:"*"},
{binding:'price', header:'Price', width:".5*", format: 'n0',
aggregate: 'Avg'},
]}
itemsSource={this.state.data}
>
<FlexGridFilter filterApplied={this.filterApplied}/>
</FlexGrid>
</div>
);
}
}Заголовок приложения содержит краткое описание приложения и сводку о том, сколько моделей и производителей отображается. Сводные счетчики обновляются автоматически, когда пользователь фильтрует данные. За заголовком следует элемент «FlexGrid», который инициализирует свойства сетки, включая itemsSource, отображаемые столбцы и их свойства.
Свойства столбца включают привязку, заголовок, формат и ширину для каждого столбца. Обратите внимание, что свойство aggregate в столбце цены заставляет сетку отображать среднюю цену для каждой марки в заголовках групп.
Элемент «FlexGrid» содержит элемент «FlexGridFilter», который добавляет фильтр столбца, поэтому пользователи могут фильтровать данные сетки по модели и по цене. Событие filterApplied используется для обновления состояния при изменении фильтра, поэтому обновляется сводка в верхней части страницы.
Запустите приложение
Вот и все! React-версия приложения «Седан 2019 готова».
Удачного кодирования! Если у вас есть вопросы или комментарии, обязательно напишите их ниже.
