前端需要返回树型数据(一)

2019-03-13  本文已影响0人  旺叔叔

起因:一个正常的管理功能,其中一张代表组织的表示这样的。


组织表.png

注意表中的parent字段,它指向同表上的其他条目的id字段,这张表是一张有父子关系的表。
所以前台要最终展示成一棵树。类似平时我们在idea上看到的java文件目录。


java目录.png

这种情况,如果使用zTree类的前端框架,那么数据中有parent字段的情况下,直接从数据库查出数据即可。
但总有一些情况下,无法使用框架,前端的童鞋可能会要求后台将这张组织表上的数据组成树型结构返回。
如果之前的数据是List<SysOrganization>的话


列表数据.png

现在就变成了List<Map<String, Object>>


树型数据.png

其实后者就是将前者用data和children两个字段包起来了。

总的来说还算是常见操作,于是我们考虑制作一个工具来解决这个问题,避免以后的重复操作。
这里先来看看最后的结果。也就是工具实现后的使用方法展示,附带工具使用前的方法对比。


工具使用前.png 工具使用展示.png

只需一个函数,即可将完成我们的功能,并且有非常好的兼容性和极低的入侵性。

上一篇下一篇

猜你喜欢

热点阅读