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图层组?真实分类的子分类?策略不能一蹴而就的;

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

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

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

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

  • 相关阅读:
    MQTT TLS 加密传输
    python多进程并发redis
    各种消息队列的特点
    mqtt异步publish方法
    Numpy API Analysis
    Karma install steps for unit test of Angular JS app
    reinstall bower command
    Simulate getter in JavaScript by valueOf and toString method
    How to: Raise and Consume Events
    获取对象的类型信息 (JavaScript)
  • 原文地址:https://www.cnblogs.com/liuyuhangCastle/p/9553439.html
Copyright © 2011-2022 走看看