jquery gantt 甘特圖

一、簡介

JQuery.Gantt 是一個(gè)開源的基于 JQuery 庫的用于實(shí)現(xiàn)甘特圖效果的可擴(kuò)展功能的 JS 組件庫。

二、JQuery.Gantt

開源的有2個(gè)，他們都叫 JQuery.Gantt 這兩個(gè)在名字上有細(xì)微的區(qū)別，功能卻是大不一樣的，可以根據(jù)所需功能自行選擇【不想自己下載看的，我在下面有截圖展示】

（1）jQuery Gantt Chart 下載網(wǎng)址：https://github.com/taitems/jQuery.Gantt
（2）jQuery Gantt editor 原版下載網(wǎng)址：https://github.com/robicch/jQueryGantt
文檔說明：https://roberto.twproject.com/2012/08/24/jquery-gantt-editor/

（1）jQuery Gantt Chart展示

（2）jQuery Gantt editor 展示

三、使用

我使用到的是第二個(gè)：jQuery Gantt editor 注意：這里的有些功能結(jié)合網(wǎng)上各位大神的總結(jié)以及教程做了修改，所以跟原版的甘特圖稍有差別

四、功能改寫

注意：也可下載原版對比著看、這里僅展示了部分

1、將彈出層改為中文顯示

解釋：打開頁面開始均為英文，需要在 gantt.html 內(nèi)將 TASK_EDITOR 內(nèi)對應(yīng)的字段改成中文即可，不需要哪些字段刪掉即可

2、table 表頭動(dòng)態(tài)拖動(dòng)可改變列寬、刷新后恢復(fù)初始設(shè)置值 解釋：修改 ganttUtilities.js 文件修改后的代碼：

//table表頭動(dòng)態(tài)拖動(dòng)可改變列寬
  head.find("th.gdfColHeader.gdfResizable:not(.gdfied)").mouseover(function () {
    $(this).addClass("gdfColHeaderOver");

  }).bind("mouseout.gdf", function () {
    $(this).removeClass("gdfColHeaderOver");
    if (!$.gridify.columInResize) {
        $("body").removeClass("gdfHResizing");
    }

  }).bind("mousemove.gdf", function (e) {
    if (!$.gridify.columInResize) {
      var colHeader = $(this);
      var mousePos = e.pageX - colHeader.offset().left;

      if (colHeader.width() - mousePos < options.resizeZoneWidth) {
        $("body").addClass("gdfHResizing");
      } else {
        $("body").removeClass("gdfHResizing");
      }
    }

  }).bind("mousedown.gdf", function (e) {
    var colHeader = $(this);
    var mousePos = e.pageX - colHeader.offset().left;
    if (colHeader.width() - mousePos < options.resizeZoneWidth) {
      $("body").unselectable();
      $.gridify.columInResize = $(this);

      $(document).bind("mousemove.gdf", function (e) {

        //調(diào)整寬度時(shí)導(dǎo)致表頭表體寬度不一致，修改為以下設(shè)置寬度方式
        var newWidth = (e.pageX - $.gridify.columInResize.offset().left)<5?5:(e.pageX - $.gridify.columInResize.offset().left)
        $.gridify.columInResize.width(newWidth);
        $.gridify.columInResize.data("fTh").width(newWidth);

      }).bind("mouseup.gdf", function () {
        $(this).unbind("mousemove.gdf").unbind("mouseup.gdf").clearUnselectable();
        $("body").removeClass("gdfHResizing");
        delete $.gridify.columInResize;
      });
    }

  }).bind("dblclick.gdf", function () {
    var col = $(this);

    if (!col.is(".gdfResizable"))
      return;

    var idx = $("th", col.parents("table")).index(col);
    var columnTd = $("td:nth-child(" + (idx + 1) + ")", table);
    var w = 0;
    columnTd.each(function () {
      var td = $(this);
      var content = td.children("input").length ? td.children("input").val() : td.html();
      var tmp = $("<div/>").addClass("columnWidthTest").html(content).css({position: "absolute"});
      $("body").append(tmp);
      w = Math.max(w, tmp.width() + parseFloat(td.css("padding-left")));
      tmp.remove();
    });

    w = w + 5;
    col.width(w);
    col.data("fTh").width(w);

    storeGridState();
    return false;

  }).addClass("gdfied unselectable").attr("unselectable", "true");


  function storeGridState() {
    if (localStorage) {
      var gridState = {};

      var colSizes = [];
      $(".gdfTable .gdfColHeader").each(function () {
        colSizes.push($(this).outerWidth());
      });

      gridState.colSizes = colSizes;

      localStorage.setObject("TWPGanttGridState", gridState);
    }
  }

  // 刷新頁面恢復(fù)初始樣式
  table.find("td.gdfCell:not(.gdfied)").each(function () {
    var cell = $(this);
    if (cell.is(".gdfEditable")) {
        // var inp = $("<input type='text'>").addClass("gdfCellInput");
        inp.val(cell.text());
        cell.empty().append(inp);
    } else {
        var wrp = $("<div>").addClass("gdfCellWrap");
        wrp.html(cell.html());
        cell.empty().append(wrp);
    }
  }).addClass("gdfied");

  return box;

3、滾動(dòng)頁面-保持兩邊滾動(dòng)一致 解釋：修改 ganttUtilities.js 文件修改后的代碼：

// 頁面滾動(dòng)-滾動(dòng)時(shí)保持兩邊一致
    var stopScroll = false;
    var fs = firstBox.add(secondBox);
    
    fs.scroll(function (e) {
      var el = $(this); //右頁面
      var top = el.scrollTop(); //右邊滾動(dòng)距離頂部的距離

      if (el.is(".splitBox1") && stopScroll != "splitBox2") {
          stopScroll = "splitBox1";
          secondBox.scrollTop(top); //右
      } else if (el.is(".splitBox2") && stopScroll != "splitBox1") {
          stopScroll = "splitBox2";
          firstBox.scrollTop(top); //左
      }
      // 表頭固定
      secondBox.find(".ganttFixHead").css('top', top);
      firstBox.find(".ganttFixHead").css("top" , top);

      where.stopTime("reset").oneTime(100, "reset", function () { stopScroll = ""; })
    });