轉(zhuǎn)帖|產(chǎn)品更新|編輯:莫成敏|2020-05-08 10:54:19.403|閱讀 261 次
概述:本文將詳細(xì)介紹:如何創(chuàng)建一個(gè)使用DataGrid來顯示和編輯Redux Store中數(shù)組的簡單示例。本文是該內(nèi)容的后半部分。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
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)用程序。
前段時(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)格(中)
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自: