JQuery. Gantt (gantt Chart) development, jquery. Gantt gantt Chart

JQuery. Gantt (gantt Chart) development, jquery. Gantt gantt Chart

I. Introduction

JQuery. Gantt is an open-source JS Component Library Based on the JQuery library for implementing the Scalable functions of Gantt charts.

 

Ii. Front-end page

2.1 resource reference

First, we need to put the CSS, IMG, JS and other resources in the downloaded source code into our own project, and then reference the required resource files on our own page.

CSS style File

<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> // The task Gantt chart does not use cookies. Therefore, you do not need to reference jquery. cookie. js.

Note:

1. jquery. cookie. js is used for cookie management. If you use cookies in Gantt charts, you must reference this js file on the page. Otherwise, you do not need. The task Gantt chart does not use cookies and therefore does not need to be referenced.

2. The core script file of jquery. fn. gantt. js JQuery. Gantt component. All the gantt chart function code is in this file.

3. to display Chinese characters in a Gantt chart, add the charset feature to the js file reference and set it to GB2312. Otherwise, the Chinese content will be garbled.

 

 

 

2.2 page layout

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

<Div class = "gantt"> </div> // displays the gantt chart. (If the source code is not changed, the class of this div must be "gantt". We recommend that you do not modify the calss name, if modification is made, the css and js should be modified accordingly .)

 

3. component configuration

 

3.1 configure Gantt

 

$ (". 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 Receiving type Source Null Array, String (url) ItemsPerPage 7 Number Months ["January", "February", "March", "CMDL", "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 within the data range OnAddClick Function (dt, rowId) {return ;} Click events within the data range OnRender Function () {return ;} Rendering event UseCookie False To use cookies, you need to reference 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 Receiving type Remarks Name Null String The leftmost column of each row is shown in bold. Desc Null String The second column on 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 ", CustomClass: "ganttRed ", DataObj: foo. bar [I]}] Parameters Receiving type Remarks To String (Date) End Time, in milliseconds From String (Date) Start time, in milliseconds Desc String Hover the mouse over the display text Label String Gantt entries display text CustomClass String Custom class of the Gantt item DataObj All A data object directly applied to Gantt entries

 

3.4 code structure analysis:

 

$. Fn. gantt = function (options): gantt Chart part object

Basic settings

CookieKey: cookie key

Scales: the time range level, for example, ["hours", "days", "weeks", "months"]

Settings: Part settings

Source: Data source

ItemsPerPage: number of data rows per page

Months: name of the month at the column header

Dow: Week name at the column header

StartPos: default start date

Navigate: Bottom navigation. buttons is in the pay-as-you-go mode, and scroll is in the slider mode.

Scale: time range of each Gantt Chart Column

UseCookie: Indicates whether to use cookies. If you use cookies, you need to reference jquery. cookie. js.

MaxScale: maximum time range

MinScale: Minimum Time Range

WaitText: waiting for the prompt text

OnItemClick: click event within the data range

OnAddClick: click event within the data range

OnRender: rendering event

ScrollToToday: sets whether to scroll to today

Selector method (a: element, I: Index, m: Value): $. extend ($. expr [":"], {});

Findday: matches a specified date in milliseconds

Findweek: matches a specified week in milliseconds

Findmonth: matches a specified month in milliseconds

Date prototype

Date. prototype. getWeekId: gets the id feature of the weekid div used to identify week, returns a string in the format of dh-YYYY-WW where ww is the week of the year

Date. prototype. genRepDate: obtains the time range based on the scale value in the component setting attribute, in seconds.

Date. prototype. getDayOfYear: Get the day of the year when the Date is in.

Date. prototype. getWeekOfYear: obtains the week of a Date in a year.

Date. prototype. getDaysInMonth: Get the number of days in the month where the Date is located

Date. prototype. hasWeek: returns true if the Date resides on the boundary of one week.

Date. prototype. getDayForWeek: returns the Date object of the start Date of a week.

Grid Manager (responsible for navigation and rendering): core

ElementFromPoint: gets the element at the highest position of the specified point.

Create: create a chart

Init: initializes the view and calculates the number of rows, number of pages, visible start time, and end time.

Render: render grid

LeftPanel: create a Panel on the left

DataPanel: create a data Panel on the right

RightPanel: create a Panel on the right

Navigation: navigation

CreateProgressBar: create progress bar

MarkNow: Remove "wd" class to add "today" class to current scale mode

FillData: Fill in the chart, parse the data, and fill in the panel

NavigateTo: navigate

NavigatePage: navigate to the specified page

ZoomInOut: Change the space axis level (zoom)

MouseScroll: Move the chart with the mouse

WheelScroll: Move the chart with the scroll wheel of the mouse

SliderScroll: Use the slider to control the chart

ScrollPanel: update the margin of a rolling panel.

Synchronizescroroller: Synchronous scrolling

RepositionLabel: relocates data labels.

WaitToggle: Waiting for switching

Practical functions: tools

GetMaxDate: the maximum possible date returned is under the scale value standard.

GetMinDate: returns the minimum possible date, which is based on the scale value.

ParseDateRange: returns a date object array between from and to. The unit of time is day.

ParseTimeRange: returns a date object array between from and to. The unit of time is hour.

ParseWeeksRange: returns a date object array between from and to. The unit of time is week.

ParseMonthsRange: returns a date object array between from and to. The unit of time is month.

DateDeserialize: deserializes a string to a date

GenId: ID created by date

GetCellSize: obtains the size of the current cell.

GetRightPanelSize: obtains the size of the current right panel.

GetPageHeight: Get the height of the current page

GetProgressBarMargin: Get the margin Size of the current progress bar

Option Extension: this. each (function (){};);