WijmoJS 是一款基于 HTML5 的前端開發(fā)工具包，由 80 多種靈活、高效、跨平臺、零依賴的 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)用程序。

點擊下載WijmoJS最新版

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

上文中我們介紹了React Redux是什么，以及前端UI組件庫WijmoJS 為何要在本次新版本發(fā)布中，增加在React Redux應(yīng)用程序編輯數(shù)據(jù)網(wǎng)格的功能。現(xiàn)在，我們將詳細(xì)介紹：如何創(chuàng)建一個使用DataGrid來顯示和編輯Redux Store中數(shù)組的簡單示例。

該示例遵循標(biāo)準(zhǔn)的React-Redux應(yīng)用程序結(jié)構(gòu)，但采用了扁平化的文件夾結(jié)構(gòu)，以使其更適合WijmoJS的在線演示站點。另外，由于示例站點對演示站點的要求，因此它使用SystemJS運行時加載器加載模塊，而不是Webpack或類似的捆綁程序。

該應(yīng)用程序具有一個包含兩個FlexGrid控件的單一視圖。

最上面的是由ImmutabilityProvider組件控制的可編輯DataGrid，該組件已從Redux Store綁定到陣列。這是用于檢查功能的DataGrid（我們在本文中討論的內(nèi)容）。您可以通過從鍵盤上鍵入單元格值來編輯單元格值，使用網(wǎng)格行列表末尾的“新行”行來添加新項，或者通過選擇它們并按Delete鍵來刪除項。

您還可以粘貼剪貼板中的數(shù)據(jù)，或清除所選單元格區(qū)域中的多個單元格值。

值得一提的是，要使用Object.freeze() 函數(shù)凍結(jié)datagrid中顯示的數(shù)據(jù)數(shù)組中的所有項目，以確保執(zhí)行編輯時datagrid不會讓數(shù)據(jù)改變。

除了編輯之外，您還可以根據(jù)需要轉(zhuǎn)換數(shù)據(jù)-單擊列標(biāo)題進(jìn)行排序，將列標(biāo)題拖到datagrid上方的組面板中進(jìn)行分組，然后單擊列標(biāo)題中的過濾器圖標(biāo)進(jìn)行過濾。

第二個DataGrid是只讀的。它不使用ImmutabilityProvider，而是使用其itemsSource屬性直接綁定到商店的數(shù)組。該DataGrid可以幫助您檢查通過頂部DataGrid所做的更改如何應(yīng)用于Redux Store。

頂部DataGrid上方還有一個菜單，可用于更改數(shù)據(jù)陣列的大小。小型陣列可方便地檢查您的更改如何應(yīng)用于商店。更大的數(shù)組可用于評估編輯過程的性能。您可以選擇一些與實際應(yīng)用中期望的項目相似的項目，并評估其工作方式。

狀態(tài)定義 State

最初的應(yīng)用程序全局狀態(tài)在reducers.jsx文件中定義如下：

const itemCount = 5000;
const initialState = {
    itemCount,
    items: getData(itemCount),
    idCounter: itemCount
}

它包含具有隨機(jī)生成的items數(shù)組，以及幾個輔助屬性-itemCount和idCounter，這些屬性定義數(shù)組中的項數(shù)，而idCounter存儲唯一的id值，該id值分配給新添加項的id屬性。

items數(shù)組是由示例的DataGrid表示的數(shù)組，使用Object.freeze（）函數(shù)凍結(jié)數(shù)組中的每個項目，以確保真正滿足Redux提出的數(shù)據(jù)不變性要求。

事件 Actions

Redux操作創(chuàng)建者函數(shù)在actions.jsx文件中定義：

export const addItemAction = (item) => ({
    type: 'ADD_ITEM',
    item
});

export const removeItemAction = (item, index) => ({
    type: 'REMOVE_ITEM',
    item,
    index
});

export const changeItemAction = (item, index) => ({
    type: 'CHANGE_ITEM',
    item,
    index
});

export const changeCountAction = (count) => ({
    type: 'CHANGE_COUNT',
    count
});

