dhtmlxGantt用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表,可满足项目管理控件应用程序的所有需求,是完善的甘特图图表库。
这篇文章给大家讲解用HTML作为内部视图和相关设置。
HTML作为内部视图
您还可以使用一些自定义HTML作为甘特布局的内部视图。例如:
例如,您可以创建额外的网格和时间线视图,这些视图将为主甘特图创建一个底部资源面板。 实施这样的步骤 自定义布局是:
gantt.config.layout = { css: "gantt_container", rows: [ { cols: [ {view: "grid",scrollX: "scrollHor", scrollY: "scrollVer"}, { html:"custom content
", css:"custom-content", width:50}, {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"}, { html:"
custom content
", css:"custom-content", width:50}, {view: "scrollbar", id: "scrollVer"} ] }, {view: "scrollbar", scroll: "x", id: "scrollHor"} ] }
所需的视图和设置班时间。
甘特图对象的公共API包含从特定布局视图派生的方法,例如getTaskPosition 、 getTaskNode、getScrollState 。
为了使这些方法按预期工作,布局必须包含默认网格、时间线、滚动条,并且甘特图应该能够找到它们。这是通过为默认视图分配特定的ID来完成的:
gantt.config.layout = { css: "gantt_container", rows: [ { cols: [ {view: "grid", id: "grid", scrollX: "scrollHor", scrollY: "scrollVer"}, {view: "timeline", id: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"}, {view: "scrollbar", id: "scrollVer"} ] }, {view: "scrollbar", id: "scrollHor"} ] };
所需的视图及其ID是:
- 视图:“网格”,id:“网格”
- 视图:“时间线”,id:“时间线”
- 视图:“滚动条”,id:“scrollHor”
- 视图:“滚动条”,id:“scrollVer”
请注意,如果未指定id,甘特图将使用视图名称作为默认视图 id,或自动生成唯一 id。因此,在默认网格和时间线的情况下,可以省略“id”参数:
gantt.config.layout = { css: "gantt_container", rows: [ { cols: [ {view: "grid", scrollX: "scrollHor", scrollY: "scrollVer"}, {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"}, {view: "scrollbar", id: "scrollVer"} ] }, {view: "scrollbar", id: "scrollHor"} ] };
布局可以包含任何额外数量的视图。
视图的配置和模板
网格和时间线视图重用来自全局gantt.config/gantt.templates的模板和配置。但是,可以在布局级别为特定视图覆盖这些设置。 例如:
var secondGridColumns = { columns: [ { name: "status", label: "Status", width: 60, align: "center", template: function (task) { var progress = task.progress || 0; return Math.floor(progress * 100) + ""; } }, { name: "impact", width: 80, label: "Impact", template: function (task) { return (task.duration * 1000).toLocaleString("en-US", { style: 'currency', currency: 'USD' }); } } ] }; gantt.config.layout = { css: "gantt_container", rows: [ { cols: [ {view: "grid", id: "grid", width: 320, scrollY: "scrollVer"}, {resizer: true, width: 1}, {view: "timeline", id: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"}, {resizer: true, width: 1}, {view: "grid", width: 120, bind:"task", scrollY:"scrollVer", config:secondGridColumns}, {view: "scrollbar", scroll: "y", id: "scrollVer"} ] }, {view: "scrollbar", id: "scrollHor", height: 20} ] };
视图可以从父布局继承配置和模板:
var resourceConfig = { scale_height: 30 }; gantt.config.layout = { css: "gantt_container", rows: [ { cols: [ {view: "grid", group:"grids", scrollY: "scrollVer"}, {resizer: true, width: 1}, {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"}, {view: "scrollbar", id: "scrollVer", group:"vertical"} ], gravity:2 }, {resizer: true, width: 1}, { config: resourceConfig, cols: [ {view: "resourceGrid", group:"grids", width: 435, scrollY: "resourceVScroll" }, {resizer: true, width: 1}, {view: "resourceTimeline", scrollX: "scrollHor", scrollY: "resourceVScroll"}, {view: "scrollbar", id: "resourceVScroll", group:"vertical"} ], gravity:1 }, {view: "scrollbar", id: "scrollHor"} ] };
了解更多DhtmlxGantt相关内容和资讯,欢迎私信咨询,或加入我们