jquery gantt gant chart

First, the introduction

JQuery.Gantt is an open source JQuery library-based library of JS components for scalable functionality for Gantma effects.

Second, JQuery.Gantt

There are 2 open source, they are called JQuery. Gantt these two in the name of the subtle difference, but the function is very different, according to the required functions can choose their own (do not want to download to see, I have screenshots below to show)

(1) jQuery Gantt Chart Download: https://github.com/taitems/jQuery.Gantt
(2) jQuery Gantt editor Original download URL: https://github.com/robicch/jQueryGantt
Documentation: https://roberto.twproject.com/2012/08/24/jquery-gantt-editor/

(1) jQuery Gantt Chart show

(2) jQuery Gantt editor show

Third, use

I'm using the second one: jQuery Gantt editor Note: Some of the features here have been modified in conjunction with the summary and tutorials of the great gods on the Web, so it's slightly different from the original Gantt diagram

Fourth, the function of rewriting

Note: The original version can also be downloaded for comparison, only the section shown here

1, the pop-up layer to Chinese display

Explanation: Opening the page starts in English, you need to change the corresponding fields within the TASK_EDITOR to Chinese in the gantt .html, and you don't need to delete any fields

2, table head dynamic drag can change the column width, refresh after the recovery of the initial set value Interpretation: modify ganttUtilities.js the modified code of the file:

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

  // 刷新页面恢复初始样式
  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, scroll the page - keep the two sides scrolling consistent explanation: modify the ganttUtilities .js file modified code:

// 页面滚动-滚动时保持两边一致
    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 = ""; })
    });