有3個事件用于更改項目數(shù)組（ADD_ITEM，REMOVE_ITEM和CHANGE_ITEM）的操作，還有一個附加的CHANGE_COUNT事件，可使商店創(chuàng)建具有不同數(shù)量的全新項目數(shù)組。

每個事件都依賴于“action creator”事件。在ImmutabilityProvider.dataChanged事件處理程序（在GridView表示組件中）中調(diào)用這些函數(shù)，以通知商店有關(guān)datagrid中所做的數(shù)據(jù)更改。

對于項目更改操作，index屬性包含items數(shù)組中受影響的索引項目， item屬性保存了對item對象的引用。

Reducer

應(yīng)用程序根據(jù)上述動作定義一個單例的Reducer，對執(zhí)行器全局狀態(tài)進(jìn)行更新。它在reducers.jsx文件中定義：

export const appReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'ADD_ITEM':
            {
                // make a clone of the new item which will be added to the
                // items array, and assigns its 'id' property with a unique value.
                let newItem = Object.freeze(copyObject({}, action.item, 
                        { id: state.idCounter }));
                return copyObject({}, state, {
                    // items array clone with a new item added
                    items: state.items.concat([newItem]),
                    // increment 'id' counter
                    idCounter: state.idCounter + 1
                });
            }
        case 'REMOVE_ITEM':
            {
                let items = state.items,
                    index = action.index;
                return copyObject({}, state, {
                    // items array clone with the item removed
                    items: items.slice(0, index).concat(items.slice(index + 1))
                });
            }
        case 'CHANGE_ITEM':
            {
                let items = state.items,
                    index = action.index,
                    oldItem = items[index],
                    // create a cloned item with the property changes applied
                    clonedItem = Object.freeze(copyObject({}, oldItem, action.item));
                return copyObject({}, state, {
                    // items array clone with the updated item
                    items: items.slice(0, index).
                        concat([clonedItem]).
                        concat(items.slice(index + 1))
                });
            }
        case 'CHANGE_COUNT':
            {
                // create a brand new state with a new data
                let ret = copyObject({}, state, {
                    itemCount: action.count,
                    items: getData(action.count),
                    idCounter: action.count
                });
                return ret;
            }
        default:
            return state;
    }
}

根據(jù)Redux的要求，我們不會對現(xiàn)有項目數(shù)組及其項目的屬性進(jìn)行修改。如果添加或刪除項目，會首先創(chuàng)建添加或刪除該項目的克隆。如果該操作要求我們更新現(xiàn)有項目，我們將創(chuàng)建一個新的數(shù)組，將更新后的項替換為更改項的克隆。

我們使用 \@ grapecity / wijmo.grid.immutable模塊中的copyObject函數(shù)來克隆對象。如果它是由瀏覽器實現(xiàn)的，它將有效地使用Object.assign函數(shù)；如果沒有，則使用自定義實現(xiàn)（例如，在IE中）。

要處理REMOVE_ITEM和CHANGE_ITEM操作，我們需要知道items數(shù)組中受此更改影響的現(xiàn)有項目及其索引。在此示例中，我們使用最簡單，也是最快的方法來執(zhí)行此操作：該項目的索引在操作數(shù)據(jù)的index屬性中傳遞（ImmutabilityProvider.dataChanged事件為您帶來此信息！）。

如果上述方法不起作用，則可以在操作數(shù)據(jù)時傳遞將要更改的原始項目，并使用items.indexOf（）方法找到其索引，或按商品ID搜索。

對于CHANGE_ITEM操作，您不僅需要知道將要更改的現(xiàn)有項目，還需要知道該項目的新屬性值。通過為您提供包含新項目屬性值的克隆對象，ImmutabilityProvider.dataChanged事件的數(shù)據(jù)也帶來了此信息，此克隆對象在操作的item屬性中傳遞，并且由reducer用于創(chuàng)建具有新屬性值的新克隆項目，以在克隆items數(shù)組中使用它而不是舊的對象。

請注意，對于添加到克隆項數(shù)組中的任何克隆項，我們調(diào)用Object.freeze以保護(hù)該項免于意外情況。

本文內(nèi)容尚未完結(jié)，請持續(xù)關(guān)注我們后續(xù)內(nèi)容！感興趣的朋友可以下載WijmoJS最新版免費試用~

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

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