Concis组件库封装——TreeView树形控件

您好，如果喜欢我的文章，可以关注我的公众号「量子前端」，将不定期关注推送前端好文~

上一篇文章实现了Tree选择器，本文将介绍TreeView树形控件的实现。

其实在笔者进行TreeData的配置项，原本一直在纠结于树结构的递归，进行封装，但仔细想想，其实可以把他改造成一个双向链表，每个节点在children的基础上（子节点），加入prev（父节点），并且当前节点和prev指向同一个内存地址，进行更快速的中间查询和修改，所以树形控件其实是设计了一个链表的数据结构，如图：


在组件内部进行二次封装Tree结构，变成了这样：

对于二次封装，多了prev这一部分，具体的实现如图所示：

TreeView的切换菜单、递归渲染所有层级和Tree选择器的实现是一样的，本文就不再介绍，但是TreeView实际上是多选，而TreeSelect是进行单层选择，并且与其他层节点没有关联；而TreeView在特定情况，如：三个儿子节点都选中，父节点也被选中，多了这一块的交互，具体的业务判断如图：

链表对于这部分处理有了很大的帮助。

对于拖拽，主要用到的是js的drag和drop两个事件，记录拖拽和目标节点，对TreeData进行整体处理，代码如图：

上图，是获取拖拽节点并处理TreeData的流程。

上图是基于拖拽节点，查找到释放节点，并将拖拽节点插入到TreeData的流程。

组件源码如下：

import React, {
   
   
  memo,
  FC,
  Fragment,
  useState,
  useEffect,
  useCallback,
  useMemo,
  Children,
} from 'react';
import {
   
    CaretRightOutlined, CaretDownOutlined, CheckOutlined } from '@ant-design/icons';
import './index.module.less';

type treeViewProps = {
   
   
  /**
   * @description Tree配置参数
   */
  treeData: Array<treeData>;
  /**
   * @description 默认展开
   * @default false
   */
  defaultOpen?: boolean;
  /**
   * @description 禁用
   * @default false
   */
  disabled?: boolean;
  /**
   * @description 可拖拽
   * @default false
   */
  avaDrop?: boolean;
  /**
   * @description 选中回调函数
   */
  checkCallback?: Function;
  /**
   * @description 拖拽回调函数
   */
  dropCallback?: Function;
};
interface treeData {
   
   
  title: string;
  value: string;
  group: number;
  level: number;
  prev: treeData | null;
  height?: string;
  disabled?: boolean;
  checked: boolean;
  children?: Array<treeData>;
}

