jQuery Gantt Package是一個真正的跨平臺，基于HTML5 / jQuery的本地實現，具有2個不同的gantt小部件，可滿足您所有基于gantt的可視化需求。還帶有ASP.NET WebControl和MVC擴展，可輕松集成到現有應用中。

點擊下載jQuery Gantt Package試用版

在本主題中，我們將介紹在甘特表部分設置列所需的不同步驟。請注意，甘特表不會自動填充表格中的列，你必須通過列定義來進行設置。其中，這讓你可以靈活地自定義表格中顯示的列。

在本主題的底部，您將看到對樣本的引用，在那里可以看到這些功能的完整實現。

創建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()
    },
     ........
    ],

要啟用 "彈出式編輯"，你必須將編輯模式設置為 "彈出式"。當用戶點擊已經選擇的行時，彈出窗口將打開。

$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.

相關產品介紹：

VARCHART XGantt：支持ActiveX、.Net等平臺的C#甘特圖控件
AnyGantt：構建復雜且內容豐富的甘特圖的理想工具
phGantt Time Package：對任務和時間的分配管理的甘特圖
dhtmlxGantt：交互式JavaScript / HTML5甘特圖

APS是慧都科技15年行業經驗以及技術沉淀之作，通過連接企業接單、采購、制造、倉儲物流等整個供應鏈流程，幫助提升企業生產效率。>>查看APS詳細信息