zoukankan      html  css  js  c++  java
  • 关于echarts中树图tree点击节点收缩(关闭子节点)功能的实现

    在使用echarts的时候,需要做一个可点击收起子节点的树图,因为echarts中未实现该功能,资源在CSDN中可以下载。

    目的:在点击树图的某个节点以后,若无子节点,则没反应,若有子节点,则收起子节点(不显示),原树图重新按照没有该子节点的情况重新排列。
     
    步骤
    1、找到echarts源码中关于click事件的实现。
    2、实现收缩。
     
    实现原理:
    1:定义一个array存放子节点信息。【样式  [父节点name,子节点]】
    2:循环所有data中的数据,找到当前点击的节点
    (if:1)根据父节点name,判断array中是否存在该节点数据,若存在并且不为空,则将该子节点数据赋值于该节点,然后将array中的该子节点信息赋值为null,跳出所有循环。重新渲染图表
    (if:2)(array中不存在该节点信息的前提下)若该节点存在子节点,则将子节点按照 [父节点 name,子节点] 的样式,将子节点信息存入map,然后删除data中的该节点的子节点。跳出所有循环,重新渲染图表。
     
    难点:
    1:循环所有data数据。不能使用值引用,这样的话在删除(添加)子节点信息的时候,渲染数据的最终data起不到任何作用。(本人是使用原data,一级一级点下来的)
    2:子节点数据的保存及删除。这里定义的array实现的功能类似java里的map,删除json中的数据使用delete。(delete data[0].children;)
    3:重新渲染。setOption之前先clear一下。(否则好像没反应)
     
  • 相关阅读:
    /etc/alternatives
    linux Link
    JVM程序计数器
    面向对象的内存分析
    SpringBoot项目简单实现给邮箱发送验证码
    注解式SQL Select语句判空
    SQL Update时参数判空:传入参数为空时不更新对应字段,不为空时才更新
    MySQL数据库误Update找回数据的方法
    用户-角色-权限系统概述
    将一个数组转换为List
  • 原文地址:https://www.cnblogs.com/s1118/p/7339435.html
Copyright © 2011-2022 走看看