如何为 Webix 数据表创建自定义 header 菜单？

Question

我正在尝试为数据表 header 中的图标创建自定义菜单。主要思想是为一个特定的列显示此菜单（单击图标时）这是我当前的代码：

{ 
  view:"datatable", 
  columns:[
    { id:"info",    header:"Info", fillspace:1},
    { id:"props",   header:"<i id='settings' class='fa fa-list' style='text-align:center;'></i>",   width:150}    
  ],
  data:[], 
  on:{
    onHeaderClick:function(id, e, node){
      $$("mymenu").show(node);
    }
  }
});

webix.ui({
  view:"popup",      
  body:{    
    view:"menu", data:[],
    on:{
      onMenuItemClick:function(id){
        webix.message(id);
        this.getParentView().hide()
      }
    }
})

现在，当我单击 header 中的任意位置时弹出窗口打开。

如何只为图标附加菜单？ TIA

Answer 1

[更新]

您需要为图标添加 onClick 功能。为了使弹出 window 与图标对齐，您必须根据需要手动调整其 x 和 y 偏移量。请检查以下内容：

onClick:{
  "fa": function(id, e, node){  //"fa" is the classname in your header
        $$("mymenu").show(
       {
          x : 780,            //left offset from the right side
          y : 30              //top offset
       });
   }
}

请检查代码段 here。

如何为 Webix 数据表创建自定义 header 菜单？

How to create a custom header menu for Webix datatable?

html

javascript

datatable

drop-down-menu

webix