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