React Ant Design樹形表格的復雜增刪改操作
最近因為業(yè)務接觸了antd，使用antd完成一個復雜的樹形表格的顯示以及修改。在這其中遇見了不少坑，很多功能antd只寫了初步的功能，更為細化的功能只能自己完善。踩過的坑都寫在了這里。
樹形表格的顯示
在antd中對于表格的key值有著嚴格的控制，每一個row都必須有一個獨一無二的key值，可以是數(shù)字也可以是字符串。這一點和我曾經(jīng)使用過得iview有著很大的區(qū)別。react使用key來代表每一行是為了避免重新渲染的問題，這個優(yōu)化也在實際的開發(fā)中帶來了不少的問題。比如新建行時需要自定義新key。
下面直接上一下代碼及代碼效果，這是一個三級的樹形表格，且其中包含二級標題。
最終效果
colums標題: 簡易版標題，隨著功能的增加，我們將增加colums的復雜度。
let columns = [
{
title: '題目',
dataIndex: 'text'
},
{
title: '類型',
children: [
{
title: '一級',
dataIndex: 'text1'
},
{
title: '二級',
dataIndex: 'text2',
}]
},
{
title: '內容',
dataIndex: 'content'
},
{
title: '答案',
dataIndex: 'answer',
},
{
title: '類型',
dataIndex: 'mark_type',
className: 'line'
},
{
title: '版本',
dataIndex: 'version',
className: 'line'
},
{
title: '一級內容點',
dataIndex: 'value1',
className: 'line'
},
{
title: '二級內容點',
dataIndex: 'value2',
className: 'line'
},
{
title: '操作',
key: 'action',
width: 205
}
];
data數(shù)據(jù)：
let data = [{
"key": 1,
"text": "題目一",
"children": [{
"key": 11,
"text1": "數(shù)學一",
"children":[]
}, {
"key": 12,
"text1": "語文一",
"value1": "語文",
"children": [{
"key": 121,
"value2": "選擇",
"text2": "選擇題",
"content": "題目內容",
"answer": "A",
"mark_type": "1",
"version": "1"
},{
"key": 122,
"value2":"填空",
"text2": "填空題",
"content": "題目內容",
"answer": "梅花",
"mark_type": "1",
"version": "1"
},{
"key": 123,
"value2": "閱讀",
"text2": "閱讀題",
"content": "題目內容",
"answer": "野蠻生長",
"mark_type": "1",
"version": "1"
},{
"key": 124,
"value2": "文言文",
"text2": "文言文",
"content": "題目內容",
"answer": "滕王閣序",
"mark_type": "1",
"version": "1"
}],
}],
}, {
"key": 2,
"text": "題目二",
"children": [ {
"key": 21,
"text1": "英語一",
"value1": "英語",
"children": [{
"key": 211,
"value2": "完型",
"text2": "完形填空",
"content": "題目內容",
"answer": "ABC",
"mark_type": "2",
"version": "1"
},{
"key": 212,
"value2": "一級代碼",
"text2": "選擇",
"content": "題目內容",
"answer": "D",
"mark_type": "2",
"version": "1"
}],
}],
}];
增加子項數(shù)據(jù)
增加子項數(shù)據(jù)使用操作中的增加按鈕進行增加，增加按鈕設置為圖形，更為形象具體清晰化。
//button樣式使用antd自帶icon樣式
<Button type="primary" shape="circle" icon="plus" size={'small'}
onClick={this.handleAdd.bind(this, record)}
/>
注意事項：
1、對于最子項來說沒有增加子項選擇，需要對不同數(shù)據(jù)行進行不同處理
2、不同數(shù)據(jù)行新增數(shù)據(jù)的內容不同，字段也不同
3、新增之后需要點擊確認或者取消
4、加入數(shù)據(jù)點擊確認之后需要添加于當前key下的children中
本想使用antd自帶的editable屬性，但是這個屬性不支持二級標題的編輯，所以只有自己寫render
這個問題，在7102年就提出來了，但是已經(jīng)8102年了快9102年都沒有更新。
新增一級類型題目樣式
新增二級類型題目樣式
這里就部分render代碼:
//分級標題
{
title: '類型',
children:
[{
title: '一級',
dataIndex: 'text1',
render: (text, record) => {
if (this.state.isEditing && this.state.editingOneKey === record.key)
return <Input defaultValue={text} onChange={(e) => { this.changeEdit(e, record.key, 'text1') }} />
return text
}
},
{
title: '二級',
dataIndex: 'text2',
render: (text, record) => {
if (this.state.isEditing && this.state.editingTwoKey === record.key)
return <Input defaultValue={text} onChange={(e) => { this.changeEdit(e, record.key, 'text2') }} />
return text
}
}]
}
//select選擇
{
title: '內容',
dataIndex:'content',
render:(text, record) => {
if (text === 0)
text = '內容一';
if (text === 1)
text = '內容二';
if (this.state.isEditing && this.state.editingTwoKey === record.key) {
return <Select defaultValue={text} onChange={(e) => {
this.changeEdit(e, record.key, 'flag')
}} getPopupContainer={triggerNode => triggerNode.parentNode}>
<Option value='0'>有效</Option>
<Option value='1'>無效</Option>
</Select>
}
return text
}
}
注意展開
如果對一行未展開的行下新增數(shù)據(jù)，那么無法看到打開的編輯狀態(tài)是一個非常糟糕的問題。所以我們需要在新增子項的時候自動展開父項。
//steate初始化
expandedRows: [] //展開行
//render 初始化
<Table
bordered
expandedRowKeys={this.state.expandedRows}
onExpandedRowsChange={this.changeExpandedRows.bind(this)}
/>
//自動展開變化，獲取當前展開行
changeExpandedRows = (expandedRows) => {
this.setState({
expandedRows
})
};
//增加函數(shù)中
let rows = this.state.expandedRows;
rows.push(record.key);
this.setState({
expandedRows: rows
});
刪除行數(shù)據(jù)
刪除在antd中相較比較簡單，因為antd的table每行都有key屬性，key是唯一且必須的屬性，所以只要過濾掉包含目的key的數(shù)據(jù)即可視為刪除。因為這是樹形數(shù)據(jù)，普通的遍歷無法進行操作，所以使用深度優(yōu)先遍歷來進行數(shù)據(jù)處理，也可以使用廣度優(yōu)先，根據(jù)數(shù)據(jù)來變更。
handleDelete = (key) => {
let data = this.state.data;
data = dsFilter(data, key);
this.setState({
data
});
function dsFilter(dealData, dealKey) {
for (let i = 0; i < dealData.length; i++) {
if (dealData[i].children && dealData[i].children.length > 0) {
dealData[i].children = dsFilter(dealData[i].children, dealKey);
}
}
return dealData.filter(item => item.key !== dealKey);
}
};
修改某些字段
修改和新增的colums相同，不過修改需要保存之前的值。需要在input或select中設置defaultValue={text}來保證初始值相同
保存
無論是新增修改還是刪除，都需要進行保存。這里使用✓和✗ 來代表確定和取消。
同時需要注意，如果在一行的編輯中點擊其他行的操作，需要將之前行的操作視為取消。
<div>
<Button shape="circle" icon="check" size={'small'} style={{ backgroundColor: '#65BF34', color: '#FFF', border: 'none' }}
onClick={this.saveEdit.bind(this, record.key)}
/>
<Button shape="circle" icon="close" size={'small'} style={{ backgroundColor: '#FF3333', color: '#FFF', border: 'none' }}
onClick={this.cancelEdit.bind(this, record.key)}
/>
</div>
修改順序
修改順序就是修改數(shù)據(jù)在數(shù)組中的順序，使用簡單的temp進行交換即可。
shiftUp = (key) => {
let data = this.state.data;
data = dsShift(data, key);
this.setState({
data
});
function dsShift(dealData, dealKey) {
for (let i = 0; i < dealData.length; i++) {
if (dealData[i].children && dealData[i].children.length > 0) {
dealData[i].children = dsShift(dealData[i].children, dealKey);
}
if (dealData[i].key === dealKey) {
if (i === 0) {
message.warning('該行已置頂！');
break;
}
let temp = dealData[i - 1];
dealData[i - 1] = dealData[i];
dealData[i] = temp;
break;
}
}
return dealData;
}
};
shiftDown = (key) => {
let data = this.state.data;
data = dsShift(data, key);
this.setState({
data
});
function dsShift(dealData, dealKey) {
for (let i = 0; i < dealData.length; i++) {
if (dealData[i].children && dealData[i].children.length > 0) {
dealData[i].children = dsShift(dealData[i].children, dealKey);
}
if (dealData[i].key === dealKey) {
if (i === dealData.length - 1) {
message.warning('該行已置尾！');
break;
}
let temp = dealData[i + 1];
dealData[i + 1] = dealData[i];
dealData[i] = temp;
break;
}
}
return dealData;
}
};
總結
在進行表格數(shù)據(jù)操作中，需要進行變量的保存，這里就沒有多寫了。總的來說antd是個好組件，大部分功能都很齊全，但是很多細節(jié)還是需要自己進行完善。
補充知識：Antd(Ant-design)，嵌套子表格（expandedRowRender）的異步獲取數(shù)據(jù)
使用阿里的ant-design開源框架，要在表格里面嵌套子表格，需要在用戶點擊父表格的一行數(shù)據(jù)后，獲取該行的key，然后去異步請求后臺的數(shù)據(jù)用來填充子表格的內容。
如果這樣寫（省略無關代碼）：
expandedRowRender = (record) => {
dispatch({
type: 'flow/getPlanList',
payload: {
contractId: record.contract_id, // 該參數(shù)是從父表格帶過來的key
},
callback: () => {
const {
flow: { data },
} = this.props;
this.setState({
secData: data.list,
});
console.log("返回數(shù)據(jù)(PlanList):" + JSON.stringify(this.state.secData));
}
});
return (
<Table
columns={secColumns}
dataSource={this.state.secData}
pagination={false}
/>
);
};
render() {
return(
<Card>
{this.renderForm()}
<div>
<Table
expandedRowRender={this.expandedRowRender}
loading={loading}
rowSelection={rowSelection}
dataSource={list}
columns={columns}
pagination={paginationProps}
scroll={{ x: 2500}}
size = 'middle'
expandRowByClick={true}
onSelect={this.seFn}
/>
</div>
</Card>
)
}
則會出現(xiàn)不斷的發(fā)起請求的現(xiàn)象：
這是因為，expandedRowRender 實際上是在 Table 組件的 render 方法中調用的，React render 中用 dispatch 會造成重復調用的問題，dispatch -> setState -> render -> dispatch -> setState -> render，循環(huán)往復。所以應該把 dispatch 放在 onExpand 中。
onExpand = (expanded, record) => {
const { dispatch } = this.props;
dispatch({
type: 'flow/getPlanList',
payload: {
contractId: record.contract_id,
},
callback: () => {
const {
flow: { data },
} = this.props;
this.setState({
secData: data.list ,
});
console.log("返回數(shù)據(jù)(PlanList):" + JSON.stringify(this.state.secData));
}
});
}
但是單純的這樣做，又會帶來新的問題，就是子表格的所有數(shù)據(jù)都變成了相同的。
本人的解決辦法是使用鍵值對。
onExpand = (expanded, record) => {
const { dispatch } = this.props;
if (expanded === false) {
// 因為如果不斷的添加鍵值對，會造成數(shù)據(jù)過于龐大，浪費資源，
// 因此在每次合并的時候講相應鍵值下的數(shù)據(jù)清空
console.log("合并！");
this.setState({
subTabData: {
...this.state.subTabData,
[record.contract_id]: [] ,
}
});
} else {
console.log("展開！");
dispatch({
type: 'flow/getPlanList',
payload: {
contractId: record.contract_id,
},
callback: () => {
const {
flow: { data },
} = this.props;
this.setState({
subTabData: {
...this.state.subTabData,
[record.contract_id]: data.list ,
}
});
console.log("返回數(shù)據(jù)(PlanList):" + JSON.stringify(this.state.subTabData));
}
});
}
}
以上這篇React Ant Design樹形表格的復雜增刪改操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
懶加載意思是不會預加載，而是需要使用某段代碼，某個組件或者某張圖片時，才加載他們（延遲加載），這篇文章主要介紹了React懶加載實現(xiàn)原理2022-11-11
虛擬列表，其實就是將一個原本需要全部列表項的渲染的長列表，改為只渲染可視區(qū)域內的列表項，但滾動效果還是要和渲染所有列表項的長列表一樣。本文就將利用React實現(xiàn)虛擬列表，需要的可以參考一下2022-08-08
詳解在React-Native中持久化redux數(shù)據(jù)
這篇文章主要介紹了在React-Native中持久化redux數(shù)據(jù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
關于 Refs ，React 官網(wǎng)講解的對于新手來說不太友好，還是自己一字一句解讀后并以代碼驗證的方式后真正理解的.2021-05-05
React中setState/useState的使用方法詳細介紹
這篇文章主要介紹了React中setState/useState的使用方法，useState 和 setState 在React開發(fā)過程中 使用很頻繁，但很多人都停留在簡單的使用階段，并沒有正在了解它們的執(zhí)行機制2023-04-04
Redux?Toolkit的基本使用示例詳解(Redux工具包)
這篇文章主要介紹了Redux?Toolkit的基本使用,本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要給大家介紹了關于解決webpack -p壓縮打包react報語法錯誤的方法，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07
隨著React、Vue等支持組件化的MVVM前端框架越來越流行，在js中直接編寫css的技術方案也越來越被大家所接受。為什么前端開發(fā)者們更青睞于這些css-in-js的方案呢，下面帶你了解它2022-09-09
setState() 的執(zhí)行機制包括狀態(tài)合并、批量更新、異步更新、虛擬 DOM 比較和渲染組件等步驟,這樣可以提高性能并優(yōu)化渲染過程,這篇文章主要介紹了react中的setState的執(zhí)行機制,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了React antd tabs切換造成子組件重復刷新,需要的朋友可以參考下2021-04-04