layui treetable插件子节点数据无法渲染，已解决

 

 

如图1所示，前端layui渲染：

var setMilestoneAfterViewTree = function (data) {
            treetable.render({
                treeColIndex: 1,          // 树形图标显示在第几列
                treeSpid: 0,             // 最上级的父级id
                treeIdName: 'id',   // id字段的名称
                treePidName: 'parentId',     // pid字段的名称
                treeDefaultClose: false,   // 是否默认折叠
                treeLinkage: true,        // 父级展开时是否自动展开所有子级
                elem: '#changeMilestoneAfterTable',
                data: data,
                page: false,
                cols: [[
                    {type: 'numbers'},
                    {field: 'name', title: '里程碑', minWidth: 130},
                    // {field: 'milestoneId', title: '里程碑ID', hide: true},
                    {field: 'versionNo', title: '版本号', hide: true},
                    {field: 'level', title: '层级', hide: true},
                    {field: 'sort', title: '序号', hide: true},
                    {
                        field: 'planStartTime', title: '计划开始时间', minWidth: 130, align: 'center', edit: false, templet: function (d) {
                            var val = d.planStartTime || "";
                            if (val) {
                                val = util.toDateString(d.planStartTime, "yyyy-MM-dd");
                            }
                            return val;
                        }
                    },
                    {
                        field: 'planEndTime', title: '计划结束时间', minWidth: 130, align: 'center', edit: false, templet: function (d) {
                            var val = d.planEndTime || "";
                            if (val) {
                                val = util.toDateString(d.planEndTime, "yyyy-MM-dd");
                            }
                            return val;
                        }
                    },
                    {
                        field: 'startTime', title: '实际开始时间', minWidth: 130, align: 'center', edit: false, templet: function (d) {
                            var val = d.startTime || "";
                            if (val) {
                                val = util.toDateString(d.startTime, "yyyy-MM-dd");
                            }
                            return val;
                        }
                    },
                    {
                        field: 'endTime', title: '实际结束时间', minWidth: 130, align: 'center', edit: false, templet: function (d) {
                            var val = d.endTime || "";
                            if (val) {
                                val = util.toDateString(d.endTime, "yyyy-MM-dd");
                            }
                            return val;
                        }
                    },
                    {
                        field: 'status', title: '状态', minWidth: 130, align: 'center', templet: function (d) {
                            var html = "";
                            milestoneStatusValue && $.each(milestoneStatusValue, function (key, val) {
                                if (key == d.status) {
                                    html += val;
                                }
                            });
                            return html;
                        }
                    },
                ]],
                done: function (res, curr, count) {
                    afterDataList = res.data;
                    //新老里程碑循环对比
                    for (var i = 0; i < afterDataList.length; i++) {
                        var afterData = afterDataList[i];
                        var isNewMilestone = true;//判断是否新里程碑
                        for (var j = 0; j < beforeDataList.length; j++) {
                            var beforeData = beforeDataList[j];
                            if (beforeData.milestoneId == afterData.milestoneId) {
                                if (!compareDate(beforeData.planStartTime, afterData.planStartTime)) {
                                    $('#changeMilestoneAfterTable').next().find('.layui-table-main').find('tr[data-index="' + i + '"]').find('td[data-field="planStartTime"]').css("background-color", "yellow");
                                }
                                if (!compareDate(beforeData.planEndTime, afterData.planEndTime)) {
                                    $('#changeMilestoneAfterTable').next().find('.layui-table-main').find('tr[data-index="' + i + '"]').find('td[data-field="planEndTime"]').css("background-color", "yellow");
                                }
                                if (!compareDate(beforeData.startTime, afterData.startTime)) {
                                    $('#changeMilestoneAfterTable').next().find('.layui-table-main').find('tr[data-index="' + i + '"]').find('td[data-field="startTime"]').css("background-color", "yellow");
                                }
                                if (!compareDate(beforeData.endTime, afterData.endTime)) {
                                    $('#changeMilestoneAfterTable').next().find('.layui-table-main').find('tr[data-index="' + i + '"]').find('td[data-field="endTime"]').css("background-color", "yellow");
                                }
                                isNewMilestone = false;
                            }
                        }
                        if (isNewMilestone) {
                            $('#changeMilestoneAfterTable').next().find('.layui-table-main').find('tr[data-index="' + i + '"]').css("background-color", "yellow");
                        }
                    }
                    layer.closeAll('loading');
                }
            });
            console.log(data);
        };

图2：可以看到前端接收了8条数据，但是渲染出来的只有6条，如图3

图3：

疑惑，是什么原因造成这样，无

法渲染子节点，数据库如下，数据库表结构设计如下：

 ========================================================分割线=========================================================================

