小程序树展示

最新推荐文章于 2024-03-20 15:47:27 发布
最新推荐文章于 2024-03-20 15:47:27 发布
阅读量502 收藏
点赞数
分类专栏： Taro 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/waillyer/article/details/119784264
版权

在这里插入图片描述

import React, { useState, useEffect } from 'react';
import { useRouter } from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import Customer from '../../services/customerProfileList';
import starIc from '../../assets/star.png';
import { AtIcon } from 'taro-ui';
import './index.scss';

const TreeNode = props => {
    const change = () => {
        props.changeData(props.itemNode);
    };
    return (
        <View className="client-tree-child-tree">
            <View className="client-tree-node-content">
                <Text>{props.title}</Text>
                <View>
                    ({props.admin_name}){props.isCurrent ? <Image src={starIc} /> : null}
                    {props?.children?.length > 0 ? (
                        <Text style={{ marginLeft: '20rpx' }} onClick={change}>
                            {props?.collapse ? (
                                <AtIcon value="chevron-up" size="15" color="#979ea5"></AtIcon>
                            ) : (
                                <AtIcon value="chevron-down" size="15" color="#979ea5"></AtIcon>
                            )}
                        </Text>
                    ) : null}
                </View>
            </View>
            {props?.collapse ? props.children : null}
        </View>
    );
};

