jquery gantt 甘特图

---

一、简介

JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库。

二、JQuery.Gantt

开源的有2个，他们都叫JQuery.Gantt
这两个在名字上有细微的区别，功能却是大不一样的，可以根据所需功能自行选择
【不想自己下载看的，我在下面有截图展示】

（1）jQuery Gantt Chart
下载网址：https://github.com/taitems/jQuery.Gantt

（2）jQuery Gantt editor
原版下载网址：https://github.com/robicch/jQueryGantt
文档说明：https://roberto.twproject.com/2012/08/24/jquery-gantt-editor/

（1）jQuery Gantt Chart展示

（2）jQuery Gantt editor展示

三、使用

我使用到的是第二个：jQuery Gantt editor
注意：这里的有些功能结合网上各位大神的总结以及教程做了修改，所以跟原版的甘特图稍有差别

---

四、功能改写

注意：也可下载原版对比着看
1、将弹出层改为中文显示

解释：打开页面开始均为英文，需要在gantt.html内将TASK_EDITOR内对应的字段改成中文即可，不需要哪些字段删掉即可

2、table表头动态拖动可改变列宽、刷新后恢复初始设置值

解释：修改ganttUtilities.js文件
修改后的代码：

  //table表头动态拖动可改变列宽
  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) {
     

        //调整宽度时导致表头表体宽度不一致，修改为以下设置宽度方式
        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 = $("
").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);
    }
  }

  // 刷新页面恢复初始样式
  table.find("td.gdfCell:not(.gdfied)").each(function () {
     
    var cell = $(this);
    if (cell.is(".gdfEditable")) {
     
        // var inp = $("").addClass("gdfCellInput");
        inp.val(cell.text());
        cell.empty().append(inp);
    } else {
     
        var wrp = $("
").addClass("gdfCellWrap");
        wrp.html(cell.html());
        cell.empty().append(wrp);
    }
  }).addClass("gdfied");

  return box;

3、滚动页面-保持两边滚动一致
解释：修改ganttUtilities.js文件
修改后的代码：

// 页面滚动-滚动时保持两边一致
    var stopScroll = false;
    var fs = firstBox.add(secondBox);
    
    fs.scroll(function (e) {
     
      var el = $(this); //右页面
      var top = el.scrollTop(); //右边滚动距离顶部的距离

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

六、源码

请去资源内自行下载

五、总结

如有不妥的地方请多指教，写的不好的地方多有包含，顺便希望大家可以点个赞~ 谢谢大家