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

點擊下載jQuery Gantt Package試用版

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

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

創(chuàng)建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：為列創(chuàng)建一個編輯器模板。

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

<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 "字段指定要編輯的屬性。在編輯行時，數(shù)據(jù)上下文中的對象是 "活動視圖 "實例，所以你可以引用活動視圖實例的任何屬性或子屬性。

所以，你可以簡單地像這樣引用活動視圖實例的屬性:字段。"Activity.ActivityName"。

或者你可以引用代表任務的數(shù)據(jù)綁定對象中的任何屬性，像這樣：字段。"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中創(chuàng)建一個自定義編輯器。

默認情況下，甘特圖為您提供了一個可擴展的文本框元素用于編輯名稱列的值。你可以使用下面的自定義編輯器函數(shù)來使用輸入元素代替可擴展的文本框來編輯彈出窗口中的名稱值。

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

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

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

相關產(chǎn)品介紹：

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

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