WijmoJS 2020v1 版本亮点：在React Redux 应用程序中，编辑数据网格（下）

本文将详细介绍：如何创建一个使用DataGrid来显示和编辑Redux Store中数组的简单示例。本文是该内容的后半部分。

WijmoJS 是一款基于 HTML5 的前端开发工具包，由 80 多种灵活、高效、跨平台、零依赖的 JavaScript UI 组件构成，如表格（Grid）、图表（Chart）、数据分析（Olap）、导航（Navigation）和金融图表等，完美兼容原生 JavaScript，以及 Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架，可助力企业以最快的速度开发并构建出一套成熟的 Web 应用程序。

WijmoJS最新版

前段时间，前端开发工具包 WijmoJS 发布最新版本 2020v1，将所有组件和功能模块化，更加体现出 WijmoJS 的小巧、灵活和高效。这一版本的最大亮点，就是增加了“可在React Redux 应用程序中，编辑数据网格”。

在前面的文章中我们介绍了React Redux是什么，以及前端UI组件库WijmoJS 为何要在本次新版本发布中，增加在React Redux应用程序编辑数据网格的功能。现在，我们详细介绍“如何创建一个使用DataGrid来显示和编辑Redux Store中数组的简单示例”的后半部分（点击查看前文）。

数据预览组件 ：Presentational 和 Container

该示例的UI在GridView.jsx文件的单个GridView表示性组件中实现。

按照Redux的React绑定中的惯例，我们将其与容器组件（在GridViewContainer.jsx文件中实现的GridViewContainer）一起使用。后者只是前者的包装，目的是向GridView提供来自Redux Store的必要数据。

数据是datagrid中表示的items数组，以及动作创建者函数（addItemAction，removeItemAction等），通过this.props对象，GridView可以将其作为道具使用。

这是GridViewContainer的实现方式：

import { bindActionCreators } from 'redux';import { connect } from 'react-redux';import { GridView } from './GridView';import { addItemAction, removeItemAction, changeItemAction, changeCountAction } from './actions';const mapStateToProps = state => ({    items: state.items,    itemCount: state.itemCount})const mapDispatchToProps = dispatch => {    return bindActionCreators(        {            addItemAction, removeItemAction, changeItemAction, changeCountAction        },        dispatch    );};export const GridViewContainer = connect(    mapStateToProps,    mapDispatchToProps  )(GridView);

GridView演示性组件使用组件的render方法中的以下代码添加了带有关联的ImmutabilityProvider的FlexGrid组件：

import * as wjFlexGrid from '@grapecity/wijmo.react.grid';import * as wjGridFilter from '@grapecity/wijmo.react.grid.filter';import { DataChangeEventArgs, DataChangeAction } from '@grapecity/wijmo.grid.immutable';import { ImmutabilityProvider } from '@grapecity/wijmo.react.grid.immutable';……<wjFlexGrid.FlexGrid        allowAddNew        allowDelete        initialized={this.onGridInitialized}>    <ImmutabilityProvider        itemsSource={this.props.items}        dataChanged={this.onGridDataChanged} />    <wjGridFilter.FlexGridFilter/>    <wjFlexGrid.FlexGridColumn binding="id" header="ID" width={80} isReadOnly={true}></wjFlexGrid.FlexGridColumn>    <wjFlexGrid.FlexGridColumn binding="start" header="Date" format="d"></wjFlexGrid.FlexGridColumn>    <wjFlexGrid.FlexGridColumn binding="end" header="Time" format="t"></wjFlexGrid.FlexGridColumn>    <wjFlexGrid.FlexGridColumn binding="country" header="Country"></wjFlexGrid.FlexGridColumn>    <wjFlexGrid.FlexGridColumn binding="product" header="Product"></wjFlexGrid.FlexGridColumn>    <wjFlexGrid.FlexGridColumn binding="sales" header="Sales" format="n2"></wjFlexGrid.FlexGridColumn>    <wjFlexGrid.FlexGridColumn binding="downloads" header="Downloads" format="n0"></wjFlexGrid.FlexGridColumn>    <wjFlexGrid.FlexGridColumn binding="active" header="Active" width={80}></wjFlexGrid.FlexGridColumn></wjFlexGrid.FlexGrid>

如您所见，ImmutabilityProvider的itemsSource属性绑定到this.props.items属性，该属性包含来自全局应用程序状态的items数组。

在每次Store reducer生成该数组的新克隆以应用用户修改时，会使用新的数组实例自动更新this.props.items，并且ImmutabilityProvider将使FlexGrid更新其内容以映射修改。

每当用户更改保存到datagrid中的数据时，都会调用ImmutabilityProvider的dataChanged事件。它绑定到onGridDataChanged处理函数，该函数实现如下：

onGridDataChanged(s: ImmutabilityProvider, e: DataChangeEventArgs) {    switch (e.action) {        case DataChangeAction.Add:            this.props.addItemAction(e.newItem);            break;        case DataChangeAction.Remove:            this.props.removeItemAction(e.oldItem, e.itemIndex);            break;        case DataChangeAction.Change:            this.props.changeItemAction(e.newItem, e.itemIndex);            break;        default:            throw 'Unknown data action'    }}

