wl gantt

wl-gantt

Introduction

Gantt chart is also called horizontal bar chart, bar chart and production plan progress chart. It uses a bar chart to display the internal relationships of projects, schedules, and other time-related system progress over time. Named after the proposer, Mr. Henry Laurence Gantt.
The most famous gantt plug-ins on the market have occupied the world for a long time. They are ancient and powerful. But without exception: they charge a fee or are extremely difficult to use and rely on very old technology, some of which newbies entering the industry today have never even heard of.
[jQueryGantt][plusgantt][dhtmlx] It is undeniable that they are very powerful, both in terms of performance and functionality. But most business needs don't require such a behemoth to meet the needs. On the other hand, the scarce documentation of ancient technologies makes it difficult for developers to start (the paid version does not even provide documentation, and your boss will definitely not provide money to buy the license).
The background of the emergence of wl-gantt is the huge harm I suffered when using the B***Gantt plug-in in the company's Vue project: it is based on extjs (I have never heard of it since I have been in the industry for 17 years), no development documentation is provided, and there is no Chinese language Data and source code are encrypted, and development relies entirely on printing examples to find attributes. wl-gantt is a gantt Gantt chart plug-in based on Vue and elementUi. It was developed by an 896 code slave in the remaining 1 hour.
The functions it provides include: automatically checking whether the source data complies with project task scheduling rules, pre-task rules starting after the end, yearAndmonth|yearAndWeek|ManthAndDay date span switching, and built-in pre-task manager.
Its advantages: very simple and easy to use, and highly configurable, automatically smoothing out unqualified data and giving prompts, and no exceptions will occur for no reason.
It is growing up gradually, and in the next stage, it will learn:
1. YearAndMonth, monthAndDay, yearAndWeek time span configuration [completed, the starting and ending positions of the month and week grids need to be refined]
2. Built-in pre-task selector [Completed]
3. Integrate tree table all-select linkage function [Completed]
4. Add and remove task callbacks [Completed]
4. Task connection line
5. Customized floating prompts for tasks
6. And all the requirements you think you need to use

Online demo - GitHub

Comparison between wl-gantt and the widely used gangster plug-ins on the market

wl-gantt has a simple and refreshing appearance, is very easy to use, and is highly configurable.

jquery Gantt is bulky, old and ugly but the documentation is clear

js gantt I don’t want to say more

dhtmlxGantt is powerful and comprehensive; however, it is difficult to use and is not suitable for modern frameworks and UI libraries. It is difficult to apply it perfectly in projects.

frappe-gantt has few functions

bryntum is the only one that is more beautiful, but has poor configurability and cannot be combined with components; it reports errors and crashes without verifying the correctness of the source data; the rules are rigid and do not conform to project usage; the annual fee is 950$; it is powerful but the documentation only provides a brief introduction and detailed usage. Can only be printed to the console

Update instructions

2020-04-03 Lazy loading 2020-02-20 Updated gantt, see version description 1.0.1 for details 2019-12-14 Updated gantt, added a built-in front-end task column, supported multi-selection front-end and single-selection front-end, and automatically Verify the legality of source data pre-tasks. 2019-12-3 Update gantt. 1. The table supports most of Attributes and Events of el-table. See the detailed list below; 2. The name column adds support for nameFormatter formatted content function; 3. The date column is changed to a click-to-display edit input box.
2019-12-2 Updated gantt.1 date to yearAndMonth、monthAndDay、yearAndWeek types, see版本记录1 for details; 2 fixed the problem of no callback in some time changes.

Already supports el-table parameters and event list

    :fit="fit"
    :size="size"
    :border="border"
    :data="selfData"
    :stripe="stripe"
    :height="height"
    :row-key="rowKey"
    :row-style="rowStyle"
    :class="dateTypeClass"
    :cell-style="cellStyle"
    :max-height="maxHeight"
    :tree-props="selfProps"
    :current-row-key="rowKey"
    :row-class-name="rowClassName"
    :cell-class-name="cellClassName"
    :expand-row-keys="expandRowKeys"
    :header-row-style="headerRowStyle"
    :header-cell-style="headerCellStyle"
    :default-expand-all="defaultExpandAll"
    :header-row-class-name="headerRowClassName"
    :highlight-current-row="highlightCurrentRow"
    :header-cell-class-name="headerCellClassName"
    @header-contextmenu="handleHeaderContextMenu"
    @selection-change="handleSelectionChange"
    @row-contextmenu="handleRowContextMenu"
    @current-change="handleCurrentChange"
    @cell-mouse-enter="handleMouseEnter"
    @cell-mouse-leave="handleMouseLeave"
    @expand-change="handleExpandChange"
    @filter-change="handleFilterChange"
    @cell-dblclick="handleCellDbClick"
    @header-click="handleHeaderClick"
    @row-dblclick="handleRowDbClick"
    @sort-change="handleSortChange"
    @cell-click="handleCellClick"
    @select-all="handleSelectAll"
    @row-click="handleRowClick"
    @select="handleSelect"

Get started quickly

npm i wl-gantt --save

or

npm i wl-gantt -S

import wlGantt from 'wl-gantt'

import "wl-gantt/lib/wl-gantt.css"

Vue.use(wlGantt)

document

Attributes parameters

