10.3.1分类树结构实现在线视频

同学你好

欢迎回到软件开发实训课堂

上节课咱们完成了分类的编辑添加

那么我们实际上在表单里还缺了一个上一级的

表单域

那么上一级它实际上是一个树形结构

我们来看看如何去实现它的树形列表

好

我们打开控制器

为了显示这棵树

我们知道我们的实体contentType它有一个

成员parent是指出它的父级

这个负极是可以为空的

而且我们在这个数据访问对象里边也提供了

一个findByParent

通过父节点来查询我们所有的内容

好

现在我们来看

在控制器里找到edit方法

因为是同一个页面

所以我们先要去查询它的父级内容

model

Add这里我们就给它写成parent

然后我们查找通过

服务对象findByparent来查

而他的父节点输入null

查出所有父节点为空的节点

这样我们就可以得到所有的没有父级的标签了

也就是树根

有了这个以后

我们就可以去界面来显示它

这里我们加上一个S表示我们是多个父节点

好

这也是为了区别我们里面的parent成员

加上一个S

那么怎么来实现它呢

我们先来用div把表单隔起来

我们这里不能再让这个表单作为行了

首先我们用div把它分成两个列

第一列col我们让它占上两个单元格

专门放分类数

第二列

我们让它占据

剩下的所有的单元格

来放我们的表单

现在我们把表单只要移入到我们的第二个单元格里就行了

然后我们在这个地方就可以展现我们的数

好

在展现数之前我们加一个按钮

这个按钮的作用实际上就是为了添加我们的

新的分类

只需要简单的把它转向过去就行了

添加新分类

然后在它的下面放入数

导航开始

然后我们在这里为了能够使用递归的方式来

显示内容

因为它的内容不止一层

还有它的子集分类

所以我们需要用递归来做

为了使用递归我们用th:href的block标签

注意th:href只有这一个标签

其他的都是属性

然后定义一个碎片

我们就把它叫做tree

tree他需要一个对象

我们把它叫datas

然后我们就可以定义

ul下面

li的循环

循环datas

循环的过程中

因为datas实际上就是我们的内容类型对象

所以我们可以让它显示我们的名称

我们先把这个名称给它显示出来

a.name

这样我们就有了第一级

我们先来看一下它能不能出现

怎么来调用呢

我们在这加一个

div th

我们用replace来调用它

tree

我们的对象是parents

注意加个S

这样我们就调用它的碎片了

你在这里加一个注释

定义

递归显示数结构的碎片模板碎片

然后在这里使用它

使用模板碎片tree生成内容分类数

现在我们打开浏览器来看一下

输入正确的账号

我们登录进去

然后进入到我们的edittype

这样我们看一下已经出来了

而且我们发现名字是重复的

我们可以改变我们的实体类

让他们名字唯一

来解决这个问题

那么它已经出来了

我们有了第一级的数据

所以我们这个模板是正常的了

但是往往我们不止一级

这个时候怎么办

我们需要用在Li下面去显示我们的子级内容

所以我们的模板碎片还得去修正一下

首先我们说在Li下面我们循环Li但是在Li

的下面我们加上一个a标签

a标签用来显示名字

并且让他超链接到我们需要指向的位置

这里我们先把它放在这

来写第二层

第二层怎么来写

在这里

我们只需要去调用block

replace

我们这里面替换它

直接调用我们的tree这个模块

那么什么时候掉这个模块

当然是它的子级存在的时候

所以我们还需要一个判断

th:if等于判断自己的存在

sublists

如果sublists是为真

我们就接着去循环

这个数据

把A点sublists传给他

这样就可以了

这样他就能够显示多级了

那么我们超连接a链接到哪里

当我们点击超链接的时候

我们可以让他去编辑我们当前内容分类

当我们点击超链接时

我们可以让他重新打开表单来编辑分类

所以我们这里可以链接到edittype页面

并且传递我们的ID给它

这是一个我们可以传递过去

直接点击让它编辑

另外一个

当它被点击时

我们可以把它作为父级

让表单去添加我们的新的内容

或者修改某个存在的节点的父级

我们先这样实现

来看一下

效果

这样我们就有了

然后我们点击它看一下

这都实现了

我们可以把这个新闻中心加一个字

好

保存成功

保存成功后

