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

點擊下載WijmoJS最新版

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

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

數據預覽組件 ：Presentational 和 Container

該示例的UI在GridView.jsx文件的單個GridView表示性組件中實現。

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

數據是datagrid中表示的items數組，以及動作創(chuàng)建者函數（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屬性，該屬性包含來自全局應用程序狀態(tài)的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'
    }
}

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

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

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

示例程序將使用更改的數據創(chuàng)建該數組的克隆，并且該數組的新副本在綁定到ImmutabilityProvider.itemsSource屬性的this.props.items屬性中可用。 ImmutabilityProvider檢測到此新數組實例，并使FlexGrid刷新其內容。

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

以下代碼，可將菜單使用組件的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)包含當前items數組的長度。

當用戶在下拉列表中選擇另一個值時，將觸發(fā)itemClicked事件并調用onCountChanged事件處理函數，該函數如下：

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

處理程序僅調用changeCountAction操作創(chuàng)建者函數，將新的數組長度作為操作數據傳遞。這迫使Store reducer創(chuàng)建一個指定長度的新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>

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

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

請注意，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';
//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'));

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

我們用react-redux Provider組件包裝應用程序組件樹，這樣就可以從任何應用程序組件中輕松訪問存儲項目。

結論

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

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

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

相關內容推薦：

試用版下載>>>

WijmoJS 2020v1 版本亮點：在React Redux 應用程序中，編輯數據網格（上）

WijmoJS 2020v1 版本亮點：在React Redux 應用程序中，編輯數據網格（中）