我正在尝试使用 antd 表的 rowselection reactjs。我正在尝试这个 ant-components-table-demo-expand-children
当我选择父行时,它必须选择该父行的子行(它应该勾选子行)。
this.rowSelection = {
onSelect: (record, selected, selectedRows) => this.onSelectChange(record, selected, selectedRows),
onSelectAll: (selected, selectedRows, changeRows) => this.allRowsSelected(selected, selectedRows, changeRows)
};
<Table
rowKey={data._id}
columns={this.columns1}
rowSelection={this.rowSelection}
expandedRowRender={(record, index, indent, expanded) =>
this.expanding(record, expanded)
}
onExpand={this.onExpand}
dataSource={data}
/>
最佳答案
当您选择一个parent
节点时,您可以通过onSelect
函数获取children
节点。同样,当您从onSelectAll
函数select/deselect
时,您可以获取所有节点。
您需要将所选父
节点及其子节点的键
存储在state
中。
要选择/取消选择
复选框,您需要将那些键
设置/取消设置为selectedRowKeys
,如下所示:selectedRowKeys: Array。 from(selectedCBKeys)
(selectedCBKeys = 父键 + 它的子键)
const rowSelection = {
selectedRowKeys: Array.from(selectedCBKeys),
onChange: (selectedRowKeys, selectedRows) => {},
onSelect: (record, selected, selectedRows) => {
this.getKey(record);
},
onSelectAll: (selected, selectedRows, changeRows) => {
changeRows.map(item => this.getKey(item));
}
};
如何获取父树所有子节点的key?
只是递归遍历父树。我像这样收集了所有的 keys
:
getKey = data => {
this.storeKey(data.key); //it just stores the key in "state"
if (data.children) {
data.children.map(item => this.getKey(item));
}
};
这就是我存储所有 key 的方式。我用了Set .
state = {
selectedCBKeys: new Set()
};
storeKey = key => {
//If the key is already present in "state" just delete it.
//It helps in toggling the checkboxes.. right?
if (this.state.selectedCBKeys.has(key)) {
const newSet = this.state.selectedCBKeys;
newSet.delete(key);
this.setState({
selectedCBKeys: newSet
});
return;
}
this.setState(prevState => ({
...prevState,
selectedCBKeys: prevState.selectedCBKeys.add(key)
}));
};
App.js
import { Table } from "antd";
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name"
},
{
title: "Age",
dataIndex: "age",
key: "age",
width: "12%"
},
{
title: "Address",
dataIndex: "address",
width: "30%",
key: "address"
}
];
const data = [
{
key: 1,
name: "John Brown sr.",
age: 60,
address: "New York No. 1 Lake Park",
children: [
{
key: 11,
name: "John Brown",
age: 42,
address: "New York No. 2 Lake Park"
},
{
key: 12,
name: "John Brown jr.",
age: 30,
address: "New York No. 3 Lake Park",
children: [
{
key: 121,
name: "Jimmy Brown",
age: 16,
address: "New York No. 3 Lake Park"
}
]
}
]
},
{
key: 2,
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park"
}
];
class App extends Component {
state = {
selectedCBKeys: new Set()
};
storeKey = key => {
if (this.state.selectedCBKeys.has(key)) {
const newSet = this.state.selectedCBKeys;
newSet.delete(key);
this.setState({
selectedCBKeys: newSet
});
return;
}
this.setState(prevState => ({
...prevState,
selectedCBKeys: prevState.selectedCBKeys.add(key)
}));
console.log("new keys: ", key);
};
getKey = data => {
this.storeKey(data.key);
if (data.children) {
data.children.map(item => this.getKey(item));
}
};
render() {
const { selectedCBKeys } = this.state;
// rowSelection objects indicates the need for row selection
const rowSelection = {
selectedRowKeys: Array.from(selectedCBKeys),
onChange: (selectedRowKeys, selectedRows) => {
console.log(
`selectedRowKeys: ${selectedRowKeys}`,
"selectedRows: ",
selectedRows
);
},
onSelect: (record, selected, selectedRows) => {
this.getKey(record);
},
onSelectAll: (selected, selectedRows, changeRows) => {
console.log(
"onSelectAll: ",
selected,
" selectedRows: ",
selectedRows,
" changeRows: ",
changeRows
);
// selectedRows.map(item => this.getKey(item));
changeRows.map(item => this.getKey(item));
}
};
return (
<div className="parent">
<Table
columns={columns}
rowSelection={rowSelection}
dataSource={data}
/>
</div>
);
}
}
这是 demo在堆栈 Blitz 上。让我知道,
关于reactjs - antd表中使用rowSelection在父行上select时选择子行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57974511/