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

 

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

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

 

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

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