我正在使用antd's Transfer组件。使用文档中给出的示例,我可以创建一个类似于以下内容的树形转移盒:
有没有办法在右侧也有树形结构?当前,当我在0-1-0
下选择0-1
时,它在右侧显示为平坦。
Sandbox example中也给出了以下代码:
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Transfer, Tree } from 'antd';
const { TreeNode } = Tree;
// Customize Table Transfer
const isChecked = (selectedKeys, eventKey) => {
return selectedKeys.indexOf(eventKey) !== -1;
};
const generateTree = (treeNodes = [], checkedKeys = []) => {
return treeNodes.map(({ children, ...props }) => (
<TreeNode {...props} disabled={checkedKeys.includes(props.key)}>
{generateTree(children, checkedKeys)}
</TreeNode>
));
};
const TreeTransfer = ({ dataSource, targetKeys, ...restProps }) => {
const transferDataSource = [];
function flatten(list = []) {
list.forEach(item => {
transferDataSource.push(item);
flatten(item.children);
});
}
flatten(dataSource);
return (
<Transfer
{...restProps}
targetKeys={targetKeys}
dataSource={transferDataSource}
className="tree-transfer"
render={item => item.title}
showSelectAll={false}
>
{({ direction, onItemSelect, selectedKeys }) => {
if (direction === 'left') {
const checkedKeys = [...selectedKeys, ...targetKeys];
return (
<Tree
blockNode
checkable
checkStrictly
defaultExpandAll
checkedKeys={checkedKeys}
onCheck={(
_,
{
node: {
props: { eventKey },
},
},
) => {
onItemSelect(eventKey, !isChecked(checkedKeys, eventKey));
}}
onSelect={(
_,
{
node: {
props: { eventKey },
},
},
) => {
onItemSelect(eventKey, !isChecked(checkedKeys, eventKey));
}}
>
{generateTree(dataSource, targetKeys)}
</Tree>
);
}
}}
</Transfer>
);
};
const treeData = [
{ key: '0-0', title: '0-0' },
{
key: '0-1',
title: '0-1',
children: [{ key: '0-1-0', title: '0-1-0' }, { key: '0-1-1', title: '0-1-1' }],
},
{ key: '0-2', title: '0-3' },
];
class App extends React.Component {
state = {
targetKeys: [],
};
onChange = targetKeys => {
console.log('Target Keys:', targetKeys);
this.setState({ targetKeys });
};
render() {
const { targetKeys } = this.state;
return (
<div>
<TreeTransfer dataSource={treeData} targetKeys={targetKeys} onChange={this.onChange} />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('container'));
下图显示了我要转移的方式。
我希望能够转移孩子
转移孩子时,左表应在其父项下保留其余子项,而右表应在其父项名下具有转移的子项。
最佳答案
查看此example,其中:TransferTree
是检查节点并显示树路径的示例。AntdTreeTransfer
Transfer
组件的示例,该组件在传输时具有树路径。
export const renderTreeNodes = data =>
data.map(item =>
item.children ? (
<Tree.TreeNode title={item.title} key={item.key} dataRef={item}>
{renderTreeNodes(item.children)}
</Tree.TreeNode>
) : (
<Tree.TreeNode {...item} dataRef={item} />
)
);
export const filterTree = (keys, halfKeys, rootNode) =>
rootNode
? rootNode
.filter(node => keys.includes(node.key) || halfKeys.includes(node.key))
.map(nodeRoot => ({
...nodeRoot,
children: filterTree(keys, halfKeys, nodeRoot.children)
}))
: [];
export default function TreeTransfer() {
const [checkedNodes, setCheckedNodes] = useState([]);
const onCheck = (selectedKeys, info) => {
const filteredTree = filterTree(selectedKeys, info.halfCheckedKeys, data);
setCheckedNodes(filteredTree);
};
return (
<FlexBox>
<Row type="flex" gutter={20}>
<Col>
<Card>
<Tree checkable defaultExpandAll onCheck={onCheck}>
{renderTreeNodes(data)}
</Tree>
</Card>
</Col>
<Col>
<Card>
<Tree checkable defaultExpandAll>
{renderTreeNodes(checkedNodes)}
</Tree>
</Card>
</Col>
</Row>
</FlexBox>
);
}
export default function AntdTreeTransfer() {
const [leftCheckedKeys, setLeftCheckedKeys] = useState([]);
const [checkedNodes, setCheckedNodes] = useState([]);
const [targetNodes, setTargetNodes] = useState([]);
return (
<FlexBox>
<Transfer
operations={['', 'Clear']}
onChange={(_, direction) => {
setLeftCheckedKeys([]);
direction === 'right'
? setTargetNodes(checkedNodes)
: setTargetNodes([]);
}}
style={{ width: '50vh' }}
>
{({ direction, onItemSelect, selectedKeys }) =>
direction === 'left' ? (
<Tree
showLine
blockNode
checkable
defaultExpandAll
checkedKeys={leftCheckedKeys}
onCheck={(selectedKeys, info) => {
setLeftCheckedKeys(selectedKeys);
const filteredTree = filterTree(
selectedKeys,
info.halfCheckedKeys,
data
);
setCheckedNodes(filteredTree);
const eventKey = info.node.props.eventKey;
onItemSelect(eventKey, selectedKeys.includes(eventKey));
}}
>
{renderTreeNodes(data)}
</Tree>
) : (
<Tree
autoExpandParent
blockNode
checkable
onCheck={(selectedKeys, info) => {
const eventKey = info.node.props.eventKey;
onItemSelect(eventKey, selectedKeys.includes(eventKey));
}}
>
{renderTreeNodes(targetNodes)}
</Tree>
)
}
</Transfer>
</FlexBox>
);
}
关于javascript - 在传输组件的两面都具有树结构,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56680158/