javascript - 在 Transfer 组件的两边都有一个树结构
问题描述
我正在使用antd 的 Transfer组件。使用文档中给出的示例,我可以创建一个类似于以下内容的树传输框:
有没有办法让我在右侧也有一个树结构?目前,当我0-1-0
在 下选择0-1
时,它在右侧显示为平坦的。
沙盒示例中也给出了代码,如下所示:
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'));
我想要传输的方式如下图所示。
- 我希望能够转移孩子
- 当一个孩子被转移时,左表应该在其父名下有剩余的孩子,而右表应该在其父名下有转移的孩子。
解决方案
查看此示例,其中:
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>
);
}
推荐阅读
- reactjs - 如何呈现在 React 中作为响应接收到的完整 html 页面
- google-cloud-platform - 带有 NEG 的 GKE Ingress:后端运行状况检查未通过
- javascript - 我得到了正确的结果,但在控制台选项卡的调试器中,我总是看到两倍的预期结果
- image - 如何在 Swift 中将 3 张图像(100x100 像素)合并为一张新的大图(300x100 像素)
- sql - 如何在 MS SQL 中将十六进制编码的字符串转换为整数?
- apache-spark - Spark 无法识别来自 String 的换行符、& 等
- python - 'int' 对象没有属性 'append' 没有真正的原因
- javascript - ASP.net 找不到 javascript 函数
- azure - 使用带有 Flask 的 Azure Functions,我如何实现 2 个 Azure 函数 webhook 以同时从控制台运行
- node.js - 无法 Docker 将基于 nuxt 的快速服务器端口转发到主机