如何在Dhtmlx甘特图中添加滚动并根据计数加载数据

Question

我正在使用DHTMLX甘特图。这里我使用的是scroll。我的要求是，第一次加载只有5个数据将显示，一旦我们滚动剩余的5个数据应该加载，同样的事情应该继续。我不能把所有的代码放在这里，我已经在这里添加了详细代码的演示https://stackblitz.com/edit/angular-skvn8x?file=src%2Fapp%2Fcomponents%2Fgantt.component.ts

gantt.component.ts

import {
  Component,
  ElementRef,
  OnInit,
  ViewChild,
  ViewEncapsulation
} from "@angular/core";
import { TaskService } from "../services/task.service";
import { LinkService } from "../services/link.service";
import { Task } from "../models/task";
import { Link } from "../models/link";

import "dhtmlx-gantt";

@Component({
  encapsulation: ViewEncapsulation.None,
  selector: "gantt",
  styleUrls: ["./gantt.component.css"],
  providers: [TaskService, LinkService],
  template: `
    <div #gantt_here class="gantt-chart"></div>
  `
})
export class GanttComponent implements OnInit {
  @ViewChild("gantt_here", { static: true }) ganttContainer: ElementRef;

  constructor(
    private taskService: TaskService,
    private linkService: LinkService
  ) {}

  ngOnInit() {
    gantt.config.xml_date = "%Y-%m-%d %H:%i";

    gantt.init(this.ganttContainer.nativeElement);
    gantt.attachEvent("onGanttScroll", function(left, top) {
      // any custom logic here
    });

    const dp = gantt.createDataProcessor({
      task: {
        update: (data: Task) => this.taskService.update(data),
        create: (data: Task) => this.taskService.insert(data),
        delete: id => this.taskService.remove(id)
      },
      link: {
        update: (data: Link) => this.linkService.update(data),
        create: (data: Link) => this.linkService.insert(data),
        delete: id => this.linkService.remove(id)
      }
    });

    var all_tasks = [];
    gantt.eachTask(function(task) {
      all_tasks.push(task.id);
    });

    gantt.attachEvent("onGanttScroll", function(left, top) {
      var last_visible_task = 0;

      gantt.eachTask(function(task) {
        if (gantt.getTaskRowNode(task.id)) last_visible_task = task.id;
      });
      if (last_visible_task == all_tasks[all_tasks.length - 1])
        gantt.message("Loading new tasks");
    });
    Promise.all([this.taskService.get(), this.linkService.get()]).then(
      ([data, links]) => {
        gantt.parse({ data, links });
      }
    );
  }
}

gantt.component.css

@import "dhtmlx-gantt/codebase/dhtmlxgantt.css";

.gantt-chart {
  position: relative;
  width: 100%;
  height: 600px;
}

Answer 1

DHTMLX Gantt没有内置的方法来做到这一点。您需要使用Gantt API来实现自定义解决方案。下面是一个如何实现它的示例：http://snippet.dhtmlx.com/5/e0e09a8ae