LayUI树形图后台简单数据封装并提供前台树形图点击样式

效果图：

 后台代码：

        //封装数据  最外层
            List<Map> childrenList =         
            this.contractService.TreeData(projectIds,buildMap,resultList);
            map.put("id", null);
            map.put("title", "安置项目");
            map.put("accordion", true);
            map.put("spread", true);
            map.put("children", childrenList);



  /**
     * 封装数据树形图数据
     *
     * @param projectIds
     * @param buildMap
     * @param resultList
     */
    public List<Map> TreeData(ArrayList<Integer> projectIds, Map buildMap, ArrayList<Map> resultList) {
        if (CollectionUtils.isNotEmpty(buildMap)) {
            Map map = null;
            Map valueMap = null;
            List<String> itemList = null;
            List<Map> childrenList = null;
            for (Integer pId : projectIds) {
                map = null;
                map = Maps.newHashMap();
                map.put("id", null);
                if (pId==1) {
                    map.put("spread", true);
                }
                map.put("title", pId == 1 ? "A区" : "B区");
                map.put("value", pId == 1 ? "A区" : "B区");
                itemList = null;
                itemList = (List<String>) buildMap.get(pId + "");
                childrenList = new ArrayList<>();
                if (!CollectionUtils.isEmpty(itemList)) {
                    for (String buildNum : itemList) {
                        valueMap = null;
                        valueMap = Maps.newHashMap();
                        valueMap.put("id", pId);
                        valueMap.put("title", "<span class='innerChildren" + pId + buildNum + "'>" + buildNum + "号楼</span>");
                        valueMap.put("value", buildNum);
                        childrenList.add(valueMap);
                    }
                }
                map.put("children", childrenList);
                resultList.add(map);
            }
            return resultList;
        }
        return null;
    }

部分前端JS：