const TreeView: FC<treeViewProps> = (props) => {
   
   
  const {
   
    treeData, defaultOpen, avaDrop, checkCallback, dropCallback } = props;

  const [stateTreeData, setStateTreeData] = useState<Array<treeData>>(treeData); //树结构
  const [hoverTreeNode, setHoverTreeNode] = useState(''); //当前覆盖的节点

  useEffect(() => {
   
   
    resolveTreeData(stateTreeData as Array<treeData>, 1, null);
  }, []);

  const resolveTreeData = (
    treeData: Array<treeData>,
    nowIndexLevel: number,
    prev: treeData | null,
  ) => {
   
   
    //二次处理treeData
    const newTreeData = [...treeData];
    newTreeData.forEach((treeNode: treeData, index) => {
   
   
      treeNode.level = nowIndexLevel;
      if (defaultOpen) {
   
   
        //默认全展开
        treeNode.height = '30px';
      } else {
   
   
        treeNode.height = treeNode.level == 1 ? '30px' : '0';
      }
      treeNode.checked = false;

      treeNode.prev = prev;
      if (treeNode?.children?.length) {
   
   
        //有子节点
        resolveTreeData(treeNode.children, nowIndexLevel + 1, treeNode);
      } else {
   
   
        //没有子节点，重置level为当前层级，继续寻找
        nowIndexLevel = treeNode.level;
      }
    });
    setStateTreeData(newTreeData); //更新状态
  };
  const toggleTreeMenu = (clickTreeNode: treeData) => {
   
   
    //菜单切换或直接选中终极节点
    if (clickTreeNode?.children?.length) {
   
   
      //菜单切换的情况
      const oldStateTree = [...stateTreeData];
      const editTreeNode = (treeNode: Array<treeData>) => {
   
   
        //所选节点后代收起处理函数
        treeNode.forEach((child) => {
   
   
          //找到节点，对子节点进行处理
          if (child?.children?.length) {
   
   
            child.height = '0';
            editTreeNode(child.children);
          } else {
   
   
            child.height = '0';
          }
        });
      };
      const mapFn = (treeNode: Array<treeData>) => {
   
   
        //深度优先查找节点函数
        treeNode.forEach((t: treeData, i: number) => {
   
   
          if (t.title == clickTreeNode.title && t.value == clickTreeNode.value) {
   
   
            if (t?.children?.length) {
   
   
              //后代节点处理，如果打开，只需打开下一代即可，如果关闭，需要关闭所有后代
              if (t.children[0].height == '0') {
   
   
                //打开
                t.children = t.children.map((child: treeData) => {
   
   
                  return {
   
   
                    ...child,
                    height: child.height == '0' ? '30px' : '0',
                  };
                });
              } else {
   
   
                //关闭
                editTreeNode(t.children); //对后代节点进行处理
              }
            }
          } else if (t?.children?.length) {
   
   
            mapFn(t.children);
          }
        });
      };
      mapFn(oldStateTree);
      setStateTreeData(oldStateTree);
    } else {
   
   
    }
  };
  const checkTreeNode = (clickTreeNode: treeData) => {
   
   
    //选中节点
    if (clickTreeNode.disabled) {
   
   
      return;
    }
    const oldStateTree = [...stateTreeData];
    const editTreeNode = (treeNode: Array<treeData>, status: boolean) => {
   
   
      //所选节点后代处理函数
      treeNode.forEach((child) => {
   
   
        //找到节点，对子节点进行处理
        if (child?.children?.length) {
   
   
          child.checked = status;
          editTreeNode(child.children, status);
        } else {
   
   
          child.checked = status;
        }
      });
    };
    const mapFn = (treeNode: Array<treeData>, prevNode: treeData | null) => {
   
   
      //当前节点/上一代节点/爷爷节点
      //深度优先查找节点函数
      treeNode.forEach((t: treeData, i: number) => {
   
   
        if (t.title == clickTreeNode.title && t.value == clickTreeNode.value) {
   
   
          t.checked = !t.checked;
          //前代链表节点的处理
          if (prevNode) {
   
   
            //如果链表有上层节点
            let nowTreeList = treeNode; //当前层链表所有节点
            while (prevNode !== null) {
   
   
              //链表到起始点，结束，从后往前查找
              if (nowTreeList.every((c) => c.checked)) {
   
   
                //当前层全部选中才改变上层链表
                prevNode.checked = true;
                nowTreeList.map((c) => (c.prev = prevNode));
                nowTreeList = prevNode.children as Array<treeData>;
                prevNode = prevNode.prev as treeData;
              } else {
   
   
                break;
              }
            }
          }
          //后代链表节点的处理
          if (t?.children?.length) {
   
   
            editTreeNode(t.children, t.checked); //对后代节点进行处理
          }
        } else if (t?.children?.length) {
   
   
          //递归继续遍历，直到找到所选节点
          mapFn(t.children, t);
        }
      });
    };
    mapFn(oldStateTree, null);
    setStateTreeData(oldStateTree);
    checkCallback && checkCallback(oldStateTree);
  };
  const checkBoxRender = useCallback(
    (treeData: treeData) => {
   
   
      //根据index对指定数据进行查找
      if (treeData.disabled) {
   
   
        return <div className="disblaed-checkBox"></div>;
      }
      if (!treeData?.children?.length) {
   
   
        //无子节点
        if (treeData.checked) {
   
   
          //选中
          return (
            <div className="checkBox-actived" onClick={
   
   () => checkTreeNode(treeData)}>
              <CheckOutlined />
            </div>
          );
        } else {
   
   
          //未选中
          return <div className="checkBox-noActived" onClick={
   
   () => checkTreeNode(treeData)}></div>;
        }
      } else if (treeData.children && treeData.children.length) {
   
   
        //有子节点
        let treeList: Array<number> = []; //0 -> 子节点未选中，1->  子节点选中
        const mapFn = (treeNode: treeData): any => {
   
   
          for (let i = 0; i < (treeNode.children as Array<treeData>).length; i++) {
   
   
            const child: treeData = (treeNode.children as Array<treeData>)[i];
            treeList.push(child.checked ? 1 : 0);
            if (child.children && child.children.length) {
   
   
              //还有后代
              return mapFn(child);
            } else {
   
   
              //到终点，无子节点
              if (i == (treeNode.children as Array<treeData>).length - 1) {
   
   
                if (treeList.every((c) => c == 0)) {
   
   
                  //全都没选中
                  return (
                    <div
                      className="checkBox-noActived"
                      onClick={
   
   () => checkTreeNode(treeData)}
                    ></div>
                  );
                } else if (treeList.every((c) => c == 1)) {
   
   
                  //全都选中
                  return (
                    <div className="checkBox-actived" onClick={
   
   () => checkTreeNode(treeData)}>
                      <CheckOutlined />
                    </div>
                  );
                } else {
   
   
                  //部分选中
                  return (
                    <div className="checkBox-activedLess" onClick={
   
   () => checkTreeNode(treeData)}>
                      <div className="less-box"></div>
                    </div>
                  );
                }
              }
            }
          }
        };
        return mapFn(treeData);
      }
    },
    [stateTreeData],
  );

  const dragStartTree = (e: any, treeData: treeData) => {
   
   
    //开始拖拽
    if (!avaDrop) return;
    if (stateTreeData.length == 1 && treeData.level == 1) {
   
   
      const oldTree = [...stateTreeData];
      const mapTree = (tree: treeData) => {
   
   
        if (tree.level !== 1) {
   
   
          tree.height = '0';
        }
        if (tree?.children?.length) {
   
   
          tree.children.forEach((c) => {
   
   
            c.height = '0';
            if (c?.children?.length) {
   
   
              c.children.forEach((child) => {
   
   
                mapTree(child);
              });
            }
          });
        }
      };
      mapTree(oldTree[0]);
      setStateTreeData(oldTree);
    } else {
   
   
      e.nativeEvent.dataTransfer.setData('dargTree', treeData.title);
    }
  };
  const dropOver = (e: any, treeNode: treeData) => {
   
   
    //拖拽完成
    if (!avaDrop) return;
    e.nativeEvent.preventDefault();
    if (treeNode.title && treeNode.title !== hoverTreeNode) {
   
   
      setHoverTreeNode(treeNode.title);
      const oldTree = [...stateTreeData];
      const mapFn = (tree: treeData) => {
   
   
        tree?.children?.forEach((c) => {
   
   
          if (c.title == treeNode.title) {
   
   
            c.height = '30px';
            c?.children?.forEach((childNode) => {
   
   
              childNode.height = '30px';
            });
          } else if (c?.children?.length) {
   
   
            mapFn(c);
          }
        });
      };
      oldTree.forEach((c) => {
   
   
        mapFn(c);
      });
      setStateTreeData(oldTree);
    }
  };
  const drop = (e: any, treeNode: treeData) => {
   
   
    //拖拽完成，进行更新
    if (!avaDrop) return;
    e.nativeEvent.preventDefault();
    var dragTreeNode = e.nativeEvent.dataTransfer.getData('dargTree'); //被拖拽的树节点
    if (!dragTreeNode) {
   
   
      return;
    }
    const oldStateTree = [...stateTreeData];
    const findDragNode = (treeList: treeData) => {
   
   
      //寻找拖拽节点在链表中的位置
      if (treeList.title == dragTreeNode && treeNode !== treeList) {
   
   
        dragTreeNode = treeList;
        if (treeList.level == 1) {
   
   
          oldStateTree.splice(treeList.group, 1);
        } else {
   
   
          treeList?.children?.splice(0, 1);
        }
        if (treeList?.children?.length == 0) {
   
   
          delete treeList.children;
        }
        return;
      }
      if (treeList?.children?.length) {
   
   
        treeList.children.forEach((c, i) => {
   
   
          if (c.title == dragTreeNode) {
   
   
            dragTreeNode = c;
            treeList?.children?.splice(i, 1);
            if (treeList?.children?.length == 0) {
   
   
              delete treeList.children;
            }
          }
          if (c.children) {
   
   
            findDragNode(c);
          }
        });
      }
    };
    oldStateTree.forEach((c) => {
   
   
      findDragNode(c);
    });

    const mapFn = (treeList: treeData) => {
   
   
      //寻找放置节点在链表中的位置
      if (treeList.title == treeNode.title) {
   
   
        dragTreeNode.level = treeList.level + 1;
        dragTreeNode.prev = treeList;
        if (treeList.children) {
   
   
          treeList.children.splice(0, 0, dragTreeNode);
        } else {
   
   
          treeList.children = [dragTreeNode];
        }
        return;
      } else if (treeList?.children?.length) {
   
   
        treeList.children.forEach((child: treeData, index) => {
   
   
          if (child.title == treeNode.title) {
   
   
            dragTreeNode.level = child.level;
            dragTreeNode.prev = treeList;
            if (treeList.children) {
   
   
              treeList.children.splice(index + 1, 0, dragTreeNode);
              if (treeList.children[index + 1].children) {
   
   
                treeList.children[index + 1].children = (
                  treeList?.children[index + 1]?.children as Array<treeData>
                ).map((c) => {
   
   
                  return {
   
   
                    ...c,
                    level: (treeList?.children as Array<treeData>)[index + 1].level + 1,
                  };
                });
              }
            } else {
   
   
              treeList.children = [dragTreeNode];
            }
          } else if (child?.children?.length) {
   
   
            mapFn(child);
          }
        });
      }
    };
    if (typeof dragTreeNode == 'object')
      oldStateTree.forEach((c) => {
   
   
        mapFn(c);
      });
    if (dragTreeNode.group == treeNode.group && dragTreeNode.level < treeNode.level) {
   
   
      //如果拖拽的层级比落地的层级小，不做更新
      return;
    }
    setStateTreeData(oldStateTree);
    dropCallback && dropCallback(oldStateTree);
  };

  const render = useCallback(
    (data: Array<treeData> = stateTreeData) => {
   
   
      //动态规划render函数
      return data.map((treeNode: treeData, index) => {
   
   
        return (
          <Fragment key={
   
   index}>
            <div
              className="treeNode"
              style={
   
   {
   
   
                marginLeft: `${
     
     treeNode.level * 10}px`,
                height: `${
     
     treeNode.height}`,
              }}
              draggable={
   
   avaDrop}
              onDragStart={
   
   (e) => dragStartTree(e, treeNode)}
              onDrop={
   
   (e) => drop(e, treeNode)}
              onDragOver={
   
   (e) => dropOver(e, treeNode)}
            >
              {
   
   
                treeNode?.children?.length ? (
                  treeNode.children[0].height == '0' ? (
                    <CaretDownOutlined onClick={
   
   () => toggleTreeMenu(treeNode)} />
                  ) : (
                    <CaretRightOutlined onClick={
   
   () => toggleTreeMenu(treeNode)} />
                  )
                ) : (
                  <div style={
   
   {
   
    width: '14px', height: '14px' }}></div>
                ) //空间占位符
              }
              {
   
   checkBoxRender(treeNode)}
              <span
                className="text"
                onClick={
   
   () => toggleTreeMenu(treeNode)}
                style={
   
   treeNode.disabled ? {
   
    color: '#00000040' } : {
   
    color: '#000000' }}
              >
                {
   
   treeNode.title}
              </span>
            </div>
            {
   
   treeNode?.children?.length && render(treeNode.children)}
          </Fragment>
        );
      });
    },
    [stateTreeData],
  );

  return (
    <Fragment>
      <div className="tree-select-dialog">{
   
   render(stateTreeData)}</div>
    </Fragment>
  );
};

export default memo(TreeView);

组件的文档如下图：



API：

• Concis组件库线上链接：http://react-view-ui.com:92
• github：https://github.com/fengxinhhh/Concis
• npm：https://www.npmjs.com/package/concis

如果在线上文档体验满意的话，欢迎npm下载呀，详细教程在github中~~