当前课程知识点:软件开发实训--动态网站开发 > 10 分类管理实现 > 10.3分类树结构实现 > 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然后再得到名字
现在我们把值给它设上
只要我们点击
那么它的内容就会发生变化
父级的内容
这是设置当前表单的上一级数据
这是操作的
说明
先获取自定义属性的值
然后把对应表单给它改掉
能不能实现我们的效果
来看一下
我们现在把通知放在新闻下面
来点通知
你看着他自己放他自己
这是不现实的
所以我们点击一下
看新闻中心有了
我们现在来点击登录
看通知已经跑到新闻中心的下面去了
编辑显得忒大
有点夺主的感觉
这个可以使用小图片来代替它
这样我们就实现了这样一个操作
但我们点击新建分类的时候
他完全就可以再出现公司介绍
我们来看一下权重
我们可以不输
他是要求必须的
你就输个一或零就可以了
好
公司介绍进来后到了这里
这个时候如果我们想改
他的上级就这样去改就可以了
新建
修改
好
这样我们绑定好了
现在我们来点击一下通知
点击通知
编辑
看一下编辑通知后
他的上一级是新闻中心
没有问题的
好
这是有关
对上一级
它的处理
以及我们对整个内容分类的一个展示方式
通过树形结构把它展示出来
好
有关内容分类我们就讲到这里
下节课我们再见
-1.1课程介绍
--1.1.3随堂测试
-1.2网站需求分析
--1.2.4随堂测试
-1.3网站首页分析
--1.3.3随堂测试
-1.4导航菜单分析
--1.4.3随堂测试
-1.5内容区域分析
--1.5.3随堂测试
-1.6内容副页面分析
-1.7编写需求文档
-2.1后端页面总体分析
--2.1.3随堂测试
-2.2用户管理功能设计
--2.2.3随堂测试
-2.3内容与分类功能分析
--2.3.3随堂测试
-2.4网站配置功能设计
--2.4.4随堂测试
-2.5数据库及表结构分析
-总体设计文档
-3.1前台模板约定
--3.1.3随堂测试
-3.2网站配置接口设计
--3.2.3随堂测试
-3.3菜单接口设计
--3.3.3随堂测试
-3.4内容接口设计
--3.4.3随堂测试
-3.5幻灯片接口设计
--3.5.3随堂测试
-补充设计文档
-4.1用户管理功能设计
--4.1.3随堂测试
-4.2菜单管理功能设计
--4.2.3随堂测试
-4.3内容管理功能设计
--4.3.3随堂测试
-4.4网站配置信息设计
--4.4.3随堂测试
-完成设计文档
-4.6随堂测试
-5.1开发环境搭建
--5.1.2随堂测试
-5.2Web前端环境搭建
-5.3创建用户实体
--5.3.2随堂测试
-5.4用户实体表创建与初始化
--5.4.2随堂测试
-5.5用户数据访问接口实现
--5.5.2随堂测试
-5.6环境搭建问题
-6.1用户服务层接口实现
--6.1.2随堂测试
-6.2用户列表和编辑控制器实现
--6.2.2随堂测试
-6.3用户存储和删除控制器实现
-6.4用户添加、编辑界面实现
-6.5用户管理添加用户调试
-7.1用户查询模板实现
--7.1.2随堂测试
-7.2用户信息编辑的实现
-7.3单个用户删除实现
-7.4多个用户删除实现
-8.1用户列表分页基本实现
-8.2用户列表查询结果分页实现
-8.3通用日期处理
-8.4整型日期处理
--8.4.2随堂测试
-8.5枚举数据的应用
-9.1登录逻辑实现
--9.1.2随堂测试
-9.2登录界面及流程调试
--9.2.2随堂测试
-9.3管理主界面实现
--9.3.2随堂测试
-9.4授权验证拦截器实现
--9.4.2随堂测试
-9.5拦截器调试
-10.1分类接口实现
-10.2分类添加、编辑实现
-10.3分类树结构实现
-10.4分类删除实现
--10.4.2随堂测试
-11.1内容实体定义
-11.2相关接口定义
-11.3服务接口实现
-11.4内容添加、编辑模板实现
-11.5内容添加、编辑控制器实现
-11.6内容检索页面实现
-11.7内容分类树实现
-12.1修改UEditor相关问题
-12.2整合UEditor到内容编辑界面
-12.3UEditor图片对话框应用
-12.4文件上传问题处理
-13.1网站配置相关类实现
-13.2网站配置界面模板实现
-13.3网站配置调试
-14.1网站首页布局实现
-14.2菜单Vue组件实现
--14.2.2随堂测试
-14.3幻灯片Vue组件实现
-14.4滚动Vue组件实现
--14.4.2随堂测试
-14.5滚动接口实现
-14.6滚动接口调试
-14.7幻灯片接口实现
-15.1首页区域实现
-15.2首页内容脚本实现
-15.3首页完善
-15.4Vue组件放入单文件
-15.5详细页面实现
-16.1网站测试介绍
-16.2功能测试
-16.3打包发布
-16.4部署运行
--16.4.2随堂测试