WijmoJS 是一款基于 HTML5 的前端開發(fā)工具包，由 80 多種靈活、高效、跨平臺(tái)、零依賴的 JavaScript UI 組件構(gòu)成，如表格（Grid）、圖表（Chart）、數(shù)據(jù)分析（Olap）、導(dǎo)航（Navigation）和金融圖表等，完美兼容原生 JavaScript，以及 Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架，可助力企業(yè)以最快的速度開發(fā)并構(gòu)建出一套成熟的 Web 應(yīng)用程序。

點(diǎn)擊下載WijmoJS最新版

前段時(shí)間，前端開發(fā)工具包 WijmoJS 發(fā)布最新版本 2020v1，將所有組件和功能模塊化，更加體現(xiàn)出 WijmoJS 的小巧、靈活和高效。這一版本的最大亮點(diǎn)，就是增加了“可在React Redux 應(yīng)用程序中，編輯數(shù)據(jù)網(wǎng)格”。

在前面的文章中我們介紹了React Redux是什么，以及前端UI組件庫WijmoJS 為何要在本次新版本發(fā)布中，增加在React Redux應(yīng)用程序編輯數(shù)據(jù)網(wǎng)格的功能?，F(xiàn)在，我們詳細(xì)介紹“如何創(chuàng)建一個(gè)使用DataGrid來顯示和編輯Redux Store中數(shù)組的簡單示例”的后半部分（點(diǎn)擊查看前文）。

數(shù)據(jù)預(yù)覽組件 ：Presentational 和 Container

該示例的UI在GridView.jsx文件的單個(gè)GridView表示性組件中實(shí)現(xiàn)。

按照Redux的React綁定中的慣例，我們將其與容器組件（在GridViewContainer.jsx文件中實(shí)現(xiàn)的GridViewContainer）一起使用。后者只是前者的包裝，目的是向GridView提供來自Redux Store的必要數(shù)據(jù)。

數(shù)據(jù)是datagrid中表示的items數(shù)組，以及動(dòng)作創(chuàng)建者函數(shù)（addItemAction，removeItemAction等），通過this.props對(duì)象，GridView可以將其作為道具使用。

這是GridViewContainer的實(shí)現(xiàn)方式：

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方法中的以下代碼添加了帶有關(guān)聯(lián)的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屬性，該屬性包含來自全局應(yīng)用程序狀態(tài)的items數(shù)組。

在每次Store reducer生成該數(shù)組的新克隆以應(yīng)用用戶修改時(shí)，會(huì)使用新的數(shù)組實(shí)例自動(dòng)更新this.props.items，并且ImmutabilityProvider將使FlexGrid更新其內(nèi)容以映射修改。

每當(dāng)用戶更改保存到datagrid中的數(shù)據(jù)時(shí)，都會(huì)調(diào)用ImmutabilityProvider的dataChanged事件。它綁定到onGridDataChanged處理函數(shù)，該函數(shù)實(shí)現(xiàn)如下：

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'
    }
}

處理程序只調(diào)用一個(gè)適當(dāng)?shù)膭?dòng)作創(chuàng)建器函數(shù)，由于使用了GridViewContainer容器組件，該函數(shù)也可以通過this.props對(duì)象通過GridView組件使用。動(dòng)作數(shù)據(jù)是從DataChangeEventArgs類型的事件參數(shù)中檢索的，它帶來有關(guān)已執(zhí)行的更改操作（action屬性，可以采用“添加”、“刪除”或“更改”值）信息，源數(shù)組中受影響項(xiàng)目的索引，以及對(duì)受影響項(xiàng)目的引用操作）。

請注意：“更改”是一個(gè)特殊操作，它同時(shí)使用了oldItem和newItem屬性。 oldItem包含必須更改其屬性值的原始（未更改）項(xiàng)目，而newItem包含具有新屬性值的原始克隆項(xiàng)目。

因此，具有直接附加的ImmutabilityProvider的FlexGrid不會(huì)觸發(fā)直接改變源數(shù)組的操作，而是使用事件提供的數(shù)據(jù)觸發(fā)dataChanged事件，該事件調(diào)用適當(dāng)?shù)牟僮鲃?chuàng)建者函數(shù)，將操作分派到Redux商店，然后到達(dá)該商店的reducer。