处理程序只调用一个适当的动作创建器函数，由于使用了GridViewContainer容器组件，该函数也可以通过this.props对象通过GridView组件使用。动作数据是从DataChangeEventArgs类型的事件参数中检索的，它带来有关已执行的更改操作（action属性，可以采用“添加”、“删除”或“更改”值）信息，源数组中受影响项目的索引，以及对受影响项目的引用操作）。

请注意：“更改”是一个特殊操作，它同时使用了oldItem和newItem属性。 oldItem包含必须更改其属性值的原始（未更改）项目，而newItem包含具有新属性值的原始克隆项目。

因此，具有直接附加的ImmutabilityProvider的FlexGrid不会触发直接改变源数组的操作，而是使用事件提供的数据触发dataChanged事件，该事件调用适当的操作创建者函数，将操作分派到Redux商店，然后到达该商店的reducer。

示例程序将使用更改的数据创建该数组的克隆，并且该数组的新副本在绑定到ImmutabilityProvider.itemsSource属性的this.props.items属性中可用。 ImmutabilityProvider检测到此新数组实例，并使FlexGrid刷新其内容。

该视图包括一个Menu组件，该组件允许用户更改在DataGrid中显示数组的大小。更改其值会导致Redux Store创建指定长度的新项目数组。

以下代码，可将菜单使用组件的render方法添加到视图中：

import * as wjInput from '@grapecity/wijmo.react.input';....<wjInput.Menu header='Items number'    value={this.props.itemCount}    itemClicked={this.onCountChanged}>    <wjInput.MenuItem value={5}>5</wjInput.MenuItem>    <wjInput.MenuItem value={50}>50</wjInput.MenuItem>    <wjInput.MenuItem value={100}>100</wjInput.MenuItem>    <wjInput.MenuItem value={500}>500</wjInput.MenuItem>    <wjInput.MenuItem value={5000}>5,000</wjInput.MenuItem>    <wjInput.MenuItem value={10000}>10,000</wjInput.MenuItem>    <wjInput.MenuItem value={50000}>50,000</wjInput.MenuItem>    <wjInput.MenuItem value={100000}>100,000</wjInput.MenuItem></wjInput.Menu>

菜单的value属性绑定到全局Redux状态的itemCount属性，该状态包含当前items数组的长度。

当用户在下拉列表中选择另一个值时，将触发itemClicked事件并调用onCountChanged事件处理函数，该函数如下：

onCountChanged(s: wjcInput.Menu) {    this.props.changeCountAction(s.selectedValue);}

处理程序仅调用changeCountAction操作创建者函数，将新的数组长度作为操作数据传递。这迫使Store reducer创建一个指定长度的新items数组。视图的另一个UI元素是只读datagrid，它仅显示items数组的内容。

该DataGrid具有关联的“显示数据”复选框元素，该元素允许用户临时将DataGrid与数据阵列断开连接。这是组件的render方法中的JSX，它添加了这些组件：

<input type="checkbox"    checked={this.state.showStoreData}    onChange={ (e) => {        this.setState({ showStoreData: e.target.checked});} } /><b>Show data</b><wjFlexGrid.FlexGrid    itemsSource={this.state.showStoreData this.props.items : null}    isReadOnly/></div>

“显示数据”复选框是受控组件，它将值存储在组件状态的showStoreData属性中。

我们在这里使用本地组件来存储此值，但是，如果您希望将所有内容存储在全局Redux状态中，没有问题，可以轻松地将其移动到那里。

请注意，FlexGrid.itemsSource属性有条件地绑定到Store的items数组，或者绑定到null值，具体取决于showStoreData属性值。

整合资源文件

应用程序的入口点是app.jsx文件，我们将所有应用程序片段放在一起并运行根App组件：

import * as React from 'react';import * as ReactDOM from 'react-dom';import { createStore } from 'redux';import { Provider } from 'react-redux';//Applicationimport { appReducer } from './reducers';import { GridViewContainer } from './GridViewContainer';// Create global Redux Storeconst store = createStore(appReducer);class App extends React.Component<any, any> {    render() {        return <Provider store={store}>            <GridViewContainer />          </Provider>;    }}ReactDOM.render(<App />, document.getElementById('app'));

截至目前，我们已经创建了一个应用程序APP，并将其传递给我们的reducer。然后，使用GridViewContainer容器组件，依次呈现GridView组件，并将其作为道具传递给全局Store数据。

我们用react-redux Provider组件包装应用程序组件树，这样就可以从任何应用程序组件中轻松访问存储项目。

结论

FlexGrid DataGrid以及关联的ImmutabilityProvider组件可以最大程度的满足您的需求：创建基于Redux应用程序状态管理和可编辑的DataGrid。

借助 WijmoJS 前端开发工具包 ，您可以在应用程序UI中使用可编辑的DataGrid，而不会影响Redux对数据不变性的要求。即使在相当大的数据上，此解决方案也具备优秀的性能。

在Redux应用程序中将datagrid用作数据编辑控件几乎与使用输入控件一样简单，在输入控件中，您只需将控件值绑定到全局状态值，并在控件的“ value”中分配一个具有新值的动作已更改”事件即可。

相关内容推荐：

试用版下载>>>

WijmoJS 2020v1 版本亮点：在React Redux 应用程序中，编辑数据网格（上）

WijmoJS 2020v1 版本亮点：在React Redux 应用程序中，编辑数据网格（中）

想要购买WijmoJS 正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：

来源：慧都