動態渲染可編輯單元格的Table

一、問題描述

問題是這樣的，後台傳了xarr = [x1, x2,...,xn]和yarr = [y1, y2, ..yn]兩個陣列，前端要渲染出**並且可以填寫每個單元格的值，然後按照一定資料結構儲存並傳給後台，並且再次獲取這個資料結構和陣列xarr、yarr可以自己渲染出這個表？實現新增和修改的功能。大致介面效果如下圖所示：

y1, y2,...,yn作為列名，x1，x2, ..., xn作為第一列資料，此業務模型是一種常見的**，只不過要求行列都不固定，由後台資料提供並且動態生成。還要能夠實現修改功能。本質上是乙個動態渲染可編輯table的問題。難點在於動態構建**並且實現資料展示和儲存。

二、解決思路

（1）資料轉換成**後，處理起來就簡單了，如果以常見的table元件為例，只需要構建columns和datasource兩個陣列資料即可渲染出**；

（2）渲染出**後，**每乙個餘下的單元格都要可輸入，可以考慮單元格利用render渲染出input元件，通過input的操作onchange或onblur去改變資料並儲存。

（3）陣列是引用型別，可以利用引用型別只要沒有深拷貝或改變指標指向記憶體位址就不變的原理，方便記錄操作後的資料。

三、解決方法（以react結合ant design ui的table元件為例）：

（1）動態構建columns(**列資料)和datasource（**資料來源）渲染出**。（table可參考

1 const xarr = ['x1', 'x2', 'x3', 'x4'];
2 const datasource = xarr.map((v, i) =>());
67 const yarr = ['y1', 'y2', 'y3', 'y4', 'y5'];
8 const columns =[, ...yarr.map(item =>())];

這樣就得到形如datasource = [, ,...]; columns = [,,...];的**資料，將此資料來源傳入**元件table，即可渲染出**如下：

（2）**新增input並且根據onchange/onblur事件動態記錄datasource的變化。

1 const columns =[, ...yarr.map(item =>(} />9),
10}))];

渲染效果如下：

四、完整**

/**
* @author xiao-pengyou
* @create date 2019-03-27
* @desc 動態可編輯**
* */
import react, from 'react';
import from 'antd';
export default class demo extends purecomponent ;
componentdidmount() ));
this.setstate();//datasource不能在render裡面構建，在render裡面構建每次重新渲染的時候datasource會被重新構建，指標指向變化導致先前的修改不能被跟蹤
} render() , ...yarr.map(item => (} />
),}))];//最終的datasource就是我們想要的資料結構，修改時直接把這個datasource傳給構建的**就可以渲染
return ;//bordered設定邊框，pagination=false取消分頁功能，可以不用在意此引數
}}

最終效果（控制台輸出為提交給後台的datasource陣列）：

動態渲染可編輯單元格的Table

可編輯單元格ALV

可編輯單元格的CListCtrl控制項

FM控制ALV單元格可編輯

動態渲染可編輯單元格的Table

可編輯單元格ALV

可編輯單元格的CListCtrl控制項

FM控制ALV單元格可編輯

相關推薦