Кастомизация Контекстного Меню

Вы можете настраивать таблицу Spreadsheet по своему усмотрению. Чтобы получить контекстное меню, вы можете использовать следующее:

spreadsheet.$$("context")

Добавление опций

Чтобы добавить параметры в контекстное меню по умолчанию, вы можете использовать событие OnContextMenuConfig:

webix.ui({
  view:"spreadsheet",
  id:"sheet",
  toolbar:"full",
  data:spreadsheet_data,
  on:{
    onContextMenuConfig:function(ev){
      if (ev.area == "data")
        ev.data.push({id:"message", value:"Message"});
    },
    onCommand:function(obj){
      if (obj.id == "message")
        webix.message("Some message");
    }
  }
});

Вы также можете задать кастомные опции контекстного меню:

 on:{
    onContextMenuConfig:function(ev){
      if (ev.area == "column" || ev.area == "row") return false;
      if (ev.area == "data")
        ev.data = [
          { id:"com-1", group:"myContext", value:"Command 1" },
          { id:"com-2", group:"myContext", value:"Command 2" },
          { id:"com-3", group:"myContext", value:"Command 3" }
        ];
    }
  }

Предотвращение отображения контекстного меню

Чтобы предотвратить отображение контекстного меню, подпишитесь на событие onBeforeShow и верните false из функции-обработчика.

menu.attachEvent("onBeforeShow",pos => {
  //удалить контекстное меню по клику на header
  const trg = $$("sheet").$$("cells").locate(pos);                                            
  const header = trg.header || trg.column == "rowId";        
  if(header){
    menu.hide();
    return false;
  }
})

Отключение и скрытие опций

Чтобы отключить некоторые опции контекстного меню по умолчанию, вызовите метод disableItem() и передайте необходимую опцию в качестве параметра:

menu.disableItem("clear")

Чтобы спрятать опцию, вызовите метод hideMenuItem и передайте необходимую опцию в качестве параметра:

menu.hideMenuItem("sort")

menu.attachEvent("onBeforeShow", pos => {                       
  const selected = $$("sheet").getSelectedId(true);
  for(let i = 0; i < selected.length; i++){
    if(selected[i].column == 3){
      //отключить и спрятать опции на конкретном столбце
      menu.disableItem("clear"); 
      menu.disableItem("lock-cell");
      menu.hideMenuItem("sort");
    }
  }
})

Удаление контекстного меню

Чтобы удалить контекстное меню полностью, используйте метод destructor():

menu.destructor()

Создание кастомного контекстного меню

Вы можете задать кастомное контекстное меню для ячеек. Для этого вам нужно удалить меню по умолчанию, а затем создать новое меню и прикрепить его к ячейкам с помощью метода attachTo().

webix.ui({
  view:"spreadsheet", 
  id:"ss",
  data:spreadsheet_data
});
 
const ssheet = $$("ss");
const menu = ssheet.$$("context");
menu.destructor();
 
webix.ui({
  view:"contextmenu",
  data:["Cut", "Copy", "Paste", "Delete"],
  click:function(id, event){
    var cell = this.getContext().id;
    webix.message(id+" on row "+cell.row+" of the column "+cell.column);                            
  }
}).attachTo( ssheet.$$("cells") );

Наверх