如何为Webix数据表创建自定义标题菜单

How to create a custom header menu for Webix datatable?

本文关键字：自定义 标题 菜单 创建 数据表 Webix      更新时间：2023-09-26

我正在尝试为datatable header中的图标创建一个自定义菜单。主要思想是显示一个特定列的菜单(单击图标)下面是我当前的代码:

http://webix.com/snippet/b5259f40 

{ 
  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()
      }
    }
})

现在，当我点击标题的任何位置时，弹出窗口就会打开。

如何仅为图标添加菜单?TIA

[update]

你需要为你的图标添加一个onClick函数。为了使弹出窗口与图标对齐，您必须根据需要手动调整其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
       });
   }
}

相关文章：