• 通过递归算法完成树的级联勾选的一般思路


    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/

    1.背景

    在某个项目中,发现当tree上加上checkbox后,初始化该树时会特别慢。现场树上的节点最深有三层,节点个数总和有200多个。经排查,为该tree的参数中开启了级联勾选的参数,导致初始化该树时每初始化一个节点便进行了一次级联判断,如此效率过低导致。

    现在将级联勾选去除后,涉及到如下几个问题需要解决:

    初始化时,需要在前端或者后端完成级联勾选逻辑。

    1. 手动勾选树上节点后,需要进行级联判断。
    2. 点击父节点时,子节点需要全部选中。
    3. 点击子节点时,需要判断父节点以及父组节点是否均需选中。

    2.初始化时的后台级联选择算法

    在树的数据初始化从后端读取时,我们可以首先获取到各子节点的选中状态,全部获取后,对构造出来的树结构进行整体判断是否进行父节点的勾选。其递归算法大致如下:

     

    3.初始化后前端的级联选择算法(只讨论勾选)

    树有两种状态,一种是勾选,一种是去勾选。这里仅仅只考虑勾选的过程。去勾选过程的算法与勾选算法一样。

    当树初始化完成后,勾选树上任意节点时,需要完成如下两个级联判断:

    a.如果勾选的为父节点,其所有子节点均需被勾选上,并且其父节点也要做级联判断。

    b.如果勾选的为普通子节点,其父节点要做级联判断。

    统一起来就是,需要做两个级联算法,分别是向上方向判断,和向下方向判断:

                 

    3.1针对父节点的级联算法

     

    3.2针对子节点的级联判断

     

    4.注意

    递归算法中,递归层级(level)参数是个非常重要的参数,在控制操作逻辑上非常有用。

           

                                       -----欢迎转载,但保留版权,请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/

                                                                                                           如果您觉得本文确实帮助了您,可以微信扫一扫,进行小额的打赏和鼓励,谢谢 ^_^

                                                      

  • 相关阅读:
    vuecli 4使用report分析vendor.js
    vue使用 NProgress 浏览器顶部进度条
    vue项目中 configureWebpack 与 chainWebpack的区别及配置方式
    vue 项目中报错 Error: Avoided redundant navigation to current location: “/xxx”. 的解决方案
    npm中的savedev和save的区别
    vuecli 4 使用scss (配置全局scss变量)
    css如何修改滚动条样式
    vue 项目http://localhost:8080/sockjsnode/info?t=1556418283950 net:: ERR_CONNECTION_REFUSED
    java类的加载时机
    android中屏蔽键盘的2种方法
  • 原文地址:https://www.cnblogs.com/naaoveGIS/p/5873107.html
Copyright © 2020-2023  润新知