前端开发树形插件带来的烦恼
Posted liuyuhangcastle
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端开发树形插件带来的烦恼相关的知识,希望对你有一定的参考价值。
前端开发树形插件带来的烦恼(一)
前端开发中,有些项目中会用到树形插件,其数据结构也比较简单,大体如下:
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图层组?真实分类的子分类?策略不能一蹴而就的;
既然已经使用了树结构,而且又要必须使用多选,那么树形结构就必须分开策略,分别创建,复用性就大大降低;
而已经做好的很多树形结构的插件大神们,有考虑以上这些问题,提供出不同复选策略的方案么?
后续会慢慢更新这个问题,有一些尚未全部完成的解决思路,有空就更一下!
以上!?(?≧?≦)人(≧?≦?)?
以上是关于前端开发树形插件带来的烦恼的主要内容,如果未能解决你的问题,请参考以下文章