opt-gantt-for-react 是一款针对 React 的优秀 Gantt 图表组件。支持多种自定义选项和事件绑定，可以用于构建各种类型的任务计划表。
在这篇文章中，我们将介绍如何安装和使用 opt-gantt-for-react，以及如何根据自己的需求配置和使用它。
安装和使用
安装
要使用 opt-gantt-for-react，我们首先需要将它添加到我们的项目中。我们可以通过 npm 包管理器来安装它：
npm install opt-gantt-for-react --save
使用
- 导入 opt-gantt-for-react：
import GanttChart from 'opt-gantt-for-react'
- 创建任务列表和事件列表：
-- -------------------- ---- -------
----- ----- - -
-
----- ----- ---
------ ----------------------
---- ---------------------
--
-
----- ----- ---
------ ----------------------
---- ---------------------
--
---
--
----- ------ - -
-
----- ------ ---
----- ----------------------
--
-
----- ------ ---
----- ----------------------
--
---
--其中，任务和事件都包含一个名称和开始时间和结束时间或日期等信息。
- 渲染组件：
-- -------------------- ---- -------
----- --- - -- -- -
------ -
-----
----------- ------------- --------------- --
------
--
-
-------------------- --- ---------------------------------最终会渲染出一个基本的 Gantt 图表。
自定义选项
除了使用默认的选项配置，我们还可以根据自己的需求进行自定义配置。以下是针对 opt-gantt-for-react 组件可用的自定义选项列表：
| 选项 | 默认值 | 描述 |
|---|---|---|
| enableContextMenu | true | 是否显示右键菜单 |
| enableTaskList | true | 是否显示任务列表 |
| enableProgressBar | true | 是否显示进度条 |
| gridWidth | 50 | 网格宽度（像素） |
| barHeight | 20 | 条形高度（像素） |
| fontSize | 12 | 字体大小（像素） |
| fontFamily | 'Segoe UI' | 字体族 |
| fontColor | '#333' | 字体颜色 |
| viewMode | 'Week' | 视图模式（支持 'Day', 'Week', 'Month', 'Year'） |
| dateRange | 时间范围（例如：["2019-09-01", "2019-10-31"]） | |
| customDateRange | false | 是否为时间范围自定义日期选择器的日期范围 |
| customDatePickerProps | { } | 自定义日期选择器的属性 |
| onTaskChange | undefined | 当任务被更改时会调用此函数。 |
| onTaskDelete | undefined | 当任务被删除时会调用此函数。 |
| onStartDateChange | undefined | 当开始日期更改时会调用此函数。 |
| onEndDateChange | undefined | 当结束日期更改时会调用此函数。 |
| onProgressChange | undefined | 当进度条更改时会调用此函数。 |
| onContextMenuClick | undefined | 当用户点击右键菜单中的某个选项时，会调用此函数。 |
在初始化 GanttChart 组件时，可以通过传递一个配置对象来配置这些选项：
-- -------------------- ---- ------- ----------- ------------- --------------- -------------- -------------- ------------- --------------------- ------------------ ------------------------- -------------- ------------------------------- ------------------------------- ----------------------------------------- ------------------------------------- --------------------------------------- ------------------------------------------- --
事件绑定
除了自定义选项之外，还可以利用事件绑定来响应用户和组件之间的交互。以下是可用的事件绑定列表：
| 事件名称 | 描述 |
|---|---|
| onTaskClick | 当用户单击任务时会调用此函数。 |
| onTaskEdit | 当用户开始编辑任务时会调用此函数。 |
| onTaskUpdated | 当用户完成编辑任务时会调用此函数。 |
| onTaskCreate | 当用户创建任务时会调用此函数。 |
| onEventClick | 当用户单击事件时会调用此函数。 |
| onEventEdit | 当用户开始编辑事件时会调用此函数。 |
| onEventUpdated | 当用户完成编辑事件时会调用此函数。 |
| onEventCreate | 当用户创建事件时会调用此函数。 |
| onDateChange | 当用户更改日期范围时会调用此函数。 |
| onArrowClick | 当用户单击箭头（切换到前一个或下一个时间段）时会调用此函数。 |
| onGridClick | 当用户单击网格上的任何位置时都会调用此函数。 |
| onCanvasClick | 当用户单击图表区域的空白部分时会调用此函数。 |
| onLabelClick | 当用户单击标签时会调用此函数。 |
| onProgressBarClick | 当用户单击进度条时会调用此函数。 |
| onProgressBarCreate | 当用户创建新进度条时会调用此函数。 |
| onProgressBarUpdated | 当用户完成编辑进度条时会调用此函数。 |
| onProgressBarDeleted | 当用户删除进度条时会调用此函数。 |
| onContextMenuClick | 当用户点击右键菜单时会调用此函数。 |
| onStartResize | 当用户开始调整任务或事件的开始时间时会调用此函数。 |
| onEndResize | 当用户开始调整任务或事件的结束时间时会调用此函数。 |
| onStopResize | 当用户完成调整任务或事件的任何时间时都会调用此函数。 |
| onProgressResize | 当用户开始调整任务或事件的进度条时会调用此函数。 |
| onTextMove | 当用户开始移动任务或事件的文本标签时会调用此函数。 |
| onStartDragging | 当用户开始拖动任务或事件时会调用此函数。 |
| onStopDragging | 当用户停止拖动任务或事件时会调用此函数。 |
我们可以在创建 GanttChart 组件时向其传递事件回调函数来处理这些事件：
-- -------------------- ---- ------- ----------- ------------- --------------- ----------------------------- --------------------------- --------------------------------- ------------------------------- ------------------------------- ----------------------------- ----------------------------------- --------------------------------- ------------------------------- ------------------------------- ----------------------------- --------------------------------- ------------------------------- ------------------------------------------- --------------------------------------------- ----------------------------------------------- ----------------------------------------------- ------------------------------------------- --------------------------------- ----------------------------- ------------------------------- --------------------------------------- --------------------------- ------------------------------------- ----------------------------------- --
示例代码
以下是一个完整的示例代码，它演示了如何使用 opt-gantt-for-react 创建自定义任务计划表，并绑定了事件回调函数：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- ------------
------ ---------- ---- ----------------------
----- --- - -- -- -
----- ------- --------- - ----------
-
--- --
----- ----- ---
------ ----------------------
---- ----------------------
--------- --
--
-
--- --
----- ----- ---
------ ----------------------
---- ----------------------
--------- --
--
-
--- --
----- ----- ---
------ ----------------------
---- ----------------------
--------- --
-
---
----- -------- ---------- - ----------
-
--- --
----- ------ ---
----- ----------------------
--
-
--- --
----- ------ ---
----- ----------------------
-
---
----- --------------- - ------ -- -
----------------- ---------- ------
--
----- -------------- - ------ -- -
----------------- ---------- ------
--
----- ----------------- - ------ -- -
----------------- ---------- ------
--
----- ---------------- - ------ -- -
----------------- ---------- ------
--
----- ---------------- - ----------- -- -
----------------- ----- ---------- -----------
--
----- ------------------------ - ------ ------------ -- -
------------------------ ---------- ----- -------------
-
------ -
---- -------- ------- ----- ------ ------ ----- ---
-----------
-------------
---------------
-----------------------------
---------------------------
---------------------------------
-------------------------------
-------------------------------
-----------------------------------------------
--
------
--
-
-------------------- --- ---------------------------------结论
在这篇文章中，我们介绍了 opt-gantt-for-react 组件以及它的使用方法和自定义选项和事件绑定。我们演示了如何创建自定义任务计划表，并绑定了事件回调函数来响应交互。希望这篇文章能够帮助读者使用 opt-gantt-for-react 更好地构建任务计划表。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c5981e8991b448ebdaa