关于Tree数据重构与拖拽

最新推荐文章于 2023-05-26 20:30:38 发布

三分热柒

最新推荐文章于 2023-05-26 20:30:38 发布

阅读量186

点赞数

文章标签： javascript react.js

本文链接：https://blog.csdn.net/m0_56568741/article/details/127592594

版权

重构

const treeData = [
    {
      title: 'parent1',
      value: '0-0',
      group: 0,
      children: [
        {
          title: 'parent 1-0',
          value: '0-0-1',
          group: 0,
        },
        {
          title: 'parent 1-1',
          value: '0-0-2',
          group: 0,
          children: [
            {
              title: 'leaf2',
              value: '0-0-0-1',
              group: 0,
            },
            {
              title: 'leaf3',
              value: '0-0-0-1',
              group: 0,
              children: [
                {
                  title: 'fengxin',
                  value: '0-0-0-1',
                  group: 0,
                  children: [
                    {
                      title: 'dashuaige',
                      value: '0-0-0-1',
                      group: 0,
                    },
                  ],
                },
              ],
            },
            {
              title: 'leaf4',
              value: '0-0-0-1',
              group: 0,
            },
          ],
        },
      ],
    },
    {
      title: 'parent2',
      value: '0-1',
      group: 1,
      children: [
        {
          title: 'parent 2-0',
          value: '0-0-3',
          group: 1,
        },
        {
          title: 'parent 2-1',
          value: '0-0-3',
          group: 1,
        },
      ],
    },
];

// 1.将用户传进来的数据进行重构
  // 生命周期
  useEffect(()=>{
    // 在页面进入之初调用一次重构函数
    newTreeDate(treeData,1,null);
    dimensional(treeDate)
  },[]);

	// 声明一个重构数据的方法
  const newTreeDate = (
    treeDates:Array<treeType>, //当前数组
    numberOf:number, //层级
    fatherNode:Object | null //父级指向
    ) =>{
    // 拷贝一份传入的数据
    const newArr = [...treeDates];

    // 遍历数据重构
    newArr.forEach((ele:any,index) => {
      // 添加prev指向父节点，没有则指向null
      ele.prev = fatherNode;
      if (defaultOpen) {
        ele.height = 30;
        // console.log(ele,defaultOpen);
     }else{
        // console.log(ele.prev);
        if (ele.prev === null) {
          ele.height = 30;
        }else{
         ele.height = 0;
        }
     }
      // 先默认为##未选中##
      // 如果是父节点
      //  - 未选中 false
      //  - 选中   true
      //  - 半选   selection
      ele.checked = "false";
      ele.level = numberOf; //这是第一层的层数
      if (ele.children) {
        // 有子节点
        // - 1.有展开按钮
        // - 2.可控制子节点的高度
        // - 3.需要有一个属性代表他是否处于展开状态
        // 默认开启状态
        if (defaultOpen) {
          ele.isOff = true;
        }else{
          ele.isOff = false;
        }
        // 递归再次遍历重构
        newTreeDate(ele.children,numberOf + 1,ele)
      }else{
        // 无子节点
        // 记录当前层数
        // 有了这个level就可以标记这一层的div向左移动
        // 标记这个节点为尾节点
        ele.isChildren = true;
        ele.level = numberOf;
      }
    });

  }

拖拽

onDragOver拖拽中 onDrop拖拽结束目标节点 onDragStart拖拽开始目标节点 draggable开启拖拽属性

 <body>
    <button draggable="true" class="droptarget">拖拽</button>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <script>
    var plist = document.querySelector('p');
    // console.log(plist);
    document.addEventListener('dragstart',function(event){
        console.log(event.path[0]);
    })
    document.addEventListener('dragover',function(event){
        event.preventDefault();
    })
        //有dragover了drop才触发
    document.addEventListener("drop", function(event) {
	    event.preventDefault();
        console.log(event.path[0]);
	});
    </script>
  </body>