前端开发树形插件带来的烦恼（一）

前端开发树形插件带来的烦恼（一）

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

 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 树形结构B13
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图层组？真实分类的子分类？策略不能一蹴而就的；

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

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

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

以上！?(?≧?≦)人(≧?≦?)?

原文地址：https://www.cnblogs.com/liuyuhangCastle/p/9551788.html