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應用程序編輯數據網格的功能?，F在，我們將詳細介紹：如何創建一個使用DataGrid來顯示和編輯Redux Store中數組的簡單示例。

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

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

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

您還可以粘貼剪貼板中的數據，或清除所選單元格區域中的多個單元格值。

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

除了編輯之外，您還可以根據需要轉換數據-單擊列標題進行排序，將列標題拖到datagrid上方的組面板中進行分組，然后單擊列標題中的過濾器圖標進行過濾。

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

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

狀態定義 State

最初的應用程序全局狀態在reducers.jsx文件中定義如下：

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

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

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

事件 Actions

Redux操作創建者函數在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個事件用于更改項目數組（ADD_ITEM，REMOVE_ITEM和CHANGE_ITEM）的操作，還有一個附加的CHANGE_COUNT事件，可使商店創建具有不同數量的全新項目數組。

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

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

Reducer

應用程序根據上述動作定義一個單例的Reducer，對執行器全局狀態進行更新。它在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;
    }
}

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

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

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

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

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

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

本文內容尚未完結，請持續關注我們后續內容！感興趣的朋友可以下載WijmoJS最新版免費試用~

相關內容推薦：

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