如何在OData模型而不是JSON中使用甘特图

时间:2019-02-20 10:35:00

标签: sapui5

我正在尝试将甘特图和树表与OData模型一起使用。不幸的是,我只能找到带有JSON模型的示例。我已经在OData模型中建立了层次结构,就像示例https://blogs.sap.com/2015/10/23/treetable-odata-binding/一样-我使用了注释选项。

树表似乎是正确的,但是甘特图中的形状不适合相关行中的开始结束日期。在JSON示例中,“ children”始终位于属性“ shapeDataName”处,但我不知道该使用OData在此处编写什么内容。有人可以帮忙吗?

如果在浏览器中调用它,您可以在这里看到我的OData模型的结构: XML

在我的onInit方法中,我执行了以下操作: onInit

要构建形状,我编写了以下方法: Shape building

我的结果如下所示: result

1 个答案:

答案 0 :(得分:0)

我的onInit方法看起来像这样:

        onInit: function () {

        var oGantt = new sap.gantt.GanttChartContainer({ ganttCharts: [ 
            new sap.gantt.GanttChartWithTable({
                id: "gantt",
                columns: [ new sap.ui.table.Column({ label: "Id", template: "Aufgabenid" }), 
                           new sap.ui.table.Column({ label: "Bezeichnung", template: "Aufgabenbez" }),
                           new sap.ui.table.Column({ label: "Start", template: new sap.m.DatePicker({ value: {path: "Berstartstring"}, valueFormat: "yyyyMMdd" }) }), 
                           new sap.ui.table.Column({ label: "Ende", template: new sap.m.DatePicker({ value: {path: "Berendestring"}, valueFormat: "yyyyMMdd" }) })
                ],
                rowSettingsTemplate: new sap.gantt.simple.GanttRowSettings( {rowId: "{Aufgabenid}" }) 
            })
        ]});

        var oGanttTable = oGantt.getGanttCharts()[0],
        sServiceUrl = "/sap/opu/odata/sap/Z_PPM_Projekt_SRV/",
        oModel = new sap.ui.model.odata.v2.ODataModel(sServiceUrl);

        oGantt.setModel(oModel);
        oGanttTable.bindRows({
            path : "/TimingAnnoSet",
            parameters: {
                operationMode: "Server",
                numberOfExpandedLevels: 0
            }
        });

        oGanttTable.setShapeDataNames(["top"]);
        oGanttTable.setShapes(this.configShape());
        oGantt.placeAt("content");}

这是我的configShape方法的代码:

        configShape: function () {
        var aShapes = [];
        Rectangle.extend("sap.gantt.ppm.Rectangle", {
            getFill: function(oRawData) {
                switch (oRawData.Hierarchie) {
                    case "0":
                        return "black";
                    case "1":
                        return "#FF9999";
                    default:
                        return "#FAC364";
                }
            }
        });

        var oTopShape = new sap.gantt.config.Shape({
            key: "top",
            shapeDataName: "metadata",
            shapeClassName: "sap.gantt.ppm.Rectangle",
            level: 1,
            shapeProperties: {
                time: "{Berstartstring}",
                endTime: "{Berendestring}",
                height: 20,
                isDuration: true,
                enableDnD: true
            }
        });

        aShapes = [oTopShape];
        return aShapes;
    }