在本主题中，我们将介绍在甘特表部分设置列所需的不同步骤。请注意，甘特表不会自动填充表格中的列，你必须通过列定义来进行设置。
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中：.SamplesGanttControlTableCustomization.htm。
在ASP.NET MVC中：.Views/Home/ProjectGantt/GanttControlTableCustomization.cshtml。
在ASP.NET中：.SamplesProjectGanttGanttControlTableCustomization.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"" />""
来源：慧都
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！