javascript - 将甘特图行移动到其他行位置

问题描述

我想将一个形状行从 ganttChart 拖放到具有其他父层次结构节点的其他行位置。

我有一个带有 oData 的树表绑定的 ganttChart 和形状所在的 ganttrowSetting。

我可以更改形状行的模型值，但表格显示相同的数据。

<gnt2:GanttChartWithTable
  id               ="Planificado"
  shapeResize      ="onShapeResize"
  shapeDrop        ="onShapeDrop"
  shapeConnect     ="onShapeConnect"
  shapeContextMenu ="onShapeContextMenu">
  <gnt2:table>
    <TreeTable
      id                     ="treeTablePlanificado"
      selectionMode          ="Single"
      visibleRowCountMode    ="Auto"
      enableBusyIndicator    ="true"
      enableColumnReordering ="true"
      class                  ="sapUiSizeCompact">

      <columns>
        <Column label="Trabajos" minWidth="450px">
          <template>
            <m:Label text="{ID} - {COMENTARIO}"/>
          </template>
       </Column>
      </columns>

      <rowSettingsTemplate>
        <gnt2:GanttRowSettings rowId="{ID}">
          <gnt2:shapes1>                         
            <gnt2:BaseRectangle 
              shapeId     ="{ID}"
              time        ="{FECHA_INI}" 
              endTime     ="{FECHA_FIN}"
              fill        ="#0092D1"
              resizable   ="true"
              draggable   ="true"
              selectable  ="true"
              hoverable   ="true"
              connectable ="true"/>
          </gnt2:shapes1>
        </gnt2:GanttRowSettings>
      </rowSettingsTemplate>
    </TreeTable>
  </gnt2:table>
</gnt2:GanttChartWithTable>

和控制器


// My data binding

treeTableView.bindRows({
  path: "/PlanningSet",
    filters: [
     // My filters      
    ],
    parameters: {
      countMode                : "Inline",
      numberOfExpandedLevels   : 1,
      treeAnnotationProperties : {
        hierarchyNodeFor       : "ID",
        hierarchyLevelFor      : "JERARQUIA",
        hierarchyParentNodeFor : "ID_PADRE",
        hierarchyDrillStateFor : "EXPAND"
      }
    }
});

// And function when drag and drop

onShapeDrop: function(oEvent) {

  var oDraggedShapeDates = oEvent.getParameter("draggedShapeDates"),
      gantt        = this.getView().byId("Planificado"),
      table        = this.getView().byId("treeTablePlanificado"),
      oModel       = this.getView().getModel(),
      sShapeId     = oEvent.getParameter("lastDraggedShapeUid"),
      oShapeInfo   = Utility.parseUid(sShapeId),
      sPath        = oShapeInfo.shapeDataName,
      oNewDateTime = oEvent.getParameter("newDateTime"),
      oOldTimes    = oDraggedShapeDates[sShapeId],
      iTimeDiff    = oNewDateTime.getTime() - oOldTimes.time.getTime(),
      oTargetRow   = oEvent.getParameter("targetRow");
      oTargetShape = oEvent.getParameter("targetShape");

      oModel.setProperty(sPath + "/FECHA_INI", 
             new Date(oOldTimes.time.getTime() + iTimeDiff));
      oModel.setProperty(sPath + "/FECHA_FIN", 
             new Date(oOldTimes.endTime.getTime() + iTimeDiff));

      // Here i modify the parent for set this in other row.
      // And when i use:
      // oModel.getProperty(sPath + "/ID_PADRE") 
      // is changed but i dont know how to show the change on the table

      oModel.setProperty(sPath + "/ID_PADRE", "MTOMECAN");

}

oModel 值已更改，但表格显示同一位置的行。

我想将模型更新到服务器并再次获取数据，但这会浪费时间和资源。

标签： javascriptsapui5

javascript - 将甘特图行移动到其他行位置

问题描述

解决方案

推荐阅读