serial number	parameter	illustrate	type	Optional value	default value	Notice
1	data	data	Array	-	[]	-
2	dateType	gantt chart area date header type	String	monthAndDay, yearAndMonth, yearAndDay	yearAndMonth	-
3	treeProps	Tree table configuration items	Object	-	-	See props below
4	startDate	Project start time	String、Object	Required	-	Note: The task timeline is not required to be within the project start time, and when the task time exceeds the project time, the project time will be updated
5	endDate	Project end time	String、Object	Required	-	Note: The task timeline is not required to be within the project start time, and when the task time exceeds the project time, the project time will be updated
6	checkSource	Whether to check that the source data complies with the rules	Boolean	-	-	Check the source data to automatically modify the time that does not meet the specifications to the expected value that meets the rules.
7	treatIdAsIdentityId	Whether to use id as the auto-increment id	Boolean	-	false	If so, please ensure that the ID is a short number rather than a longer string or guid.
8	autoGanttDateType	Automatically adjust the gantt time span type. For specific rules, see版本记录1	Boolean	-	true	-
9	nameFormatter	Name column format content function	Function	-	-	Function(row, column, cellValue, index)
10	OtherTable Attributes	Document address	-	-	-	-
11	usePreColumn	Whether to use the built-in front task bar	Boolean	-	false	-
12	preMultiple	Can multiple selections be made for pre-requisite tasks?	Boolean	-	true	If multi-selection is enabled, the pre field must be Array, otherwise it can be NumberString
13	preFormatter	Prefix content column formatting function	Function	-	-	If not passed, it will be spliced ​​according to prop name字段+，
14	emptyCellText	Null value cell placeholder	String	-	'-'	-
15	useCheckColumn	Whether to use the built-in checkbox column	Boolean	-	false	-
16	useIndexColumn	Whether to use the built-in serial number column	Boolean	-	false	-
17	edit	Is it editable?	Boolean	-	true	-
18	parentChild	When using checkboxes, whether the parent-child relationship is	Boolean	-	true	The id and children fields of props must be configured
19	ganttOnly	Whether to display only graphics	Boolean	-	false	-
20	lazy	Same as el-table	Boolean	-	false	-
twenty one	load	Same as el-table	Function	-	-	-
twenty two	contextMenuOptions	Right-click the floating window configuration item. If it exists, click gantt to right-click to display the configured floating window information.	Array	-	-	The object properties in the array include: * @param {String} label display name * @param {String} prop bound field * @param {String} icon optional font icon class
twenty three	useRealTime	Whether to use the actual start time and actual end time. If enabled, a brown-red bar of the actual time will be displayed outside the blue bar of the planned time.	Boolean	-	false	-
twenty four	useCard	Whether to use the table hover window	Boolean	-	false	-

props configuration items

serial number	parameter	illustrate	default value
1	children	Children field, a subset of data, represented as a tree table	children
2	name	The field used to display the name	name
3	ID	The id of each piece of data must be unique	ID
4	pid	The parent node id field of each piece of data	pid
5	startDate	The start time field of each piece of data	startDate
6	endDate	The end time field of each piece of data	endDate
7	identityId	Data auto-increment id	identityId
8	parents	Auto-increment parent id tree, comma separated	parents
9	pre	Predecessor task field, the field value should be the id of the predecessor task	pre
10	hasChildren	Specify which rows contain child nodes	hasChildren
11	realStartDate	actual start time field	realEndDate
12	realEndDate	actual end time field	realEndDate

Events

serial number	event name	illustrate	callback parameters
1	timeChange	Triggered when task time changes	function(row) is the current row data in turn
2	Other Table Events	Document address	-
3	preChange	Predecessor task modification event	function(row) is the current row data in turn
4	nameChange	name modification event	function(row) is the current row data in turn
5	taskAdd	Add task event	function(row) is the current row data in turn
6	taskRemove	Delete task event	function(row) is the current row data in turn

Methods

serial number	method name	illustrate	callback parameters
1	loadTree	Manually call tree table lazy loading	function(row) is the row information to be expanded in turn
2	loadTreeAdd	Update the child nodes of the tree table after lazy loading	function(id, list) is the node id to be updated and the child node list to be added. Note that this is a merged list and the original child node data.
3	loadTreeRemove	Remove child nodes that lazily load data	function(id, list) is the node id to be updated and the rowKey of the subbyte to be deleted.

slot

serial number	name	illustrate
1	prv	Used to insert the column before the name in the list. If it does not work, you need to add fixed
2	-	Column inserted between default column and Gantt chart

version record

1.0.6 Fixed the error that the gantt graph was not dynamically planned when the task end date was changed beyond the project time range; it was also found that the useCard experience was not good

1.0.5 Add list row hover window

Version 1.0.3, fixes the time span display error of more than one year; adds a right-click floating window function

Version 1.0.2, adds lazy and load parameters, supports lazy loading, and provides methods for lazy loading: Methods: 1, 2, 3; adds ganttOnly parameter to support only displaying graphics

Version 1.0.1 adds a built-in check box column and a serial number column; adds whether the parameter can be edited; changes the built-in front task column configuration parameter value to false; adds the parent-child linkage attribute of the check box; adds editable logic for the name column; adds , remove task events;

Version 1.0.0 adds a built-in pre-task column, supports multi-selection pre-position and single-selection pre-position, and automatically verifies the legality of the source data pre-task.

Version 0.1.6 updates gantt. 1. The table supports most of Attributes and Events of el-table; 2. The name column adds support for nameFormatter formatted content function; 3. The date column is changed to a click-to-display edit input box. Note that the rowKey parameter must be passed in the tree table, and the default is id .

Version 0.1.5 updates gantt date to support yearAndMonth、monthAndDay、yearAndWeek types, and automatically adjust. The rules are: if it is more than 12 months, it will automatically adjust to yearAndMonth , if it is between 3 months and 12 months, it will automatically adjust to yearAndWeek , 2 Month and less are automatically adjusted to monthAndDay . The new parameter autoGanttDateType can manage whether to automatically adjust. If you want to turn off automatic adjustment, please ensure that the time span is as small as possible, otherwise there will be obvious performance problems. Fixed the problem of not being called back when changes occurred at certain times.