quickInfo 扩展

请阅读关于 quickInfo 扩展的详细信息，参见 Quick Info (Touch Support) 文章。

The quickInfo 对象具有以下 API：

方法

• show (id): void - 显示指定元素的快速信息弹出框
  • id - (number | string) - 任务 ID

gantt.ext.quickInfo.show("1");

• show (x, y): void - 在特定坐标显示快速信息弹出框
  • x - (number | string) - 水平坐标
  • y - (number | string) - 垂直坐标

gantt.ext.quickInfo.show(10,30);

• hide (force): HTMLElement - 隐藏快速信息弹出框。当 gantt.config.quick_info_detached 设置为 false 时，快速信息不会立即消失，而是在短暂动画后消失。提供 true 作为参数将取消动画并立即移除弹出框。
  • force? - (boolean) - 定义是否在没有动画的情况下立即隐藏快速信息弹出框

gantt.config.quick_info_detached = false;
gantt.init("gantt_here");
 
// 在短暂动画后隐藏弹出框
gantt.ext.quickInfo.hide();
 
// 立即隐藏弹出框
gantt.ext.quickInfo.hide(true);

• setContainer (container): void - 设置将显示快速信息的容器。如果未指定自定义容器，QuickInfo 将被放置在找到的节点中的第一个节点：gantt.$task, gantt.$grid, gantt.$root
  • container - (HTMLElement | string) - 容器元素或其 ID

gantt.ext.quickInfo.setContainer(document.body);
gantt.ext.quickInfo.show(1300,100);

• getNode (): HTMLElement | null - 返回快速信息弹出框的 HTMLElement。若快速信息未初始化，则返回 null

const node = gantt.ext.quickInfo.getNode();

显示的快速信息返回的 DOM 元素看起来像：

• setContent (config): void - 将内容放入快速信息中
  • config? - (object) - 可选，快速信息的配置对象，可以包含下列属性:
    • taskId? - (string | number) - 可选，快速信息操作按钮所连接的任务的 ID
    • header? - (object) - 可选，弹出式编辑表单的头部，可能包含:
      • title? - (string) - 可选，弹出式编辑表单的标题
      • date? - (string) - 可选，弹出式编辑表单的日期
    • content? - (string) - 可选，弹出式编辑表单的内容
    • buttons? - (string[]) - 可选，放置在弹出式编辑表单中的按钮

如果未指定 header 也未指定 buttons，快速信息弹出框的相关区域将被隐藏。

以下是 setContent 方法的配置对象可以如何书写：

const quickInfo = gantt.ext.quickInfo;
var task = gantt.getTask(10);
quickInfo.show(task.id);
quickInfo.setContent({
    taskId: task.id,
    header: {
        title: gantt.templates.quick_info_title(task.start_date, task.end_date, task),
        date: gantt.templates.quick_info_date(task.start_date, task.end_date, task)
    },
    content: gantt.templates.quick_info_content(task.start_date, task.end_date, task),
    buttons: gantt.config.quickinfo_buttons
});

或

你也可以创建一个没有 header 和 buttons 的自定义弹出框：

const quickInfo = gantt.ext.quickInfo;
quickInfo.show(100, 100);
quickInfo.setContent({
    content: "my custom html",
    buttons: []
});