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

Question

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

在 dhtmlx 甘特图上，有 onTaskClick 事件。但是在 webix 甘特图上，缺少此事件？

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

Answer 1

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

如果您想跟踪任务的选择，请在 selected 属性:

的反应状态上使用 $observe

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

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

甘特图可通过 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);
});

如果您希望在 gantt 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 方法）。

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

How to add a click event on webix gantt task

webix