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

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相关内容和资讯，欢迎私信咨询，或加入我们