jQuery Gantt Package設定甘特圖表教程

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: "<input data-bind='ActivityTimeBinder:Activity_M().StartTime_M' />"
},

這在我們的大多數樣本中都有說明。例如：

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

甘特圖編輯

VWGrid支援incell和彈出式編輯，incell是預設的編輯模式。以下步驟說明如何在GanttTable中設定編輯。

incell編輯:

步驟1：為列建立一個編輯器模板。

定義一個自定義單元格編輯模板。

<script id="projectGanttNameEditor" type="text/x-jquery-tmpl">
    <div class="rq-grid-expand-indentWidth" style="height: 1px; width: ${data.IndentWidth_M()}px;"></div>
    <div style="width: 12px; display: ${data.IsParent_M() ? "block":"none" }" class="arrowContainer">
        <div onclick="ExpanderOnclick(this,event)" id="arrow" class="${ data.IsExpanded_M() ? " rq-grid-expand-arrow rq-grid-collapse-arrow": "rq-grid-expand-arrow"} rq-Ignore-click"></div>
    </div>
    <div class="rq-grid-expander-text"><input data-bind="value: Activity_M().ActivityName_M "/></div>
</script>

第二步：在欄目定義中指定編輯器。

在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: "<input   data-bind='value:Activity.DataSource.Cost' data-role=\"spinner\"  />",
      template:"<div>${ToDollarString(data)}</div>",
      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 "<input data-bind='value:Activity_M().ActivityName_M'/>";
       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.