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：