@zjutcook/ant-gantt NPM

简介

绘制甘特图，支持左侧表格自定义，支持拖拽修改开始结束时间，支持关系连线等各种操作

npm install @zjutook/ant-gantt

使用方式：第一个参数是挂载节点的id/className/dom元素；第二个参数是配置项

import Gantt from '@zjutook/ant-gantt';

const ganttInstance = new Gantt('#app', { mode: 'day' });

ganttInstance.render(data, { mode: 'week' });

类别: GroupData, Data

参数	说明	类型	默认值	版本
id	节点id	string	必填	-
name	节点名称	string	必填	-
type	节点类型	string	必填（i - 组节点/t - 节点/itemNew - 新增节点）	-
beginTime	计划 - 开始日期	string	-	-
endTime	计划 - 结束日期	string	-	-
realityBeginTime	实际 - 开始日期	string	-	-
realityEndTime	实际 - 结束日期	string	-	-
rangeBeginTime	范围 - 开始日期	string	-	-
rangeEndTime	范围 - 结束日期	string	-	-
milestone	是否里程碑 - 自动编排时，不可修改结束日期	boolean	-	-
status	节点状态 - 配合calendarConfig.statusKey使用，标记不同状态下的节点颜色	string	-	-
createFS/createSF/createFF	createSS	是否可关联不同的节点关系	boolean	-	-
FS/SF/FF/SS	不同关联关系的列表	object[]	-	-
children	子节点列表	object[]	-	-
total	子节点数量	number	-	-
hasMore	是否有更多子节点 - 用于显示加载更多	boolean	-	-
isLeaf	是否是叶子节点 - 用于显示是否可展开	boolean	-	-
disabled	是否无效 - 用于编辑无效状态数据	boolean	-	-
editable	是否可编辑 - 用于标记数据是否可编辑	boolean	-	-
creatable	扩展字段 - 是否可创建子节点	boolean	-	-
wbs	扩展字段 - wbs编号	string	-	-

插件config使用的属性功能

参数	说明	类型	默认值	版本
locale	显示语言 - zh-CN、en-US、zh-TW	string	zh-CN	-
mode	视图类型 - year、halfYear、season、month、week、day	string	day	-
format	默认日期格式，仅作用于默认值	string	YYYY-MM-DD	-
rowKey	可自定义列表的key	string	id	-
showExpand	是否可展开	boolean	true	-
expandedKeys	展开节点	string[]	-	-
onExpand	展开/收起子节点的回调	(expandedKeys, row) => {}	-	-
collapse	表格视图是否可收起	boolean	true	-
onCollapse	展开/收起列的回调	(tag:boolean) => {}	true	-
parentChild	是否可关联父子节点	boolean	false	-
autoPairing	是否启动自动编排	boolean	false	-
colWidth	列宽 - 一天显示的宽度	number	32	-
rowHeight	行高 - 每行数据的高度	number	32	-
hasMore	是否存在更多 - 根节点	boolean	false	-
loadMore	是否支持加载更多	boolean	true	-
loadMoreText	加载更多替换文案	boolean	加载更多	-
onLoadMore	点击加载更多回调	(row) => {}	-	-
onItemChange	数据发生变化时的回调	(params, row, e) => {}	-	-
onItemClick	点击行时的回调	(row) => {}	-	-
onItemLinkChange	关联关系发生变化时的回调	(data, e) => {}	-	-
onLoadData	点击展开时，异步加载数据	(row) => {}	-	-
grid	表格视图设置	gridConfig	-	-
calendar	日历视图设置	calendarConfig	-	-
link	关联关系设置	linkConfig	-	-
resizer	调节器设置	resizerConfig	-	-

locale： zh-CN(中文简体), en-US(英文), zh-TW(中文繁体)

mode：year(年)、halfYear(半年)、season(季)、month(月)、week(周)、day(日)

data.type === 'i'时，只显示expandedWidthKey对应的列

datastatusKey状态值必须为number

参数	说明	类型	默认值	版本
show	是否显示调节器	boolean	true	-
width	调节器宽度	number	20	-