Jquery.gantt Development Guide

Description

Recently need to use the Gantt Chart, the following reproduced content from the network.

? Overview

1.jquery.gantt is an open source JS library based on the JQuery library's extensible functionality for Gantt Chart effects.

? Front page

o Resource Reference
First we need to download to the source of CSS, IMG, JS and other resources into our own projects, and then in our own pages to reference the required resource files.
CSS style files:

<link rel="stylesheet" href="css/style.css"/>

JS script file:

<script src="js/jquery-1.7.min.js"></script><script src="js/jquery.fn.gantt.js" charset="GB2312"></script><script src="js/jquery.cookie.js"></script>

Note: If you need to display Chinese in the Gantt Chart, you will need to add the CharSet attribute in the JS file reference and set it to GB2312, otherwise the Chinese content will be displayed as garbled.
Page layout:
Add the following div where you want the Gantt chart to appear.

<div class="gantt"></div>

? component Configuration

Gantt configuration:

$(". Selector").Gantt({        Source:"Ajax/data.json",         Scale:"Weeks",        Minscale:"Weeks",        Maxscale:"Months",        Onitemclick:function(data){                Alert("Item clicked-show some details");},        Onaddclick:function(DT,ROWID){                Alert("Empty space Clicked-add an item!");},        OnRender:function(){                Console.Log("chart rendered");}});

Parameters	Default Value	Receive Type
Source	Null	Array, String (URL)
ItemsPerPage	7	Number
Months	["January", "February", "March", "April", "may", "June", "July", "August", "September", "October", "November", "December" ]	Array
Dow	["S", "M", "T", "W", "T", "F", "s"]	Array
Navigate	"Buttons"	String ("buttons", "scroll")
Scale	"Days"	String
Maxscale	"Months"	String
Minscale	"Hours"	String
Waittext	"Please Wait ..."	String
Onitemclick:	function (data) {return;}	Click events in the data range
Onaddclick	function (dt, rowId) {return;}	Countless click events within a range of data
OnRender	function () {return;}	Rendering events
Usecookie	FALSE	If you need to use cookies, you need to refer to the JS script file: Jquery.cookie.js?
Scrolltotoday	TRUE	Boolean

Source configuration:

source:  [ { name  :           desc  :   "Lorem ipsum dolor sit amet."          values  :  [...] } ]  

Parameters	Default Value	Receive Type
Name	Null	String
Desc	Null	String
Values	Null	Array

Value configuration:

values:  [ { to  :   Span class= "Op",  from  :    desc  :    label  :  Span class= "St", "Example Value"   customclass  :    dataobj  :  foo . bar  I } ]  

parameters	receive type	explanation
to	string (Date)	end time, in milliseconds, in alternate units
from	string (Date)	start time in milliseconds as conversion order Bit
desc	string	mouse hover Stop displaying text
label	string	Gantt item display text
customclass	string	custom class
dataobj	all

. NET Platform for TIME conversion:

public class GanttManager    {        public static readonly DateTime StartTime = TimeZone .CurrentTimeZone.ToLocalTime(new System.DateTime(1970, 1, 1)).Date;         public static List< GanttItem> DataToGanttList()        {            List<GanttItem > ls = new List<GanttItem >();             GanttItem item = new GanttItem();            item.name = "a";            item.desc = "b";            item.values.id = "1";            item.values.label = "c";            item.values.from = ToMillisecondDate( new DateTime (2011, 11, 2));            item.values.to = ToMillisecondDate( new DateTime (2011, 11, 3));             ls.Add(item);            ls.Add(item);             return ls;        }         public static string ToMillisecondDate( DateTime dt)        {            return "/Date(" + ((dt.Date - StartTime.Date).TotalSeconds * 1000).ToString() + ")/";        }    }

? Code Description:

Jquery.cookie.js:
For cookie management, if you need to use cookies in the Gantt Chart, you need to refer to the JS file in the page, otherwise you do not need a reference.
Jquery.fn.gantt.js:
The core script file of the Jquery.gantt component, all Gantt chart function codes are in this file.
Code structure parsing:
$.fn.gantt = function (options): Gantt Chart Part Object
Basic properties:
Keys for Cookiekey:cookie
Scales: The level of the time range
Settings: Part setup set
Source: Data Source
ItemsPerPage: Number of data rows per page of paging
Months: Month name at column header
Dow: Name of the week at the head of the column
Startpos: Default start location date
Navigate: Bottom navigation, buttons for button, scroll for slider type
Scale: The time range for each column of the Gantt chart
Usecookie: Whether to use cookies if you need to reference jquery.cookie.js
Maxscale: Maximum time range
Minscale: Minimum Time range
Waittext: Waiting for prompt text
Onitemclick: A data-scoped click event
Onaddclick: No data in-range click events
OnRender: Rendering Events
Scrolltotoday: Set whether to scroll to today
Custom Selector Method (A: element, I: Index, M: value): $.extend ($.expr[":"], {});
Findday: Matches a specified date in milliseconds for a time unit
Findweek: Matches a specified week in milliseconds for a time unit
Findmonth: Matches a specified month in milliseconds for a time unit
Date Object extension method:
Date.prototype.getWeekId: Gets the id attribute of the div weekid used to identify the week, returns the string in the format dh-yyyy-ww, where WW is the week ordinal of the year
Date.prototype.genRepDate: Gets the time range, in seconds, by the value of the scale in the part settings property
Date.prototype.getDayOfYear: Get date in the first day of the year
Date.prototype.getWeekOfYear: Get date in the week of the year
Date.prototype.getDaysInMonth: Gets the number of days in the month in which the date
Date.prototype.hasWeek: If the date resides on a one-week boundary, return true
Date.prototype.getDayForWeek: Returns the Date object for the start date of the week
Grid Manager (for navigation and rendering): Core
elementFromPoint: Gets the element at the top of the specified point
Create: Creating a chart
Init: Initialize view, count rows, pages, visible start time and end time
Render: Render Grid
Leftpanel: Create left panel
Datapanel: Create right data panel
Rightpanel: Create right head panel
Navigation: Navigation
Createprogressbar: Creating a progress bar
Marknow: Remove "WD" class to add "Today" class to the current scale mode
Filldata: Populate the chart, parse the data, and populate the panel
NavigateTo: Navigate to
Navigatepage: Navigating to the specified page
Zoominout: Change the spatial axis rank (zoom)
Mousescroll: Moving a chart with the mouse
Wheelscroll: Moving a chart with the mouse wheel
Sliderscroll: Control the chart with the slider
Scrollpanel: Update the margin of the rolling panel
Synchronizescroller: Synchronous scrolling
Repositionlabel: Reposition Data labels
Waittoggle: Toggle Wait
Utility class Features: Tools
Getmaxdate: Returns the maximum possible date under the standard of the scale value
Getmindate: Returns the minimum possible date under the standard of the scale value
Parsedaterange: Returns an array of date objects between from and to, with a time unit of days
Parsetimerange: Returns an array of date objects between from and to, with the time Unit hour
Parseweeksrange: Returns an array of date objects from and to, the time unit is week
Parsemonthsrange: Returns an array of date objects in from and to, the time unit is month
Datedeserialize: Deserializing from string to date
GenID: Create ID with date
Getcellsize: Gets the size of the current cell
Getrightpanelsize: Gets the size of the current right panel
Getpageheight: Gets the height of the current page
Getprogressbarmargin: Gets the margin size of the current progress bar
Gantt Chart Component Object Walker (responsible for initialization operation): This.each (function () {};);

Jquery.gantt Development Guide (RPM)