时间戳

首页 > 解决方案 > 如何在 webix 甘特图任务上添加点击事件

webix - 如何在 webix 甘特图任务上添加点击事件

问题描述

我第一次使用 webix 甘特图。之前，使用的是dhtmlx gantt（同公司开发），

在 dhtmlx 甘特图上，有 onTaskClick 事件。但是在 webix 甘特图上，这个事件不见了？

有人知道如何添加 onTaskClick 事件吗？

标签： webix

解决方案

Webix Gantt 中没有这样的事件，但这不是问题。

如果要跟踪任务的选择，请在selected属性的反应状态上使用 $observe：

$$("gtt").getState().$observe("selected", id => {
  console.log(id);
});

如果您需要任何点击，您需要做更多的事情，但这是可能的。Gantt 中没有私有代码，UI 的每个部分都定义为一个 ES6 类。因此，要更改 UI 中的某些内容或其行为，您需要重新定义一些类。

甘特图可通过 gantt.views["chart/bars"] 访问。让我们重新定义它并添加一个全局应用事件：

class bars extends gantt.views["chart/bars"] {
   /**
     * Sets action of bar item click
     * @param {(string|number)} id  - ID of the clicked item
   */
   ItemClickHandler(id) {
      super.ItemClickHandler(id);

      // the check is optional, leave it if 
      // you do not want to track
      // clicks on group items in
      // display:"resources"
      if (!this.Bars.getItem(id).$group) {
        this.app.callEvent("onTaskClick", [id]);
      }
   }
}

接下来，应用覆盖：


webix.ui({
    view: "gantt",
    id:"gtt",
    url: "https://docs.webix.com/gantt-backend/",
    override: new Map([
      [gantt.views["chart/bars"], bars]
    ])
});

现在您可以像这样跟踪事件：

gantt1.$app.attachEvent("onTaskClick", id => {
    webix.message("Clicked " + id);
});

如果您希望在甘特图 obj 本身上而不是在其 $app 属性上拥有此事件，则可以“引导”该事件：

webix.protoUI({
    name:"my-gantt",
    $init: function(){
      this.$app.attachEvent("app:task:click", id => {
        this.callEvent("onTaskClick", [id]);
      });
    }
}, webix.ui.gantt);

webix.ui({
    view: "my-gantt",
    id:"gtt",
    url: "https://docs.webix.com/gantt-backend/",
    override: new Map([
      [gantt.views["chart/bars"], bars]
    ])
});

...然后像通常的 Webix 小部件事件一样收听它：

gantt1.attachEvent("onTaskClick", id => {
    webix.message("Clicked " + id);
});

整体示例是https://snippet.webix.com/p0sardik

如果您还想跟踪 Tree 点击，则需要以类似的方式覆盖 gantt.views.tree（重新定义 ItemClickHandler 方法）。

推荐阅读