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:

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值