前端页面treeIdName改为milestoneId，后端把id值set为null，要注意查看treetable的源码

  var afterDataList = [];
        var setMilestoneAfterViewTree = function (data) {
            treetable.render({
                treeColIndex: 1,          // 树形图标显示在第几列
                treeSpid: '0',             // 最上级的父级id
                treeIdName: 'milestoneId',   // id字段的名称
                treePidName: 'parentId',     // pid字段的名称
                treeDefaultClose: false,   // 是否默认折叠
                treeLinkage: true,        // 父级展开时是否自动展开所有子级
                elem: '#changeMilestoneAfterTable',
                data: data,
                page: false,
                cols: [[
                    {type: 'numbers'},
                    {field: 'name', title: '里程碑', minWidth: 130},
                    {field: 'versionNo', title: '版本号', hide: true},
                    {field: 'level', title: '层级', hide: true},
                    {field: 'sort', title: '序号', hide: true},
                    {
                        field: 'planStartTime', title: '计划开始时间', minWidth: 130, align: 'center', edit: false, templet: function (d) {
                            var val = d.planStartTime || "";
                            if (val) {
                                val = util.toDateString(d.planStartTime, "yyyy-MM-dd");
                            }
                            return val;
                        }
                    },
                    {
                        field: 'planEndTime', title: '计划结束时间', minWidth: 130, align: 'center', edit: false, templet: function (d) {
                            var val = d.planEndTime || "";
                            if (val) {
                                val = util.toDateString(d.planEndTime, "yyyy-MM-dd");
                            }
                            return val;
                        }
                    },
                    {
                        field: 'startTime', title: '实际开始时间', minWidth: 130, align: 'center', edit: false, templet: function (d) {
                            var val = d.startTime || "";
                            if (val) {
                                val = util.toDateString(d.startTime, "yyyy-MM-dd");
                            }
                            return val;
                        }
                    },
                    {
                        field: 'endTime', title: '实际结束时间', minWidth: 130, align: 'center', edit: false, templet: function (d) {
                            var val = d.endTime || "";
                            if (val) {
                                val = util.toDateString(d.endTime, "yyyy-MM-dd");
                            }
                            return val;
                        }
                    },
                    {
                        field: 'status', title: '状态', minWidth: 130, align: 'center', templet: function (d) {
                            var html = "";
                            milestoneStatusValue && $.each(milestoneStatusValue, function (key, val) {
                                if (key == d.status) {
                                    html += val;
                                }
                            });
                            return html;
                        }
                    },
                ]],
                done: function (res, curr, count) {
                    afterDataList = res.data;
                    //新老里程碑循环对比
                    for (var i = 0; i < afterDataList.length; i++) {
                        var afterData = afterDataList[i];
                        var isNewMilestone = true;//判断是否新里程碑
                        for (var j = 0; j < beforeDataList.length; j++) {
                            var beforeData = beforeDataList[j];
                            if (beforeData.milestoneId == afterData.milestoneId) {
                                if (!compareDate(beforeData.planStartTime, afterData.planStartTime)) {
                                    $('#changeMilestoneAfterTable').next().find('.layui-table-main').find('tr[data-index="' + i + '"]').find('td[data-field="planStartTime"]').css("background-color", "yellow");
                                }
                                if (!compareDate(beforeData.planEndTime, afterData.planEndTime)) {
                                    $('#changeMilestoneAfterTable').next().find('.layui-table-main').find('tr[data-index="' + i + '"]').find('td[data-field="planEndTime"]').css("background-color", "yellow");
                                }
                                if (!compareDate(beforeData.startTime, afterData.startTime)) {
                                    $('#changeMilestoneAfterTable').next().find('.layui-table-main').find('tr[data-index="' + i + '"]').find('td[data-field="startTime"]').css("background-color", "yellow");
                                }
                                if (!compareDate(beforeData.endTime, afterData.endTime)) {
                                    $('#changeMilestoneAfterTable').next().find('.layui-table-main').find('tr[data-index="' + i + '"]').find('td[data-field="endTime"]').css("background-color", "yellow");
                                }
                                isNewMilestone = false;
                            }
                        }
                        if (isNewMilestone) {
                            $('#changeMilestoneAfterTable').next().find('.layui-table-main').find('tr[data-index="' + i + '"]').css("background-color", "yellow");
                        }
                    }
                    layer.closeAll('loading');
                }
            });
            // console.log(data);
        };

 

/**
     * 获取变更后的里程碑
     *
     * @param id
     * @return
     */
    @RequestMapping(value = "/getMilestoneAfterList", method = RequestMethod.POST)
    @ResponseBody
    public ResultBean<List<ProjectMilestoneEdit>> getMilestoneAfterList(String id) {
        List<ProjectMilestoneEdit> milestoneEditList = projectMilestoneEditService.getMilestoneAfterList(id);
        for (ProjectMilestoneEdit projectMilestoneEdit : milestoneEditList) {
            projectMilestoneEdit.setId(null);
        }
        return new ResultBean<List<ProjectMilestoneEdit>>(milestoneEditList);
    }

treetable源码，看懂就会改了