Wie erstellt man ein benutzerdefiniertes Header-Menü für Webix-Datentabellen?

Question

Ich versuche, ein benutzerdefiniertes Menü für ein Symbol im Datatable-Header zu erstellen. Die Hauptidee ist für die eine bestimmte Spalte dieses Menü anzuzeigen (auf das Symbol klicken) Hier ist meine aktuellen Code:

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

Vorerst das Popup öffnet sich, wenn ich irgendwo in der Kopfzeile klicken.

Wie kann ich ein Menü nur für das Symbol anhängen? TIA

Answer 1

[update]

Sie benötigen eine onClick Funktion für Ihr Symbol hinzuzufügen. Um das Popup-Fenster mit dem Symbol auszurichten, müssen Sie seine x- und y-Offsets entsprechend Ihren Anforderungen manuell anpassen. Bitte überprüfen Sie unter:

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 
     }); 
    } 
} 

Bitte überprüfen Sie die Schnipsel here.