jQuery Gantt: 动态任务管理解决方案
以下是一个简单的jQuery Gantt插件的使用示例，用于创建一个包含动态任务的时间轴。
<!DOCTYPE html>
<html>
<head>
<title>jQuery Gantt Example</title>
<link rel="stylesheet" href="path/to/jquery.gantt.css" />
<script src="path/to/jquery.js"></script>
<script src="path/to/jquery.gantt.js"></script>
<script>
$(function() {
"use strict";
var ganttData = [
{
"label": "任务 1",
"start": "2023-04-01",
"end": "2023-04-07"
},
{
"label": "任务 2",
"start": "2023-04-08",
"end": "2023-04-14"
}
// 添加更多任务...
];
$("#gantt").gantt({
source: ganttData,
scale: "days",
minScale: "days",
maxScale: "months"
});
});
</script>
</head>
<body>
<div id="gantt" style="width:100%; height:400px;"></div>
</body>
</html>在这个例子中，我们首先引入了必要的CSS和JavaScript文件。然后，我们定义了一个简单的数据数组ganttData，包含了开始日期和结束日期的任务信息。接下来，我们使用jQuery选择器选中页面上的元素，并调用$("#gantt").gantt()方法来初始化时间轴，并传入我们的数据。这将在页面上创建一个可以通过缩放和拖拽来管理任务的交互式时间轴。
评论已关闭