众筹项目之后台管理系统-菜单维护(七)
目录
- 1. 树形结构基础知识介绍
-
- 1.1 节点类型
- 1.2 在数据库表中表示树形结构
-
- 1.2.1 创建菜单的数据库表
- 1.2.2 插入数据
- 1.2.3 关联方式
- 1.3 在 Java 类中表示树形结构
-
- 1.3.1 基本方式
- 1.3.2 为了配合 zTree 所需要添加的属性
- 1.4 按钮增删改查的规则
- 2 菜单维护：页面显示树形结构
-
- 2.1 目标
- 2.2 思路
- 2.3 代码：逆向工程
- 2.4 代码：将数据在 Java 代码中组装成树形结构
-
- 2.4.1 service 方法
- 2.4.2 handler 方法
- 2.5 代码：跳转页面
- 2.6 代码：引入 zTree 环境
- 2.7 代码：页面上使用 zTree 初步显示树形结构（假数据）
- 2.8 代码：在页面上使用真实数据显示树形结构
- 2.9 代码：修改默认图标为真实图标
- 2.10代码：实现“点了不跑”
- 2.11代码：显示按钮组
-
- 2.11.1思路和步骤
- 2.11.2myRemoveHoverDom(treeId, treeNode)函数
- 2.11.3myAddHoverDom(treeId, treeNode)函数
- 2.12代码：把生成树形结构的代码封装到函数
- 3. 菜单维护：添加子节点
-
- 3.1 目标
- 3.2 思路
- 3.3 前端代码
-
- 3.3.1 给“+”按钮添加 class 值
- 3.3.2 给“+”按钮绑定单击响应函数
- 3.3.3 给添加子节点的模态框中的保存按钮绑定单击响应函数
- 3.4 后端代码
- 4. 菜单维护：更新节点
-
- 4.1 目标
- 4.2 思路
- 4.3 前端代码
-
- 4.3.1 给“✔”按钮绑定单击响应函数
- 4.3.2 给更新节点的模态框中的更新按钮绑定单击响应函数
- 4.4 后端代码
- 5. 菜单维护：删除节点
-
- 5.1 目标
- 5.2 思路
- 5.3 前端代码
-
- 5.3.1 给“×”按钮绑定单击响应函数
- 5.3.2 给确认模态框中的 OK 按钮绑定单击响应函数
- 5.3.3 后端代码
1. 树形结构基础知识介绍
1.1 节点类型
约定：整个树形结构节点的层次最多只能有 3 级。
1.2 在数据库表中表示树形结构
1.2.1 创建菜单的数据库表
create table t_menu(
id int(11) not null auto_increment,
pid int(11),
name varchar(200),
url varchar(200),
icon varchar(200),
primary key (id)
);
1.2.2 插入数据
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('1',NULL,'系统权限菜单','glyphicon
glyphicon-th-list',NULL);
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('2','1',' 控 制 面 板 ','glyphicon
glyphicon-dashboard','main.htm');
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('3','1','权限管理','glyphicon glyphicon
glyphicon-tasks',NULL);
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('4','3',' 用 户 维 护 ','glyphicon
glyphicon-user','user/index.htm');
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('5','3',' 角 色 维 护 ','glyphicon
glyphicon-king','role/index.htm');
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('6','3',' 菜 单 维 护 ','glyphicon
glyphicon-lock','permission/index.htm');
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('7','1',' 业 务 审 核 ','glyphicon
glyphicon-ok',NULL);
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('8','7',' 实 名 认 证 审 核 ','glyphicon
glyphicon-check','auth_cert/index.htm');
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('9','7',' 广 告 审 核 ','glyphicon
glyphicon-check','auth_adv/index.htm');
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('10','7',' 项 目 审 核 ','glyphicon
glyphicon-check','auth_project/index.htm');
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('11','1',' 业 务 管 理 ','glyphicon
glyphicon-th-large',NULL);
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('12','11',' 资 质 维 护 ','glyphicon
glyphicon-picture','cert/index.htm');
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('13','11',' 分 类 管 理 ','glyphicon
glyphicon-equalizer','certtype/index.htm');
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('14','11',' 流 程 管 理 ','glyphicon
glyphicon-random','process/index.htm');
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('15','11',' 广 告 管 理 ','glyphicon
glyphicon-hdd','advert/index.htm');
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('16','11',' 消 息 模 板 ','glyphicon
glyphicon-comment','message/index.htm');
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('17','11',' 项 目 分 类 ','glyphicon
glyphicon-list','projectType/index.htm');
insert into `t_menu` (`id`, `pid`, `name`, `icon`, `url`) values('18','11',' 项 目 标 签 ','glyphicon
glyphicon-tags','tag/index.htm');
insert into `t_menu` (`id`, `pid`, `name`,