Изменение кнопок в лайтбоксе

Вы можете настроить кнопки по умолчанию в лайтбоксе. Например, вы можете скрыть кнопку 'Edit' для пользователей, которые могут только просматривать задачи, или добавить новую кнопку "Print", чтобы позволить пользователям распечатывать описания задач.

По умолчанию лайтбокс включает три кнопки ('Save', 'Cancel', 'Delete'). Эти кнопки настраиваются через параметры конфигурации buttons_left и buttons_right.

gantt.config.buttons_left = ["gantt_save_btn", "gantt_cancel_btn"];
gantt.config.buttons_right = ["gantt_delete_btn"];

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

Обновите массив buttons_left или buttons_right с желаемыми кнопками.

Имейте в виду, что если вы используете Material skin, он переопределяет конфигурацию кнопок. Чтобы избежать этого, включите конфигурацию кнопок внутри обработчика события onGanttReady:

gantt.attachEvent("onGanttReady", function(){
   gantt.config.buttons_left = ["gantt_save_btn","gantt_cancel_btn","complete_button"];   
   gantt.config.buttons_right = ["gantt_delete_btn"];               
});

Определите метку для новой кнопки:

gantt.locale.labels["complete_button"] = "Complete";

Чтобы настроить внешний вид кнопки, например, добавить иконку или другие стили, определите CSS-класс:

.complete_button{
    margin-top: 1px;
    background-image:url("common/v_complete.png");
    width: 20px;
}

Добавьте обработчик событий для управления кликами по кнопке:

gantt.attachEvent("onLightboxButton", function(button_id, node, e){
    if(button_id == "complete_button"){
        var id = gantt.getState().lightbox;
        gantt.getTask(id).progress = 1;
        gantt.updateTask(id);
        gantt.hideLightbox();
    }
});

Изменение меток кнопок

При необходимости метки кнопок можно изменить, используя следующий синтаксис до инициализации Gantt:

gantt.locale.labels.icon_save = "New Label";
gantt.locale.labels.icon_cancel = "New Label";
gantt.locale.labels.icon_delete= "New Label";
 
gantt.init("gantt_here");

Кроме того, вы можете изменить метки после инициализации Gantt следующим образом:

gantt.attachEvent("onGanttReady", function(){
  gantt.locale.labels.gantt_save_btn = "New Label";
  gantt.locale.labels.gantt_cancel_btn = "New Label";
  gantt.locale.labels.gantt_delete_btn = "New Label";
});

Начиная с версии 7.0, метки также могут быть обновлены с использованием объекта i18n:

gantt.i18n.setLocale({
   labels: {
      gantt_save_btn: "New Label",
      gantt_cancel_btn: "New Label",
      gantt_delete_btn: "New Label"
   }
});

К началу