基于antd3 Tree实现树节点 查询

已于 2023-02-09 09:43:02 修改
阅读量283 收藏
点赞数 1
分类专栏： antd 文章标签： javascript react.js typescript
于 2023-02-08 16:09:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43138550/article/details/128937583
版权

基于antd3 Tree实现树节点 查询

基于antd Tree，实现了可编辑菜单树，支持以下功能：
树节点 查询

提示：以下代码，可参考

一、效果

在这里插入图片描述

二、完整代码

1.引入库

代码如下（示例）：

import * as React from 'react';
import { Modal, Input, Tree, Icon } from 'antd';
const { Search } = Input;
const { TreeNode } = Tree;
var tempKey: any = '1000';

const App = (props) => {
    const { onHandleCancel = () => { }, onHandleOk = () => { }, data = {} } = props;
    var datavalue = [
        {
            value: "0",
            defaultValue: "0",
            key: "0",
            parentKey: '0',
            isEditable: false,
            children: [
                {
                    value: "0-1",
                    key: "0-1",
                    defaultValue: "0-1",
                    isEditable: false,
                },
                {
                    value: "0-2",
                    key: "0-2",
                    defaultValue: "0-2",
                    isEditable: false,
                },
            ],
        },
        {
            value: "1",
            defaultValue: "1",
            key: "1",
            parentKey: '1',
            isEditable: false,
            children: [
                {
                    value: "0-1-1",
                    key: "0-1-1",
                    defaultValue: "0-1-1",
                    isEditable: false,
                },
                {
                    value: "0-2-1",
                    key: "0-2-1",
                    defaultValue: "0-2-1",
                    isEditable: false,
                },
            ],
        },
    ]
    const [treeData, setTreeData] = React.useState(datavalue);
    const [treeLoading, settreeLoading] = React.useState(false);
    const [expandedKeys, setexpandedKeys] = React.useState<any>([]);
    const [searchValue, setsearchValue] = React.useState('');
    const [autoExpandParent, setautoExpandParent] = React.useState(true);

    const onDragEnter = (info) => {
        console.log(info);
    };

    
    const DragEnter = (info) => {
        console.log(info);
    };
    // 拖拽
    const onDrop = (info) => {
        console.log(info);
        const dropKey = info.node.props.eventKey;
        const dragKey = info.dragNode.props.eventKey;
        const dropPos = info.node.props.pos.split('-');
        const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);

        const loop = (data, key, callback) => {
            for (let i = 0; i < data.length; i++) {
                if (data[i].key === key) {
                    return callback(data[i], i, data);
                }
                if (data[i].children) {
                    loop(data[i].children, key, callback);
                }
            }
        };

        const data = [...treeData];

        let dragObj;
        loop(data, dragKey, (item, index, arr) => {
            arr.splice(index, 1);
            dragObj = item;
        });
        if (!info.dropToGap) {
            // Drop on the content
            loop(data, dropKey, (item) => {
                item.children = item.children || [];
                // where to insert 示例添加到尾部，可以是随意位置
                item.children.push(dragObj);
            });
        } else if (
            (info.node.props.children || []).length > 0 && // Has children
            info.node.props.expanded && // Is expanded
            dropPosition === 1 // On the bottom gap
        ) {
            loop(data, dropKey, (item) => {
                item.children = item.children || [];
                // where to insert 示例添加到头部，可以是随意位置
                item.children.unshift(dragObj);
            });
        } else {
            let ar;
            let i;
            loop(data, dropKey, (item, index, arr) => {
                ar = arr;
                i = index;
            });
            if (dropPosition === -1) {
                ar.splice(i, 0, dragObj);
            } else {
                ar.splice(i + 1, 0, dragObj);
            }
        }
        setTreeData(data);
    };


    //新增
    const onAdd = (key) => {
        console.log('onAdd', key);
        var treeDataOld = JSON.parse(JSON.stringify(treeData));
        var treeDataNew = addNode(key, treeDataOld);
        setTreeData(treeDataNew);

        tempKey++;
        function addNode(key, data) {
            data.forEach((item) => {
                if (item.key === key) {
                    item.children
                        ? item.children.push({
                            value: `默认值${tempKey}`,
                            key: `${tempKey}`
                        })
                        : (item.children = [
                            {
                                value: `默认值${tempKey}`,
                                key: `${tempKey}`
                            }
                        ]);
                } else {
                    if (item.children) {
                        addNode(key, item.children);
                    }
                }
            });
            return data;
        }

    };
    //删除
    const onDelete = (key) => {
        console.log('onAdd', key);
        var treeDataOld = JSON.parse(JSON.stringify(treeData));
        var treeDataNew = deleteNode(key, treeDataOld);
        setTreeData(treeDataNew);

        function deleteNode(key, arr) {
            arr.map((item, index) => {
                if (item.key == key) {
                    arr.splice(index, 1);
                }
                if (item.children) {
                    deleteNode(key, item.children);
                }
            });
            return arr;
        }
    };

    // const onChange = (e, key) => {
    //     console.log('onChange', e, key);
    //     var treeDataOld = JSON.parse(JSON.stringify(treeData));
    //     var treeDataNew = editNode(key, treeDataOld, e.target.value);
    //     setTreeData(treeDataNew);

    //     function editNode(key, data, val) {
    //         data.forEach((item) => {
    //             if (item.key === key) {
    //                 item.title = val;
    //             } else {
    //                 if (item.children) {
    //                     editNode(key, item.children, val);
    //                 }
    //             }
    //         });
    //         return data;
    //     }
    // };
    const onChange = (e, key) => {
        changeNode(key, e.target.value, treeData);
        setTreeData(treeData.slice());
    };

    const changeNode = (key, value, data) =>
        data.forEach((item) => {
            if (item.key === key) {
                item.value = value;
            }
            if (item.children) {
                changeNode(key, value, item.children);
            }
        });

    const onEdit = (key) => {
        editNode(key, treeData);
        setTreeData(treeData.slice());
    };

    const editNode = (key, data) =>
        data.forEach((item) => {
            if (item.key === key) {
                item.isEditable = true;
            } else {
                item.isEditable = false;
            }
            // item.value = item.defaultValue; // 当某节点处于编辑状态，并改变数据，点击编辑其他节点时，此节点变成不可编辑状态，value 需要回退到 defaultvalue
            if (item.children) {
                editNode(key, item.children);
            }
        });

    //编辑树节点时直接选中
    const callbackRef = React.useCallback((node) => {
        node && node.focus();
        node && node.select();
    }, []);

    const handleBlur = (e, item) => {
        // let arr = _.cloneDeep(dataSource)
        // const value = e.target.value;
        // if (value) {//更改右侧树对应节点的值
        //     setDataSource(treeLip(arr, item.associativeId, e.target.value))
        // }
        // setEditType({ edit: false, id: item.associativeId })
    }
    const onSave = (key) => {
        saveNode(key, treeData);
        setTreeData(treeData.slice());
    };

    const saveNode = (key, data) =>
        data.forEach((item) => {
            if (item.key === key) {
                item.defaultValue = item.value;
            }
            if (item.children) {
                saveNode(key, item.children);
            }
            item.isEditable = false;
        });

    const InputCopy = (item) => {
        return <Input autoFocus={true} onBlur={(e) => handleBlur(e, item)} ref={callbackRef} maxLength={40} />
    }
    const renderTreeNodes = (data) => {
        let nodeArr = data.map((item) => {
            const index = item.value.indexOf(searchValue);
            const beforeStr = item.value.substr(0, index);
            const afterStr = item.value.substr(index + searchValue.length);
            if (item.isEditable) {

                item.title = (
                    <div>
                        <input value={item.value || ''} onChange={(e) => onChange(e, item.key)} />
                        <Icon type="close" style={{ marginLeft: 10 }} onClick={() => onDelete(item.key)} />
                        <Icon type="check-circle" style={{ marginLeft: 10 }} onClick={() => onSave(item.key)} />
                    </div>
                );
            } else {
                item.title = (
                    <div>
                        {index > -1 ? (
                            <span>
                                {beforeStr}
                                <span style={{ color: '#f50' }}>{searchValue}</span>
                                {afterStr}
                            </span>
                        ) : <span>{item.value}</span>}
                        <span>
                            <Icon type="plus" style={{ marginLeft: 10 }} onClick={() => onAdd(item.key)} />
                            <Icon type="form" style={{ marginLeft: 10 }} onClick={() => onEdit(item.key)} />
                            <Icon type="close" style={{ marginLeft: 10 }} onClick={() => onDelete(item.key)} />
                        </span>
                    </div>
                );
            }


            if (item.children) {
                return (
                    <TreeNode title={item.title} key={item.key} dataRef={item}>
                        {renderTreeNodes(item.children)}
                    </TreeNode>
                );
            }

            return <TreeNode title={item.title} key={item.key} />;
        });

        return nodeArr;
    };

    const iconRender = (node: any) => {
        let htmlNode = <i className="icon iconfont icon-yuandian" />;
        if (!node.isLeaf) {
            htmlNode = (
                <i style={{ color: '#F2B223' }} className="icon iconfont icon-tree-folder-close" />
            );
            if (node.expanded) {
                htmlNode = (
                    <i style={{ color: '#F2B223' }} className="icon iconfont icon-tree-folder-open" />
                );
            }
        }
        return <React.Fragment>{htmlNode}</React.Fragment>;
    }
    // 数组去重
    const unique = arr => {
        return Array.from(new Set(arr))
    }
    // 搜索父级ID。此处没有使用上。当树的数据每一项数据中没返回父级id时，就需要使用该方法获取父级id
    const getParentKey = (key, tree) => {
        let parentKey;
        for (let i = 0; i < tree.length; i++) {
            const node = tree[i];
            if (node.children) {
                if (node.children.some(item => item.treeId === key)) {
                    parentKey = node.treeId;
                } else if (getParentKey(key, node.children)) {
                    parentKey = getParentKey(key, node.children);
                }
            }
        }
        return parentKey;
    };

    const onSearch = value => {
        let expandedKeys: any = [];
        // 搜索时，寻找需展开的节点
        const getExpandKeys = arr => {
            arr.forEach(item => {

                if (item.value.indexOf(value) > -1) {
                    expandedKeys.push(item.key); // 此处每一项的数据就有父级id，所以直接把父级id塞进展开数组即可
                    // 倘若每一项的数据中不包含父级id。则需要执行下面的方法
                    // expandedKeys.push(getParentKey(item.treeId,this.state.treeList));
                }
                if (item.children && item.children.length > 0) {
                    getExpandKeys(item.children);
                }
            })
        }
        // 此处想实现的效果是搜索为空时，不展开树。若想搜索为空时，全部树都展开，则去掉这层if包装即可
        if (value) {
            getExpandKeys(treeData);
            let value = unique(expandedKeys);
            setexpandedKeys(value)
            setautoExpandParent(true)
        }
        console.log(expandedKeys)
        getExpandKeys(treeData);
        setsearchValue(value)
        setautoExpandParent(true)
        setexpandedKeys(expandedKeys)
    }

    const onExpand = expandedKeys => {
        setexpandedKeys(expandedKeys)
        setautoExpandParent(false)
    };
    return (
        <>
            <Modal
                title={data?.header}
                visible={true}
                onOk={() => onHandleOk()}
                onCancel={() => onHandleCancel(false)}
                okText="确认"
                cancelText="取消"
                maskClosable={false}
            >
                <Search className='Search'
                    placeholder="请输入搜索关键词"
                    allowClear
                    // bordered={false}
                    onSearch={onSearch} />
                <Tree
                    className="draggable-tree"
                    defaultExpandAll={true}
                    showLine
                    showIcon
                    onExpand={onExpand}
                    expandedKeys={expandedKeys}
                    // icon={iconRender}
                    draggable
                    onDragEnter={onDragEnter}
                    onDrop={onDrop}
                    autoExpandParent={autoExpandParent}
                >
                    {treeData?.length && renderTreeNodes(treeData)}

                </Tree>
            </Modal>
        </>
    );
};

