项目管理工具dhtmlxGantt甘特图入门教程（四）：用HTML作为内部视图及相关设置

这篇文章给大家讲解 dhtmlxGantt用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是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表，可满足项目管理控件应用程序的所有需求，是最完善的甘特图图表库。了解更多DhtmlxGantt相关内容和资讯，欢迎在线咨询或者私信我获取正版试用版及报价。

甘特图控件交流群：764148812    欢迎进群交流讨论

更多正版甘特图软件下载、购买、授权咨询，请点这里！

标签：

来源：慧都