示例程序?qū)⑹褂酶牡臄?shù)據(jù)創(chuàng)建該數(shù)組的克隆，并且該數(shù)組的新副本在綁定到ImmutabilityProvider.itemsSource屬性的this.props.items屬性中可用。 ImmutabilityProvider檢測到此新數(shù)組實(shí)例，并使FlexGrid刷新其內(nèi)容。

該視圖包括一個(gè)Menu組件，該組件允許用戶更改在DataGrid中顯示數(shù)組的大小。更改其值會(huì)導(dǎo)致Redux Store創(chuàng)建指定長度的新項(xiàng)目數(shù)組。

以下代碼，可將菜單使用組件的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狀態(tài)的itemCount屬性，該狀態(tài)包含當(dāng)前items數(shù)組的長度。

當(dāng)用戶在下拉列表中選擇另一個(gè)值時(shí)，將觸發(fā)itemClicked事件并調(diào)用onCountChanged事件處理函數(shù)，該函數(shù)如下：

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

處理程序僅調(diào)用changeCountAction操作創(chuàng)建者函數(shù)，將新的數(shù)組長度作為操作數(shù)據(jù)傳遞。這迫使Store reducer創(chuàng)建一個(gè)指定長度的新items數(shù)組。視圖的另一個(gè)UI元素是只讀datagrid，它僅顯示items數(shù)組的內(nèi)容。

該DataGrid具有關(guān)聯(lián)的“顯示數(shù)據(jù)”復(fù)選框元素，該元素允許用戶臨時(shí)將DataGrid與數(shù)據(jù)陣列斷開連接。這是組件的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>

“顯示數(shù)據(jù)”復(fù)選框是受控組件，它將值存儲(chǔ)在組件狀態(tài)的showStoreData屬性中。

我們在這里使用本地組件來存儲(chǔ)此值，但是，如果您希望將所有內(nèi)容存儲(chǔ)在全局Redux狀態(tài)中，沒有問題，可以輕松地將其移動(dòng)到那里。

請注意，F(xiàn)lexGrid.itemsSource屬性有條件地綁定到Store的items數(shù)組，或者綁定到null值，具體取決于showStoreData屬性值。

整合資源文件

應(yīng)用程序的入口點(diǎn)是app.jsx文件，我們將所有應(yīng)用程序片段放在一起并運(yùn)行根App組件：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
//Application
import { appReducer } from './reducers';
import { GridViewContainer } from './GridViewContainer';

// Create global Redux Store
const store = createStore(appReducer);

class App extends React.Component<any, any> {
    render() {
        return <Provider store={store}>
            <GridViewContainer />
          </Provider>;
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

截至目前，我們已經(jīng)創(chuàng)建了一個(gè)應(yīng)用程序APP，并將其傳遞給我們的reducer。然后，使用GridViewContainer容器組件，依次呈現(xiàn)GridView組件，并將其作為道具傳遞給全局Store數(shù)據(jù)。

我們用react-redux Provider組件包裝應(yīng)用程序組件樹，這樣就可以從任何應(yīng)用程序組件中輕松訪問存儲(chǔ)項(xiàng)目。

結(jié)論

FlexGrid DataGrid以及關(guān)聯(lián)的ImmutabilityProvider組件可以最大程度的滿足您的需求：創(chuàng)建基于Redux應(yīng)用程序狀態(tài)管理和可編輯的DataGrid。

借助 WijmoJS 前端開發(fā)工具包 ，您可以在應(yīng)用程序UI中使用可編輯的DataGrid，而不會(huì)影響Redux對(duì)數(shù)據(jù)不變性的要求。即使在相當(dāng)大的數(shù)據(jù)上，此解決方案也具備優(yōu)秀的性能。

在Redux應(yīng)用程序中將datagrid用作數(shù)據(jù)編輯控件幾乎與使用輸入控件一樣簡單，在輸入控件中，您只需將控件值綁定到全局狀態(tài)值，并在控件的“ value”中分配一個(gè)具有新值的動(dòng)作已更改”事件即可。

相關(guān)內(nèi)容推薦：

試用版下載>>>

WijmoJS 2020v1 版本亮點(diǎn)：在React Redux 應(yīng)用程序中，編輯數(shù)據(jù)網(wǎng)格（上）

WijmoJS 2020v1 版本亮點(diǎn)：在React Redux 應(yīng)用程序中，編輯數(shù)據(jù)網(wǎng)格（中）