const renderTreeNodes = (data, id, changeData) => {
    return data?.map(item => {
        const { client_name: title, admin_name: name, children, collapse } = item;
        if (children && children.length > 0) {
            return (
                <TreeNode
                    key={data.id}
                    isCurrent={item.id === Number(id)}
                    title={title}
                    admin_name={name}
                    collapse={collapse}
                    changeData={changeData}
                    itemNode={item}
                >
                    {renderTreeNodes(children, id, changeData)}
                </TreeNode>
            );
        }
        return (
            <TreeNode
                key={data.id}
                isCurrent={item.id === Number(id)}
                title={title}
                admin_name={name}
                itemNode={item}
                changeData={changeData}
            />
        );
    });
};
// const client2 = [
//     {
//         admin_name: '何蕾蕾0',
//         client_name: '徐州金蝶软件有限公司',
//         id: 3709,
//         phone: '15358165572',
//         pid: null,
//         children: [
//             {
//                 admin_name: '何蕾蕾1',
//                 client_name: '徐州长龙能源科技有限公司',
//                 id: 3079,
//                 phone: '15358165572',
//                 pid: 3709,
//                 children: [
//                     {
//                         admin_name: '何蕾蕾1-1',
//                         client_name: '徐州长龙能源科技有限公司',
//                         id: 307933,
//                         phone: '15358165572',
//                         pid: 3079,
//                     },
//                     {
//                         admin_name: '何蕾蕾1-2',
//                         client_name: '徐州长龙能源科技有限公司',
//                         id: 37701,
//                         phone: '15358165572',
//                         pid: 3079,
//                     },
//                 ],
//             },
//             {
//                 admin_name: '何蕾蕾',
//                 client_name: '徐州长龙能源科技有限公司',
//                 id: 3770,
//                 phone: '15358165572',
//                 pid: 3709,
//             },
//         ],
//     },
//     {
//         admin_name: '何蕾蕾',
//         client_name: '徐州金蝶软件有限公司',
//         id: 37099,
//         phone: '15358165572',
//         pid: null,
//         children: [
//             {
//                 admin_name: '何蕾蕾',
//                 client_name: '徐州长龙能源科技有限公司',
//                 id: 37701,
//                 phone: '15358165572',
//                 pid: 37099,
//             },
//         ],
//     },
// ];
// const findData = (arr, curId) => {
//     let result = null; // 运行结果
//     const getTreeItem = (data, id) => {
//         data.map(item => {
//             if (Number(id) === Number(item?.id)) {
//                 result = item; // 结果赋值
//                 return false;
//             }
//             if (item.children) {
//                 getTreeItem(item.children, id);
//             }
//             return { ...item };
//         });
//     };
//     getTreeItem(arr, curId);
//     return result;
// };
// const mapAllData = (arr, curId) => {
//     let arrDatas = [];
//     const getTreeItem = (data, id) => {
//         let flag = false;
//         arrDatas = data.map(item => {
//             const newItem = item;
//             if (Number(id) === Number(item?.id)) {
//                 newItem.collapse = true;
//                 flag = true;
//             } else {
//                 newItem.collapse = false;
//             }
//             if (item.children) {
//                 const isChildTarget = getTreeItem(item.children, id);
//                 if (isChildTarget) {
//                     newItem.collapse = true;
//                 }
//             }
//             return { ...item };
//         });
//         return flag;
//     };
//     getTreeItem(arr, curId);
//     return arrDatas;
// };
// 查找子节点的所有父节点
const getParentNode = (arr1, curId) => {
    const getNodeArr = [];
    const forFunc = (arr, id) => {
        for (let i = 0; i < arr.length; i++) {
            if (Number(id) === Number(arr[i].id)) {
                const arr2 = arr[i];
                arr2.collapse = false;
                getNodeArr.push(arr2);
                forFunc(arr1, arr[i]?.pid);
                break;
            } else if (arr[i].children) {
                forFunc(arr[i].children, id);
            }
        }
    };
    forFunc(arr1, curId);
    return getNodeArr;
};
// 更改节点
const changeAllNodes = (arr, ids) => {
    let arrDatas = [];
    const getTreeItem = (data, id) => {
        arrDatas = data?.map(item => {
            const newItem = item;
            if (Number(id) === Number(item?.id)) {
                newItem.collapse = true;
            } else {
                // newItem.collapse = false;
            }
            if (item.children) {
                getTreeItem(item.children, id);
            }
            return { ...item };
        });
    };
    ids.forEach(element => {
        getTreeItem(arr, element);
    });
    console.log('arrDatas', arrDatas);
    return arrDatas;
};
const AssociatedClient = () => {
    const [client, setClient] = useState([]);
    const {
        params: { id },
    } = useRouter();

    useEffect(() => {
        Customer.fetchAssociatedClients(id).then(res => {
            if (res.XCmdrCode === 0) {
                const initDatas = [...(res.XCmdrResult || [])];
                const datap = getParentNode([...initDatas], id);
                const openNodeIds = datap
                    ?.map(item => item.id)
                    ?.filter(el => Number(el) !== Number(id)); // 所有父节点，展开目标节点的父节点
                // const getData = mapAllData([...initDatas], id); // 初始化数据
                const pids = changeAllNodes(initDatas, openNodeIds);
                setClient(pids);
            }
        });
    }, [id]);
    const clickAllData = (arr, curId) => {
        let arrDatas = [];
        const getTreeItem = (data, id) => {
            arrDatas = data?.map(item => {
                const newItem = item;
                if (Number(id) === Number(item?.id)) {
                    newItem.collapse = !newItem.collapse;
                }
                if (item.children) {
                    getTreeItem(item.children, id);
                }
                return { ...item };
            });
        };
        getTreeItem(arr, curId);
        return arrDatas;
    };
    const changeData = item => {
        const getDatas = [...client];
        const changeDatas = clickAllData(getDatas, item?.id);
        setClient(changeDatas);
    };
    return (
        <View className="associated-client-container">
            <View className="client-tree-wrap">{renderTreeNodes(client, id, changeData)}</View>
        </View>
    );
};

export default AssociatedClient;

展开收缩处理

默认展开当前用户
在这里插入图片描述

关键部分

/ 查找子节点的所有父节点
const getParentNode = (arr1, id) => {
    const getNodeArr = [];
    const forFunc = (arr, id) => {
        for (let i = 0; i < arr.length; i++) {
            if (Number(id) === Number(arr[i].id)) {
                getNodeArr.push(arr[i]);
                forFunc(arr1, arr[i]?.pid);
                break;
            } else if (arr[i].children) {
                forFunc(arr[i].children, id);
            }
        }
    };
    forFunc(arr1, id);
    return getNodeArr;
};
// 更改节点
const changeAllNodes = (arr, ids) => {
    let arrDatas = [];
    const getTreeItem = (data, id) => {
        arrDatas = data.map(item => {
            const newItem = item;
            if (Number(id) === Number(item?.id) || Number(id) === Number(item?.pid)) {
                newItem.collapse = true;
            } else {
                newItem.collapse = false;
            }
            if (item.children) {
                getTreeItem(item.children, id);
            }
            return { ...item };
        });
    };
    ids.forEach(element => {
        getTreeItem(arr, element);
    });
    return arrDatas;
};
  const datap = getParentNode([...client2], id);
                const openNodeIds = datap.map(item => item.id); // 所有父节点
                console.log('datap', datap);
                console.log('openNode', openNodeIds);
                const pids = changeAllNodes(initDatas, openNodeIds);
                

import React, { useState, useEffect } from 'react';
import { useRouter } from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import Customer from '../../services/customerProfileList';
import starIc from '../../assets/star.png';
import { AtIcon } from 'taro-ui';
import './index.scss';

const TreeNode = props => {
    const change = () => {
        props.changeData(props.itemNode);
    };
    return (
        <View className="client-tree-child-tree">
            <View className="client-tree-node-content">
                <Text>{props.title}</Text>
                <View>
                    ({props.admin_name}){props.isCurrent ? <Image src={starIc} /> : null}
                    {props?.children?.length > 0 ? (
                        <Text style={{ marginLeft: '20rpx' }} onClick={change}>
                            {props?.collapse ? (
                                <AtIcon value="chevron-up" size="15" color="#979ea5"></AtIcon>
                            ) : (
                                <AtIcon value="chevron-down" size="15" color="#979ea5"></AtIcon>
                            )}
                        </Text>
                    ) : null}
                </View>
            </View>
            {props?.collapse ? props.children : null}
        </View>
    );
};

const renderTreeNodes = (data, id, changeData) => {
    return data?.map(item => {
        const { client_name: title, admin_name: name, children, collapse } = item;
        if (children && children.length > 0) {
            return (
                <TreeNode
                    key={data.id}
                    isCurrent={item.id === Number(id)}
                    title={title}
                    admin_name={name}
                    collapse={collapse}
                    changeData={changeData}
                    itemNode={item}
                >
                    {renderTreeNodes(children, id, changeData)}
                </TreeNode>
            );
        }
        return (
            <TreeNode
                key={data.id}
                isCurrent={item.id === Number(id)}
                title={title}
                admin_name={name}
                itemNode={item}
                changeData={changeData}
            />
        );
    });
};
const client2 = [
    {
        admin_name: '何蕾蕾0',
        client_name: '徐州金蝶软件有限公司',
        id: 3709,
        phone: '15358165572',
        pid: null,
        children: [
            {
                admin_name: '何蕾蕾1',
                client_name: '徐州长龙能源科技有限公司',
                id: 307922,
                phone: '15358165572',
                pid: 3709,
                children: [
                    {
                        admin_name: '何蕾蕾1-1',
                        client_name: '徐州长龙能源科技有限公司',
                        id: 3079,
                        phone: '15358165572',
                        pid: 307922,
                    },
                    {
                        admin_name: '何蕾蕾1-2',
                        client_name: '徐州长龙能源科技有限公司',
                        id: 37701,
                        phone: '15358165572',
                        pid: 307922,
                    },
                ],
            },
            {
                admin_name: '何蕾蕾',
                client_name: '徐州长龙能源科技有限公司',
                id: 3770,
                phone: '15358165572',
                pid: 3709,
            },
        ],
    },
    {
        admin_name: '何蕾蕾',
        client_name: '徐州金蝶软件有限公司',
        id: 37099,
        phone: '15358165572',
        pid: null,
        children: [
            {
                admin_name: '何蕾蕾',
                client_name: '徐州长龙能源科技有限公司',
                id: 37701,
                phone: '15358165572',
                pid: 37099,
            },
        ],
    },
];
const findData = (arr, curId) => {
    let result = null; // 运行结果
    const getTreeItem = (data, id) => {
        data.map(item => {
            if (Number(id) === Number(item?.id)) {
                result = item; // 结果赋值
                return false;
            }
            if (item.children) {
                getTreeItem(item.children, id);
            }
            return { ...item };
        });
    };
    getTreeItem(arr, curId);
    return result;
};
const mapAllData = (arr, curId) => {
    let arrDatas = [];
    const getTreeItem = (data, id) => {
        const statusMachine = { flag: false };
        arrDatas = data.map(item => {
            const newItem = item;
            if (Number(id) === Number(item?.id)) {
                newItem.collapse = true;
                statusMachine.flag = true;
            } else {
                newItem.collapse = false;
            }
            if (item.children) {
                const isChildTarget = getTreeItem(item.children, id);
                if (isChildTarget?.flag) {
                    newItem.collapse = true;
                }
            }
            return { ...item };
        });
        return statusMachine;
    };
    getTreeItem(arr, curId);
    return arrDatas;
};
// 查找子节点的所有父节点
const getParentNode = (arr1, id) => {
    const getNodeArr = [];
    const forFunc = (arr, id) => {
        for (let i = 0; i < arr.length; i++) {
            if (Number(id) === Number(arr[i].id)) {
                getNodeArr.push(arr[i]);
                forFunc(arr1, arr[i]?.pid);
                break;
            } else if (arr[i].children) {
                forFunc(arr[i].children, id);
            }
        }
    };
    forFunc(arr1, id);
    return getNodeArr;
};
const changeAllNodes = (arr, ids) => {
    let arrDatas = [];
    const getTreeItem = (data, id) => {
        arrDatas = data.map(item => {
            const newItem = item;
            if (Number(id) === Number(item?.id) || Number(id) === Number(item?.pid)) {
                newItem.collapse = true;
            } else {
                newItem.collapse = false;
            }
            if (item.children) {
                getTreeItem(item.children, id);
            }
            return { ...item };
        });
    };
    ids.forEach(element => {
        getTreeItem(arr, element);
    });
    return arrDatas;
};
const AssociatedClient = () => {
    const [client, setClient] = useState([]);
    const {
        params: { id },
    } = useRouter();

    useEffect(() => {
        Customer.fetchAssociatedClients(id).then(res => {
            if (res.XCmdrCode === 0) {
                // setClient(res.XCmdrResult || []);
                const initDatas = [...client2];
                // const getData = mapAllData([...initDatas], id); // 初始化数据
                console.log('initDatas', initDatas);
                // console.log('getData', getData);
                const datap = getParentNode([...client2], id);
                const openNodeIds = datap.map(item => item.id); // 所有父节点
                console.log('datap', datap);
                console.log('openNode', openNodeIds);
                const pids = changeAllNodes(initDatas, openNodeIds);
                console.log('pids', pids);

                setClient(pids);
            }
        });
    }, [id]);
    const clickAllData = (arr, curId) => {
        let arrDatas = [];
        const getTreeItem = (data, id) => {
            arrDatas = data.map(item => {
                const newItem = item;
                if (Number(id) === Number(item?.id)) {
                    newItem.collapse = !newItem.collapse;
                }
                if (item.children) {
                    getTreeItem(item.children, id);
                }
                return { ...item };
            });
        };
        getTreeItem(arr, curId);
        return arrDatas;
    };
    const changeData = item => {
        console.log('item', item);
        const getDatas = [...client];
        const changeDatas = clickAllData(getDatas, item?.id);
        setClient(changeDatas);
    };
    return (
        <View className="associated-client-container">
            <View className="client-tree-wrap">{renderTreeNodes(client, id, changeData)}</View>
        </View>
    );
};