export default App;
小菜鸟飞飞飞~
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
可自定义树节点的Tree组件
03-20
`可自定义树节点的Tree组件`是一个专为满足这种需求而设计的功能强大的工具。它允许开发者根据具体项目的需求来定制树形结构的节点展示，提升用户体验并优化数据管理。在本文中，我们将深入探讨这个组件的工作原理、...
antd-tree.zip
07-24
antd-tree.zip 文件是一个包含使用ANT Design（简称antd）框架中的Tree组件的项目压缩包。...项目利用了antd的Tree组件特性，实现了选中状态的外部同步，这对于需要树形数据选择功能的应用场景非常有用。
tree树的精准查询
m0_50290125的博客
06-06 267
ddd
antd tree搜索并定位_【windows】文件搜索神器,你还不知道？！！！
weixin_39831001的博客
11-02 187
windows操作系统提醒您：文件千万个，C盘就一个，安装不规范，查找很麻烦！今天推荐的这款软件就是针对我这样的收集癖用户，看到一个软件，嗯。好，下载！又看到一个资源，先下为敬。时间久了，当真要用到的时候，似乎好像下过这个资源啊。在哪呢？window自带的搜索又慢的发指。怎么办？今天的软件能解决你的烦恼。Everything 是一款极速电脑文件搜索神器，能迅速地对文件进行定位，与 Windows...
ant-design tree判断子节点，父节点，子节点一行显示，回显只显示被选中数据
最新发布
carrycarrie的博客
05-14 256
【代码】ant-design tree判断子节点，父节点，子节点一行显示，回显只显示被选中数据。
Reac版本的Ant Design树形控件的使用、搜索关键字标红、只显示搜索匹配中的数据
weixin_41308436的博客
12-14 1482
实现效果（需求）： 思路方法： 先去antd官网看看有没有满足需求的轮子，避免重复造轮子 拷贝数据，删掉没匹配中的数据，当搜索关键字为空时再还原数据 通过样式隐藏没匹配上的子节点 代码实现 const loop: any = (data: TreeObj[]) => { return ( data?.map((item: TreeObj) => { if (item) { const index = item.title.index
React中实现根据key选中treeNode
qq_34827742的博客
08-29 5033
React中实现根据key选中treeNode ant design中的Tree树形控件可以利用onSelect方法获取当前选中节点的key值，而根据key值选中树节点使其高亮的方法如下： 注意输出的selectedKeys为数组形式，传进去的selectKey也应该为数组形式，该数据可保存在state中实现动态渲染。...
React + antd 可编辑下拉树
灰太郎
02-13 349
React + antd 可编辑下拉树
如何实现vue的tree组件
01-18
Tree一直是大家熟知的组件，做一些大型的后台管理系统都会用到。使用树组件可以完整的展现其中的层级关系，并具有展开收起选择等交互功能。 效果 节点可以无限的递归延伸 可以展开和收起子节点 如果子节点全部选择...
react-antd table树形数据默认展开行实现jsx文件
12-18
react-antd table树形数据默认展开行实现jsx文件
Tree根据不同节点显示不同右键菜单
08-02
3. **构建动态菜单**：根据获取到的节点信息，我们可以构建不同的菜单项。菜单项的创建和添加可以通过`ContextMenuStrip`控件来完成。如果节点A需要的操作不同于节点B，那么我们可以在事件处理器中动态添加或移除...
Tree组件使用指南之十：获取选中的Tree节点
天地一沙鸥
08-20 5404
运行环境：JDeveloper 11.1.2.2.0 + Oracle Database 10g Express Edition 10.2.0.1。 实际情况中，经常需要获取选中的Tree节点信息，与定制TreeSelectionListener每次点击选中一个节点略有不同，可以通过按住Ctrl键选取多个节点。 说明，本实验基于定制SelectionListener。 1. 创建
antd中tree树点击文字展开节点、同级只展开一个节点及获取半选节点
lowers_1的博客
07-16 5104
antd中tree树点击文字展开节点、同级只展开一个节点及获取半选节点
[antdesign + 树控件] 拖拽功能
m0_53584457的博客
11-10 1159
思路: 我们有treeData（有结构的树控件数据）和 AllData（没有结构的数据），拖拽之后修改AllData，在重构树结构就行。当拖到父目录下的子目录下面的时候，它仅仅只能通过expanded(该目录是否展开)去进行判断，他是拖拽到父目录下还是子目录下的。子目录展开的话，即使拖到父目录下，但是它的上一个节点是展开的子目录，他默认是添加到展开的子目录里面的；比如子目录没有展开，即使拖到子目录下，但还是添加到了父目录下；看了官网，也是这样；不知道大佬们有么有其他的解决方法呢？
antd的tree组件的使用与坑
KisJLLLLLL的博客
10-23 871
每次更新或者添加 重新加载子节点 异步加载会消失，我发现是因为重新设置了treedate，如果要整个树形结构重新加载，需要把选中节点的状态清空在设置，如果是子节点，要用组件自带的loadData函数来获取子节点下面的数据，重新设置treedate会自节点的异步加载会消失。由于没有找到文档中有操作状态的函数，这边我是使用挂载来清除状态。下面是整体代码，清空状态需要看个人项目需求在哪边加👇。
ant design vue 使用树形控件（tree）点击节点expand判断的方法
早晚的博客
11-12 6765
当你想使用这个组件的时候，但是你点击一级树的时候调用一个接口，点击二级树的时候在调用另一个接口，那你就需要在点击一级节点的时候不用调用二级节点。那需要怎么做的，说一下我的思路，如果大家有别的更简单的方法，欢迎评论留言呐。 因为人家组件自带的方法expand有自带的参数，有一个node，node是一个对象，对象里面有一个pos的字符串，我就是判断的那个，用正则表达式匹配如果是0-0~0-9999的时候调用一级节点，如果是0-0-0的时候调用二级。 let reg = /^0-[0-99999]+$/; //
antd vue Tree组件，通过key递归获取该节点信息
最初都是小白
01-13 4281
<template> <div class="tzgl_wrap"> <a-tree :tree-data="treeData" @select="treeSelect" default-expand-all > <template slot="title" slot-scope="{ title }"> <span
antd树形结构回显示递归判断子节点是否选中和删除父节点
hujgg的博客
03-17 684
treeData.data = setTreeData1(res.data.data.permissionList); treeData.checkedKeys=[] //每次进来清空数据 treeData.oneTree=[] // treeData.checkedKeys=checkedKeys.checkedKeys nextTick(()=>{ let userMenuList:any=[] ...
antd Tree组件点击节点文字实现展开收起
06-07
3. 在Tree组件中设置expandedKeys属性，该属性为展开的节点的key的数组。 ```javascript <Tree onSelect={onSelect} expandedKeys={expandedKeys} // 其他属性 > // 树节点 </Tree> ``` 完整代码如下： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值