zoukankan      html  css  js  c++  java
  • 前端开发树形插件带来的烦恼(一)

    liuyuhang原创,未经允许请勿转载!

    前端开发树形插件带来的烦恼(一)

    前端开发中,有些项目中会用到树形插件,其数据结构也比较简单,大体如下:

     1 TreeRoot
     2 
     3   |-- tree01  id = 01  pid = 0
     4     |-- leaf01  id = 04  pid = 01
     5     |-- leaf02  id = 05  pid = 01
     6     |-- leaf03  id = 06  pid = 01
     7     ......
     8   |-- tree02  id = 02  pid = 0
     9     |-- leaf04  id = 07  pid = 02
    10     ......
    11   |-- tree03  id = 03  pid = 0
    12     |-- leaf05  id = 08  pid = 03
    13     ......
    14   ......

    数据结构说明:

      每一行代表一个数据,该数据由基本信息,id,pid三个部分构成。pid为连接的父节点,额外增加的内容也包括两个部分;

      ①缩进;②节点展开提示,如+ - 符号,> < 符号等,方式众多,不是重点,不继续说了。

    树形结构展示说明:

      树形结构的展示方式主要还是通过遍历和递归,渲染方式可以一次性将数组组装好整体展示,或者一层层展示,也可以考虑一共展示几层(递归次数)

    烦恼不在于此,烦恼是来自于业务的。我举例两个树形结构,暂命名为树形结构A和树形结构B,描述如下: 1 树形结构A 2

     3 科:大猫科          id = 1  pid = 0   
     5   属:虎          id = 2  pid = 1
     7     种:01华南虎     id = 3  pid = 2
     8       02孟加拉虎    id = 4  pid = 2
     9       03东北虎     id = 5  pid = 2
    10 
    11  - - - - -- - - - - - - - - - - -
    12 树形结构B
    13 14 键盘:键盘实例        id = 1  pid = 0 16   按键:Q键        id = 2  pid = 1 18     :W键        id = 3  pid = 1   19     :E键        id = 4  pid = 1

    在以上两个例子中,假设我需要在每个节点(包括根节点)上做个复选框,然后拿到所选择的 id,之后根据已选择的id进行操作。

    这里对于节点是否已选,我见到的操作方式是不同的。如:

    01、选择根节点,子节点跟随显示选择;

    02、选择根节点,子节点不跟随显示选择;

    03、选择所有子节点,根节点跟随显示选择;

    04、选择部分子节点,根节点跟随显示选择;

    05、选择部分子节点,根节点跟随显示半选择;

    05、选择部分子节点,根节点跟随显示不选择;

      首先以01、03、04这种策略对上述两种AB树结构进行分析

        对A进行假设,已选择 01华南虎,此时 属:虎 对应跟随显示选择,

        因为  下只有这么一个 ,所以 科:大猫 必定跟随显示选择;

        至此,对树形结构A选择的 id列表为 [ 1,2 ,3 ];

          此时我可以说:“华南虎是虎,华南虎是大猫”,这两种描述都并没有任何错误。

          ——即符合事实,也符合选择复选策略出现的id列表

        对B进行假设,已选择 Q键 ,此时键盘实例跟随显示选择;

        至此,对树形结构B选择的 id列表为[ 1, 2 ];

          此时我说:“我按Q键,键盘灯点亮的是Q键”,就是错的,因为我按Q键,选择的是Q;

          但是实际选择的是Q和整个键盘,所以点亮的键盘灯也是整个键盘的,

          这个看似很简单的问题源于树形结构中的选择附带的 id 跟随选择策略的不同;

      同理,假设我以01、03、05这种策略对以上两种AB树结构进行分析,一样会得出矛盾的结论,还是上例:

        对A结构描述:可以说:“华南虎是虎,但是虎不是华南虎,范围不同”,这句话是正确的,也符合逻辑

        对B结构描述:可以说:“我按Q键,并没有按全部的键盘按键,键盘灯点亮的只有Q键”

          以上两种说法都符合逻辑,也很正确,但是id如何选,假设去掉父 id,则一条符合半选描述,

          一条符合不选描述的内容,半选到底是选,还是不选?

          拿出来的数据结构是否有必要重新列一张列表出来,很是矛盾,即使是使用01、03、06,依然也会产生困惑。

        这两个例子还算好,还有更恶心的例子:

          假设父节点是空的内容,比如某页PPT,有文字A,文字B,图形C,图形D,其中AB编组为X,CD编组为Y,XY编组为Z;

          这个树形结构的父节点是架空的,内容完全由最基层的子节点来构成的情况下,

          我选择A的时候,必定跟随选择AB形成的组X,必定跟随选择X所属的编组XY构成的Z;

          试问,此时我要对A沿虚线剪下,剪下的是谁,如果不拆分组,剪掉的是Z,

          实际上是ABCD,如果拆分组,那破坏了本身的树形结构;

          若此时我选择Z,然后对Z沿虚线剪下,剪下的应该是整个组,但是这个组之间可能会有间距,有重叠,

          并没有分开树形结构,实际上选择的是Z,但是获取的id并非是ABCD的id,也不是XY的id,只获取了Z的id;

          这种选择了父节点而子节点并未实际跟随选择的情况如何计算呢?

        所以,树形结构的复选策略,实际上是复杂的,在给用户的设计中,是必定要有跟随选择的;

        至少带有全选,反选,子节点全选父节点跟随全选,子节点未全选父节点要么半选,要么不选这种跟随性操作;

        十几种一种策略不够用,上述描述的策略也只是适用于某种情况而已;

        如果树形结构编组的是3D模型组?2D图层组?真实分类的子分类?策略不能一蹴而就的;

        既然已经使用了树结构,而且又要必须使用多选,那么树形结构就必须分开策略,分别创建,复用性就大大降低;

        而已经做好的很多树形结构的插件大神们,有考虑以上这些问题,提供出不同复选策略的方案么?

    后续会慢慢更新这个问题,有一些尚未全部完成的解决思路,有空就更一下!

    以上!✧(∗≧ꇴ≦)人(≧ꈊ≦∗)✧

  • 相关阅读:
    tar打包split分割分解拆分大包文件
    SAP 语言码转换
    SAP audit S41909
    电商收付通系列<1>图片上传API
    Ladon7.4 CVE-2020-0688 Exchange序列化漏洞利用
    [反诈骗]入侵骗子电脑-揭秘冒充企业老板诈骗全过程
    Ladon插件-CVE-2020-1472域控提权漏洞EXP
    Winrm远程命令/端口复用后门/WinrmCmd/密码爆破
    〖教程〗Ladon WinrmExec远程执行命令
    Ladon插件-批量检测网站是否使用Shiro
  • 原文地址:https://www.cnblogs.com/liuyuhangCastle/p/9553439.html
Copyright © 2011-2022 走看看