Jquery.gantt (Gantt Chart) development

First, Introduction

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

Second, the front page

2.1 Resource References

First, you need to download the source code in the 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.8.2.min.js" ></script> <script src= "js/jquery.fn.gantt.js" charset = "GB2312" ></script> <script src= "Js/jquery.cookie.js" ></script>//Task Gantt does not use cookies, so you do not need to refer to jquery.cookie.js.

Note:

1.jquery.cookie.js is used for cookie management, if the use of cookies in the Gantt chart is to refer to the JS file in the page, otherwise it is not required. No cookies are used in the task Gantt so no references are required

2.jquery.fn.gantt.js the core script file of the Jquery.gantt component, all Gantt chart function codes are in this file.

3. 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.

2.2 Page Layout

Add the following div where you want the Gantt chart to appear.

<div class= "Gantt" ></div>//To display the Gantt chart (if you do not change the source code, this div class to "Gantt" is not recommended to modify this CALSS name, if modified, CSS and JS are to make corresponding changes. ）

Third, component Configuration

3.1 Gantt Configuration

$ (". Selector"). Gantt ({ Source: "Ajax/task.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

3.2 Source Configuration

source:[{ Name: "Example", Desc: "Lorem ipsum dolor sit amet.", Values:[...]}] Parameters Default value Receive type Note Name Null String The leftmost column of each row is displayed in bold Desc Null String Second column to the left of each row Values Null Array Gantt Chart Date Range item

3.3 Value Configuration

values:[{ To: "/date (1328832000000)/", From: "/date (1333411200000)/", Desc: "Something", Label: "Example Value", Customclass: "Ganttred", Dataobj:foo.bar[i]}] Parameters Receive type Note To String (Date) End time, in milliseconds as the conversion unit From String (Date) Start time, in milliseconds as the conversion unit Desc String Hover over display text Label String Gantt Item display text Customclass String Custom class for Gantt items Dataobj All A data object that is applied directly to the Gantt item

3.4 Code Structure parsing:

$.fn.gantt = function (options): Gantt Chart Part Object

Basic Setup Items

Keys for Cookiekey:cookie

Scales: The level of time range for example: ["Hours", "Days", "weeks", "months"]

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

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 prototypes

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

Useful 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

Option extension : This.each (function () {};);

Jquery.gantt (Gantt Chart) development