树形列表的展示

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
    });
}