jQuery Gantt Package设置甘特图表教程

  • roffey

    2021-03-16 14:38:02
  • Html/css
  • 翻译

jQuery Gantt Package是一个真正的跨平台，基于HTML5 / jQuery的本地实现，具有2个不同的gantt小部件，可满足您所有基于gantt的可视化需求。还带有ASP.NET WebControl和MVC扩展，可轻松集成到现有应用中。

在本主题中，我们将介绍在甘特表部分设置列所需的不同步骤。请注意，甘特表不会自动填充表格中的列，你必须通过列定义来进行设置。其中，这让你可以灵活地自定义表格中显示的列。

在本主题的底部，您将看到对样本的引用，在那里可以看到这些功能的完整实现。

创建GanttTable列

GanttTable中的每个列都应该通过列定义来定义。这是开始时间列的列定义。 

{
  field: "Activity_M().StartTime_M()",
  title: "StartTime",
  width: 150,
  format: "MM/dd/yy",         
  editor: ""
},

这在我们的大多数样本中都有说明。例如：


在HTML中：.\Samples\GanttControlTableCustomization.htm。
在ASP.NET MVC中：.Views/Home/ProjectGantt/GanttControlTableCustomization.cshtml。
在ASP.NET中：.\Samples\ProjectGantt\GanttControlTableCustomization.aspx。

甘特图编辑

VWGrid支持incell和弹出式编辑，incell是默认的编辑模式。以下步骤说明如何在GanttTable中设置编辑。

incell编辑:

步骤1：为列创建一个编辑器模板。

定义一个自定义单元格编辑模板。


    
             
    
    

第二步：在栏目定义中指定编辑器。

在Column定义中指定上述编辑器。 

{
    field: "Activity_M().ActivityName_M()",
    title: "Activity Name",
    width: 200,
    editor: $.trim($("#projectGanttNameEditor").html()),
    template: RadiantQ.Default.Template.ProjectGanttExpandableTextBlockTemplate()
},

第三步：指定属性，如果可编辑，如果父级可编辑

你必须在列定义中使用 "column.field "字段指定要编辑的属性。在编辑行时，数据上下文中的对象是 "活动视图 "实例，所以你可以引用活动视图实例的任何属性或子属性。

所以，你可以简单地像这样引用活动视图实例的属性:字段。"Activity.ActivityName"。

或者你可以引用代表任务的数据绑定对象中的任何属性，像这样：字段。"Activity.DataSource.Cost "这在.Samples/GanttControlCostTracking.htm中进行了说明) 

$gantt_container = $('#gantt_container');
$gantt_container.GanttControl({
  ..............
  ..............
  GanttTableOptions: {
    columns: [{
      field: "Activity.DataSource.Cost",
      title: "Cost",
      editor: "",
      template:"
${ToDollarString(data)}
",
      width: 100,
      iseditable: true,
      isParentEditable: false
    }],
    startEdit: function (cell, dataItem, column) {
        // Preventing the row  edit when cost is geater than 1000
       if (data.activity.DataSource.Cost >= 1000)
        return false;
      }
    },
  .............
  .............
});

这在这个样本中得到了说明：

在HTML中：.\Samples\GanttControlTableCustomization.htm。
在ASP.NET MVC中：.Views/Home/ProjectGantt/GanttControlTableCustomization.cshtml。
在ASP.NET中：.\Samples\ProjectGantt\GanttControlTableCustomization.aspx。

弹出式编辑：

第1步：在Popup中创建一个自定义编辑器。

默认情况下，甘特图为您提供了一个可扩展的文本框元素用于编辑名称列的值。你可以使用下面的自定义编辑器函数来使用输入元素代替可扩展的文本框来编辑弹出窗口中的名称值。

  function nameEditor($elem, options, data, ispopupEditing) {
       if (ispopupEditing)
          return "";
       else
          return RadiantQ.Default.Template.ProjectGanttExpandableTextboxEditor();
    }

第二步：在栏目定义中指定编辑器

在Column定义中指定上述编辑功能。 

  Columns=[{
        field: "Activity_M().ActivityName_M()",
        title: "Activity Name",
        width: 100,
        editor: nameEditor,
        template: RadiantQ.Default.Template.ProjectGanttExpandableTextBlockTemplate()
    },
     ........
    ],

第3步：在GanttTableOp中指定弹出式编辑模式的属性。

要启用 "弹出式编辑"，你必须将编辑模式设置为 "弹出式"。当用户点击已经选择的行时，弹出窗口将打开。 

$gantt_container.GanttControl({
                GanttTableOptions: {
                    editmode: "popup"
                }
            });

这在这个样本中得到了说明：

In HTML : ..\Samples\TaskEditingDialog.htm.
In ASP.NET MVC : ..\Views\Home\Common\TaskEditingDialog.cshtml.
In ASP.NET : ..\Samples\Common\TaskEditingDialog.aspx.