你发现他的分类数丢了

没有了分类数

新建后又回来了

这是为什么呢

这是因为我们保存成功后直接返回的是界面

而不是我们对应的

已经存在数据的界面

所以我们需要怎么样

redirect下

只要保存成功

我们就返回到给定的界面

我们这里边给它加上一个type.getTid

id始终都会存在

为什么

因为它保存以后

实际上新增也会把ID赋给type对象

所以type对象始终能够拿到他的ID值

这样修改后我们就可以看一下

好

每次过来我们都需要输入还是挺麻烦的

我们一会来加一个链接

好

这会儿就有了

我们来编辑一下

加个一

好

编辑成功

把A给它改成通知

内容

这样我们的分类就有了

现在我们来看一下它的上一级怎么办

现在我们是点击链接的时候让他去编辑他

这样实际上并不合理

我们应该让他点击时把这块给它改掉

让它的上一级等于我们的当前点击的内容

好

我们来看

在我们的界面上

我们把给它改一下

改成什么呢

在我们的名称后面我们加一个编辑

把他为了和超链接区分

我们变成按钮

那么我们这里点击时不再刷新界面

界面就可以让他的href等于这个值就可以了

那么不刷新界面干什么呢

换掉我们的父级

好

class

等于

我们这里给它取一个class

class的名称叫getparent

意思就是我们获取父级

意思就是我们获取父级

但是我们怎么来获取父级的信息

我们需要两个信息

一个是父级的ID

我们这里叫做Pid另外一个是它的名字

那么pid我们这里就直接得到a.tid

就可以了

然后他的名字我们可以在这里写个pn来显示

得到它的名字

这样当我们点击它的时候

我们就可以去填充父级表单了

好

我们来看一下父级表单

在父级表单里面

我们用的是select

这里可以把它改掉

因为我们不需要select这个标签了

我们把它换成input

首先第一个input是一个隐藏的

input

input它主要显示的是parentID

而input是

名字为parentname

然后绑定

parent

name

显示出来

但是class等于form-control

plaintext是纯文本

然后改成readonly就可以了

让他只读就是不能修改

你只能通过左边的数去点击来改变它

好

这里边我们再加上一个field等于星号

parent.tid那么这样的修改我们到底能不能成功

好

来看一下

下面的我们就可以去掉了

打开浏览器

我们来测试一下

这是我们加的编辑按钮

对每一个进行编辑的

好

现在我们把通知内容作为上一级

没有起作用

是因为我们还没有写脚本去让它起作用

起上一个作用

好

我们在下面加上我们的脚本

当我们点击的时候点击谁

我们给它加脚本

首先我们看这块有没有进来

进来了

然后再一个来看一下我们的ID叫做我们通过

class而不是ID来获取的

这是class

对他

执行什么呢

可立刻操作

当它被点击时

我们执行这个函数

首先获得ID等于

attr我们来看一下ID的名称

我们当时给的是什么呢

pid而名字给的是pn注意下边的名字是不一样的

下面的ID是parentID和parentname

有了这层对应关系

我们先得到pid然后再得到名字

现在我们把值给它设上

只要我们点击

那么它的内容就会发生变化

父级的内容

这是设置当前表单的上一级数据

这是操作的

说明

先获取自定义属性的值

然后把对应表单给它改掉

能不能实现我们的效果

来看一下

我们现在把通知放在新闻下面

来点通知

你看着他自己放他自己

这是不现实的

所以我们点击一下

看新闻中心有了

我们现在来点击登录

看通知已经跑到新闻中心的下面去了

编辑显得忒大

有点夺主的感觉

这个可以使用小图片来代替它

这样我们就实现了这样一个操作

但我们点击新建分类的时候

他完全就可以再出现公司介绍

我们来看一下权重

我们可以不输

他是要求必须的

你就输个一或零就可以了

好

公司介绍进来后到了这里

这个时候如果我们想改

他的上级就这样去改就可以了

新建

修改

好

这样我们绑定好了

现在我们来点击一下通知

点击通知

编辑

看一下编辑通知后

他的上一级是新闻中心

没有问题的

好

这是有关

对上一级

它的处理

以及我们对整个内容分类的一个展示方式

通过树形结构把它展示出来

好

有关内容分类我们就讲到这里

下节课我们再见