1.作用
实现菜单等具有层级结构的数据在页面以树形结构显示。
2.实现过程
1数据库
因为要想将数据已树形结构显示,必须数据就要有层级关系,本文以中国行政区域数据库为例:
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for administrative_region_of_china
-- ----------------------------
DROP TABLE IF EXISTS `administrative_region_of_china`;
CREATE TABLE `administrative_region_of_china` (
`ARC_id` int(11) NOT NULL AUTO_INCREMENT COMMENT '行政区Id',
`ARC_name` varchar(20) DEFAULT NULL COMMENT '行政区名称',
`ARC_up_id` int(11) DEFAULT NULL COMMENT '上级行政区Id',
`is_last` int(11) DEFAULT NULL COMMENT '是否为最后一级,1表示是,0表示不是',
PRIMARY KEY (`ARC_id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of administrative_region_of_china
-- ----------------------------
INSERT INTO `administrative_region_of_china` VALUES ('1', '中国', '0','0');
INSERT INTO `administrative_region_of_china` VALUES ('2', '北京', '1','0');
INSERT INTO `administrative_region_of_china` VALUES ('3', '甘肃', '1','0');
INSERT INTO `administrative_region_of_china` VALUES ('4', '天水', '3','0');
INSERT INTO `administrative_region_of_china` VALUES ('5', '庆阳', '3','0');
INSERT INTO `administrative_region_of_china` VALUES ('6', '兰州', '3','0');
INSERT INTO `administrative_region_of_china` VALUES ('7', '秦州区', '4','1');
INSERT INTO `administrative_region_of_china` VALUES ('8', '麦积区', '4','1');
INSERT INTO `administrative_region_of_china` VALUES ('9', '朝阳区', '2','1');
INSERT INTO `administrative_region_of_china` VALUES ('10', '海淀区', '2','1');
2.开发框架
本人以SSM框架为开发框架,但是代码符合所有框架平台,附SSM框架搭建步骤:
https://blog.csdn.net/qq_37067955/article/details/83899758
3.sql查询语句
/*
**首先第一查询语句用来查询第一级的数据,本文查询第一级代码如下
*/
select ARC_id,ARC_name,ARC_up_id
from Administrative_Region_of_China
where ARC_up_id = 0;
/*
**第二个查询语句用来查询第二级的数据,本文查询第一级的子项数据,'#{ARC_id}'表示父级Id
*/
select ARC_id,ARC_name,ARC_up_id
from Administrative_Region_of_China
where ARC_up_id = #{ARC_id};
4.service层实现方法
public List<Map<String,Object>> getIntree(){
List<Map<String,Object> allData = new ArrayList<>();
Map<String,Object> data = new HashMap<>();
List<Entity)> data = "此处调用mybatis中的第一个sql语句" //Entity表示当前数据的实体类
Iterator<Entity> itFirst = data. iterator();
while(itFirst .hasNext()){
Map map = itFirst .next(); //此处可以强壮为map
String isLast = entity .isLast;//获取是否最后一级的属性数据
if(isLast == null && isLast == 0){
allData = initTree(map);
}
}}
return allData ;
}
public List<Map<String,Object>> initTree(Entity entity){
List<Map<String,Object>> list = new ArrayList<>();
List<Entity> childData= "此处调用mybatis中的第二个sql语句";
Iterator<Entity> itFirst = childData. iterator();
while(itFirst .hasNext()){
Map map = itFirst .next();
String isLast = entity .isLast;//获取是否最后一级的属性数据eq
if("0".equlas(isLast ))){
entity .put("child",initTree(map));
list.add(map);
}else{
list.add(map);
}
}
return map;
}
5.Controller类方法
调用server层getIntree方法即可
6.前端页面展示
/*
**前端利用Jquery树形控件 $.initTree();
Jquery树形控件 $.initTree()详情介绍:https://www.cnblogs.com/ConfidentLiu/p/7977703.html
*/
function initTree(data){
$('#treeview').treeview({
levels: 3,
expandIcon: "glyphicon glyphicon-circle-arrow-right",
collapseIcon: "glyphicon glyphicon-circle-arrow-down",
showAdd: true,
showDel: true,
showEdit: true,
highlightSelected:false,
data: data
});
}