export default AssociatedClient;
waillyer
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
钉钉小程序-无限树状
qq_42344946的博客
12-14 861
效果图如下： 自己写一个组件 tree.axml 代码如下： 组件的js 组件的json，因为递归遍历，所以他还引用自身 引用的页面，index.axml 数据格式如下图 参考：https://www.jianshu.com/p/dabca0161993
在小程序当中渲染树
weixin_45566993的博客
04-10 888
Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 我们可以很轻松的去遍历一棵树，无论是广度优先遍历还是深度优先遍历，那么怎么在小程序当中渲染一棵树呢？ 先看一下我们深度优先遍历的代码 ? | 123456789 | function dfs(tree)
基于自主学习的遗传树小程序原型展示
03-19
基于自主学习的遗传树小程序原型展示
【uniapp 、小程序】渐进式树形结构组件（支持回显）
最新发布
weixin_43436640的博客
03-20 1023
效果图（右箭头用的uviewplus的u-icon ，可自行修改） 此组件只包含画框部分 传入的数组格式如下（一个label、一个value、一个children组成的树形数组），回显只需将此数组以及目标id传入即可， 微信小程序的话隐藏再显示一次组件就通过refs调用一次组件的getScollWidthForMpWeixin方法即可 源代码如下：
小程序选择器展现树形表结构数据
datong_csdn的博客
05-25 2774
树形结构以地区为例，省市区三级联动。这里为什么不用现成的组建呢，因为客户的业务范围比较小（黑人脸）。 我这里写成了一个组件。 wxml： <view class="section"> <picker mode="multiSelector" bindchange="PickerChange" bindcolumnchange="ColumnChange" valu...
小程序基本命令
aiven1637的博客
10-30 3244
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序 树形菜单组件
01-30
微信小程序 树形菜单组件 存放路径：/components/treeList/treeList listData数据格式:[{title:'A层级菜单1',children:[]},{title:'A层级菜单2',children:[]}] 使用： <block wx:for="{{listData}}" wx:key="index"><treeList listData="{{item}}" step="1" ></treeList></block>
微信小程序实现文件目录树结构展示
weixin_43272072的博客
07-01 5976
微信小程序文件夹目录结构显示 最近做微信小程序，碰到列表展示客户信息。含有二级目录，想做成资源管理器那种加减号显示文件目录。找了好久小程序官方文档，没有找到百度也没有，只能自己琢磨了，还好做出来了。多了不说，直接上代码和需求。 后台接口返回数据格式：{ "data": [ { "id": 2, "sets_name": "分组1", "file_path": null, "create_time...
TreeCRTL 树状控件的小程序
08-23
vc TreeCRTL 树状控件各种操作的小程序
小程序 列表
江苏小白龙
04-16 1331
列表组件 for只要给组件增加for一个数组那么就可以实现列表组件 wxml代码 &lt;block wx:for="{{yetinglist}}"&gt; &lt;view class='waibian' bindtap="readDetail" data-id="{{item.title}}"&gt; &lt;image src="{{item.smallLogo}}&quo
基于自主学习的遗传树小程序原型展示PPT
03-19
基于自主学习的遗传树小程序原型展示
基于自主学习的遗传树小程序简版原型展示PPT
03-19
基于自主学习的遗传树小程序原型展示
2000个小程序精选源码（包含49个行业）
08-22
│ │ 信息科技公司展示小程序.zip │ │ 华云智慧园区.zip │ │ 房地产公司展示.zip │ │ │ ├─企业应用（1个） │ │ 企业OA系统小程序.zip │ │ │ ├─优惠券卡卷（1个） │ │ 优惠券卡卷小程序...
微信小程序商城类项目使用到的前端效果（3）——树状图
Luxuriant_tree的博客
12-18 601
wxml <view class="person-list"> <view class="p-item" wx:for="{{personList}}" wx:key="{{index}}"> <!-- 显示 --> <view class="p-intro {{item.son.length?'item':'...
二叉查找树常用小程序
dyingfair的专栏
02-25 450
BinaryTree.hstruct BSTreeNode { int m_nValue; // value of node BSTreeNode *m_pLeft; // left child of node BSTreeNode *m_pRight; // right child of node }; // 创建二元查找树 void addBSTreeNode(BST...
二叉树小程序
kumouse的专栏
03-17 898
 今天做了一个二叉树的练习，以前感觉二叉树的树图和黑漆漆的命令行没有多大的关联，可事实表明命令行的输入和树的节点是一一对应的(如果程序的输入都正确的话)。/* 标准文档模板 */#include "Stdio.h"#include "Conio.h"typedef struct node1{ char data; struct node1 *lchild,*
一个小程序,树状目录列表
DrBoom的博客
04-01 6311
import os def fileCntIn(currPath): '''汇总当前目录下文件数''' return sum([len(files) for root, dirs, files in os.walk(currPath)]) def dirsTree(startPath): '''树形打印出目录结构''' with open('allfile.tx
求助~~求利用树型列表远程查看文件夹 小弟菜鸟 望各位高手指教
flairboby的专栏
04-22 703
小弟需要编写一个可以远程查看对方机器文件的小程序 利用树型列表的时候遇到困难 编译的时候没有错 但执行不了大概问题是在Receive函数 但小弟不在知道解决 好心人帮忙啊~~~~~~~
【微信小程序】滑动手势处理
waillyer的博客
08-16 2252
import React, { useState } from 'react'; import { View } from '@tarojs/components'; import { useDidShow } from '@tarojs/taro'; const PageTouch = ({ children, handlePreviousPage, handleNextPage }) => { const [touchStart, setTouchStart] = useState([0
微信小程序中怎么展示圣诞树
02-07
在微信小程序中，可以使用图片或者 Canvas 组件来展示圣诞树。 使用图片，可以在项目中预先准备好圣诞树的图片，然后在页面中使用 <image> 标签来展示。 使用 Canvas，可以通过绘制图形来展示圣诞树，这需要一定的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值