dhtmlxMenu、dhtmlxGanttの色々①

WordPressにSyntaxHighlighter Evolvedっていうプラグインを入れました。
自信を持って公開できるようなコードはあまり書けていないですが、見せられそうなコードが書けたときはちょくちょく載せていければと思います。

lightbox表示中に右クリックでdhtmlxMenuのコンテキストメニューが表示されてしまう

dhtmlxGanttのAPIをざっと見た感じ画面上にlightboxが表示されているかどうかを調べるメソッドはなさそうでした。
lightboxを調べたところ表示中はdisplay:blockとなっているのに対して非表示中はdisplay:noneとなっているので以下のような感じで書けました。

var menu = new dhtmlXMenuObject();
menu.renderAsContextMenu();

menu.attachEvent("onBeforeContextMenu", function(zoneId,ev){
  return isLightboxVisible();
});

// lightboxが表示されているかどうかを返す
function isLightboxVisible() {
  return ($("div.gantt_cal_light").css("display") == "block") ? false : true;
}

タスクの進捗率を10%単位にする

タスクの進捗率は0~1の値で制御するのですが、デフォルトのまま画面表示を行うと0.666667…のような表示になってしまいます。
これを%単位かつ、10%ごとに丸める場合は以下のようになります。

// 画面表示される進捗率を%単位にする
gantt.templates.progress_text=function(start, end, task){
  return Math.floor(task.progress*100) + "%";
};

gantt.attachEvent("onAfterTaskDrag", function(id, mode, e){
  // 進捗率を変更したときに数値を0.1単位で丸める
  var task = gantt.getTask(id);
  if (mode == "progress") {
    task.progress = Math.round(task.progress*10)/10;
    gantt.updateTask(id);
  }
  // saveTask(id, task);
});

10%ごとにしたのはlightbox内でも進捗率を変更できるようにするためです。
コメントアウトされているsaveTask(id, task);はサーバーサイドとAjax通信するメソッドです。

タスク新規登録時と更新時でlightboxの表示を切り替える

lightboxが開かれる直前の状態はonBeforeLightboxというイベントで取得できます。
上記メソッドが呼ばれるたびにlightboxをリセットし、あらかじめ用意しておいた2つのlightboxの設定をifで切り替えるようにします。
以下は、新規タスク時はプロジェクト名を選択する項目を表示するけど、更新時はプロジェクト名は変えられないよう非表示にしたいってときに書いたコードです。

// 新規登録のときのlightbox設定
var add_new_task_lightbox = [
  {name: "project_name", height:26, map_to: "project_id", type: "select", options: projects},
  {name: "task_name", height: 22, map_to: "task_name", type: "textarea"},
  {name: "total_manday", height: 22, map_to: "manday", type: "textarea"},
  {name: "progress", height: 26, map_to: "progress", type: "select", options: progresses},
  {name: "time", height: 26, type: "time", map_to: "auto", time_format:["%Y", "%m", "%d" ]}
];
// 更新のときのlightbox設定
var update_task_lightbox = [
  {name: "task_name", height: 22, map_to: "task_name", type: "textarea"},
  {name: "total_manday", height: 22, map_to: "manday", type: "textarea"},
  {name: "progress", height: 26, map_to: "progress", type: "select", options: progresses},
  {name: "time", height: 26, type: "time", map_to: "auto", time_format:["%Y", "%m", "%d" ]}
];

// lightboxが表示される直前のイベント
gantt.attachEvent("onBeforeLightbox", function(id) {
  // lightboxをリセット
  gantt.resetLightbox();
  // 新規登録かどうかで読み込むlightbox定義を変更する
  gantt.config.lightbox.sections = (gantt.getTask(id)["$new"]) ? add_new_task_lightbox : update_task_lightbox;
  return true;
});

dhtmlxMenuとdhtmlxGanttのAPIリファレンスを見ながら処理を考えるのは楽しい( ・`ー・´三 ・`ー・´)

スポンサーリンク
GoogleAdsense



GoogleAdsense



シェアする