jQuery.Gantt 开源项目教程

2026-01-18 09:35:19作者：姚月梅Lane

1. 项目的目录结构及介绍

jQuery.Gantt 项目的目录结构如下：

jQuery.Gantt/
├── css/
│   ├── images/
│   │   ├── bar.gif
│   │   ├── header.gif
│   │   ├── split.gif
│   │   └── split_hover.gif
│   ├── style.css
│   └── system.css
├── examples/
│   ├── basic.html
│   ├── data.json
│   ├── dynamic.html
│   ├── index.html
│   ├── json.html
│   ├── load_indicator.html
│   ├── milestones.html
│   ├── multiple_events.html
│   ├── no_overlap.html
│   ├── resize.html
│   ├── scroll.html
│   ├── selectable.html
│   ├── sortable.html
│   ├── start_empty.html
│   ├── tooltip.html
│   └── weekends.html
├── js/
│   ├── jquery.fn.gantt.js
│   ├── jquery.gantt.js
│   └── jquery.min.js
└── README.md

目录结构介绍

css/：包含项目的样式文件和图片资源。
- images/：包含用于 Gantt 图表的图像文件。
- style.css：主要样式文件。
- system.css：系统相关的样式文件。
examples/：包含多个示例文件，展示了 Gantt 图表的不同用法和功能。
js/：包含 JavaScript 文件，包括 jQuery 库和 Gantt 插件。
- jquery.fn.gantt.js：Gantt 插件的主要实现文件。
- jquery.gantt.js：Gantt 插件的辅助文件。
- jquery.min.js：压缩后的 jQuery 库文件。
README.md：项目的说明文档。

2. 项目的启动文件介绍

项目的启动文件是 examples/index.html，它是一个示例文件，展示了如何使用 jQuery.Gantt 插件创建一个基本的 Gantt 图表。

启动文件内容

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Gantt</title>
    <link rel="stylesheet" href="../css/style.css" type="text/css" />
    <link rel="stylesheet" href="../css/system.css" type="text/css" />
</head>
<body>
    <div class="gantt"></div>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/jquery.fn.gantt.js"></script>
    <script>
        $(function() {
            "use strict";
            $(".gantt").gantt({
                source: "data.json",
                scale: "weeks",
                minScale: "weeks",
                maxScale: "months",
                navigate: "scroll",
                itemsPerPage: 10,
                onItemClick: function(data) {
                    alert("Item clicked - show some details");
                },
                onAddClick: function(dt, rowId) {
                    alert("Empty space clicked - add an item!");
                },
                onRender: function() {
                    if (window.console && typeof console.log === "function") {
                        console.log("chart rendered");
                    }
                }
            });
        });
    </script>
</body>
</html>