后台提供JSON,利用EasyUi实现ComboTree

数据库mysql,框架SSM

先看表设计:


这表是典型的自连接,而且层数不定,也就是说,最后实现的树形可以是一层,也可以是五层,十层,那么实现它的方法就很显然了,递归

在此之前,需要先引入EasyUi相应的包,这里没链接。。。


公司的老项目了,没法传代码,也懒得去整理,所有的包,是EasyUi的,不是EasyUi的都在这里了。。。。。

照着EasyUi的基础文档写就没问题。

EasyUi文档:http://www.jeasyui.net/demo/497.html


上面是EasyUi官方的异步加载树的例子,很简单,写上相应的class,data-options,简单的说就是告诉浏览器以class中给的样式渲染,数据从url里取,方式为GET,url不要写错就行,具体项目根据具体项目的书写请求的方式,只要能跳断点就行。

下面是我的代码:


这篇博客主要的不是讲上面这些,而是后端的JAVA,毕竟我是后端工程师。。。。。

因为后端需要给出相应的符合规范的JSON数据,只有符合规范的JSON,才能被EasyUi正确的解析,而且这个需求又是层级不定的,所以算是递归渲染树的典型。

你需要返回如下的JSON格式:

[{"children":[{"id":4,"text":"a-b","parentId":2}],"id":2,"text":"a-a","parentId":1,"status":"closed"}],简单的说你需要返回一个有id,text,children的JSON,parentId是我自己定义的和EasyUi需求无关,status是用来表示这个节点是否闭合。id表示这个节点的value,text表示这个节点显示出来的 节点名,children表示这个节点的子节点。

下面是我这个项目返回的JSON,说实话我都看得晕。。。。

[{"children":[{"children":[{"children":[{"id":4,"text":"a-b","parentId":2}],"id":2,"text":"a-a","parentId":1,"status":"closed"},{"id":3,"text":"a-a-a","parentId":1}],"id":1,"text":"a","parentId":0,"status":"closed"}],"id":0,"text":"TopNode","parentId":-1,"status":"closed"}]

数据库中的数据:(提一句:EasyUi默认的根节点的id值是-1,当然你不用-1也没什么太大的问题。。。。)

和最终生成的页面:


现在附上本篇博客的核心,递归算法。



最后附上递归三要素:

1、明确递归终止条件

2、给出递归终止时的处理办法

3、提取重复的逻辑,缩小问题规模

如果你明白了递归三要素,在上面的代码就会觉得简单了。

哦,有个问题一直没搞懂,status在这里没起作用,分明测试的时候好好的,有知道的小伙伴可以留言。

再附上一个编辑时常遇到的问题,编辑时怎么把值写入ComboTree呢,让页面加载的时候出现默认选定的节点呢?

用这个api就可以了。


最后后,再夸一下聪明的自己。。。。。。。。。。。。。。。。

猜你喜欢

转载自blog.csdn.net/qq_41767317/article/details/80352676