在本主题中,我们将介绍在甘特表部分设置列所需的不同步骤。请注意,甘特表不会自动填充表格中的列,你必须通过列定义来进行设置。
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。
<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>
{ field: "Activity_M().ActivityName_M()", title: "Activity Name", width: 200, editor: $.trim($("#projectGanttNameEditor").html()), template: RadiantQ.Default.Template.ProjectGanttExpandableTextBlockTemplate()},
所以,你可以简单地像这样引用活动视图实例的属性:字段。”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进行处理,非常感谢!