jQuery EasyUI甘特图插件实战案例详解轻松实现项目进度管理可视化

威震华夏关云长 · 发表于 2025-9-18 11:50:12

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

引言

在项目管理中，甘特图是一种非常直观和有效的工具，用于可视化项目进度、任务分配和时间安排。jQuery EasyUI作为一个流行的前端UI框架，提供了强大的甘特图插件，可以帮助开发者快速构建功能丰富的项目进度管理系统。本文将详细介绍如何使用jQuery EasyUI甘特图插件，通过实战案例展示如何轻松实现项目进度管理的可视化。

jQuery EasyUI和甘特图的基本概念

jQuery EasyUI简介

jQuery EasyUI是一个基于jQuery的UI插件集合，为web开发提供了丰富的UI组件，包括datagrid、tree、tabs、form等。它帮助开发者轻松构建具有现代化界面的web应用程序，减少了大量的前端开发工作。

甘特图简介

甘特图（Gantt Chart）是由亨利·甘特（Henry Gantt）在20世纪初发明的项目管理工具。它通过条形图的形式展示项目的时间表，包括任务的开始时间、结束时间、持续时间以及任务之间的关系。甘特图使得项目经理和团队成员能够直观地了解项目进度、资源分配和关键路径。

jQuery EasyUI甘特图插件

jQuery EasyUI甘特图插件是EasyUI框架中的一个组件，专门用于创建交互式的甘特图。它支持任务的增加、修改、删除，任务之间的依赖关系设置，以及各种自定义选项，如颜色、样式、工具提示等。

环境准备和插件引入

必要条件

在使用jQuery EasyUI甘特图插件之前，需要准备以下环境：

1. jQuery库（1.11.x或更高版本）
2. jQuery EasyUI库（1.5.x或更高版本）
3. 甘特图插件（gantt.js）

引入必要的文件

可以通过CDN引入这些文件，也可以下载到本地使用。以下是使用CDN引入的示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI甘特图示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script src="https://www.jeasyui.com/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/plugins/gantt.css">
<script src="https://www.jeasyui.com/easyui/plugins/jquery.gantt.js"></script>
<style>
/* 自定义样式 */
.gantt-container {
width: 100%;
height: 500px;
margin: 20px 0;
}
</style>
</head>
<body>
<div id="gantt" class="gantt-container"></div>
</body>
</html>

复制代码

基础甘特图的创建

创建简单的甘特图

下面是一个创建基础甘特图的示例代码：

$(function(){
$('#gantt').gantt({
dataSource: [
{
id: 1, // 任务ID
name: '需求分析', // 任务名称
start: new Date(2023, 0, 1), // 开始日期
end: new Date(2023, 0, 5), // 结束日期
progress: 100 // 完成进度（百分比）
},
{
id: 2,
name: '系统设计',
start: new Date(2023, 0, 6),
end: new Date(2023, 0, 15),
progress: 80
},
{
id: 3,
name: '编码实现',
start: new Date(2023, 0, 16),
end: new Date(2023, 1, 10),
progress: 50
},
{
id: 4,
name: '系统测试',
start: new Date(2023, 1, 11),
end: new Date(2023, 1, 25),
progress: 20
},
{
id: 5,
name: '部署上线',
start: new Date(2023, 1, 26),
end: new Date(2023, 2, 5),
progress: 0
}
],
// 设置导航选项
navigate: 'scroll',
// 设置刻度单位
scale: 'days',
// 设置最大和最小日期
minScale: 'days',
maxScale: 'months',
// 设置任务点击事件
onItemClick: function(data) {
alert('任务: ' + data.name);
}
});
});

复制代码

甘特图数据结构

在jQuery EasyUI甘特图中，每个任务对象通常包含以下属性：

• id: 任务的唯一标识符
• name: 任务名称
• start: 任务开始日期（Date对象）
• end: 任务结束日期（Date对象）
• progress: 任务完成进度（0-100的数值）
• color: 任务条的颜色（可选）
• customClass: 自定义CSS类（可选）
• dependencies: 依赖任务ID数组（可选）

甘特图的配置和自定义

基本配置选项

jQuery EasyUI甘特图插件提供了丰富的配置选项，可以根据需求进行自定义：

$('#gantt').gantt({
// 数据源
dataSource: tasks,
// 导航方式：'scroll' 或 'buttons'
navigate: 'buttons',
// 时间刻度：'days', 'weeks', 'months'
scale: 'weeks',
// 最大和最小刻度
minScale: 'days',
maxScale: 'months',
// 是否显示周末
weekends: true,
// 是否显示当前日期线
showToday: true,
// 是否显示网格
grid: true,
// 任务条高度
rowHeight: 30,
// 任务点击事件
onItemClick: function(data) {
console.log('点击任务:', data);
},
// 任务双击事件
onDblClick: function(data) {
console.log('双击任务:', data);
},
// 任务右键点击事件
onRightClick: function(data, event) {
console.log('右键点击任务:', data);
event.preventDefault();
},
// 渲染事件
onRender: function() {
console.log('甘特图渲染完成');
}
});

复制代码

自定义任务样式

可以通过自定义CSS来改变甘特图的样式：

/* 自定义任务条样式 */
.gantt .bar {
border-radius: 3px;
height: 18px;
}
/* 自定义已完成部分样式 */
.gantt .bar .progress {
border-radius: 3px 0 0 3px;
height: 100%;
}
/* 自定义任务依赖线样式 */
.gantt .line {
stroke-width: 1px;
}
/* 自定义周末样式 */
.gantt .weekend {
background-color: #f5f5f5;
}
/* 自定义今日线样式 */
.gantt .today {
background-color: #ff0000;
}

复制代码

使用自定义类和颜色

可以为不同的任务设置不同的颜色和自定义类：

$('#gantt').gantt({
dataSource: [
{
id: 1,
name: '需求分析',
start: new Date(2023, 0, 1),
end: new Date(2023, 0, 5),
progress: 100,
color: '#00ff00', // 自定义颜色
customClass: 'milestone' // 自定义CSS类
},
{
id: 2,
name: '系统设计',
start: new Date(2023, 0, 6),
end: new Date(2023, 0, 15),
progress: 80,
color: '#0066cc'
},
{
id: 3,
name: '编码实现',
start: new Date(2023, 0, 16),
end: new Date(2023, 1, 10),
progress: 50,
color: '#ff9900'
}
]
});

复制代码

实战案例：项目进度管理系统

案例概述

我们将创建一个简单的项目进度管理系统，包括以下功能：

1. 显示项目甘特图
2. 添加、编辑和删除任务
3. 设置任务依赖关系
4. 更新任务进度
5. 导出甘特图为图片

HTML结构

首先，创建基本的HTML结构：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>项目进度管理系统</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/plugins/gantt.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script src="https://www.jeasyui.com/easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="https://www.jeasyui.com/easyui/plugins/jquery.gantt.js"></script>
<style>
.gantt-container {
width: 100%;
height: 500px;
margin: 20px 0;
}
.toolbar {
margin: 10px 0;
}
.dialog-button {
text-align: center;
}
</style>
</head>
<body>
<div class="easyui-layout" style="width:100%;height:100%;">
<div data-options="region:'north',border:false" style="height:60px;padding:10px;">
<h2 style="float:left;">项目进度管理系统</h2>
<div class="toolbar" style="float:right;">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="showAddTaskDialog()">添加任务</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="showEditTaskDialog()">编辑任务</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="deleteTask()">删除任务</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="exportGantt()">导出图片</a>
</div>
</div>
<div data-options="region:'center',border:false">
<div id="gantt" class="gantt-container"></div>
</div>
</div>
<div id="taskDialog" class="easyui-dialog" style="width:400px;height:300px;padding:10px 20px"
closed="true" buttons="#dlg-buttons" data-options="modal:true,title:'任务信息'">
<form id="taskForm" method="post">
<input type="hidden" name="id" id="taskId">
<div class="fitem">
<label>任务名称:</label>
<input name="name" class="easyui-textbox" required="true">
</div>
<div class="fitem">
<label>开始日期:</label>
<input name="start" class="easyui-datebox" required="true">
</div>
<div class="fitem">
<label>结束日期:</label>
<input name="end" class="easyui-datebox" required="true">
</div>
<div class="fitem">
<label>进度(%):</label>
<input name="progress" class="easyui-numberspinner" min="0" max="100" required="true">
</div>
<div class="fitem">
<label>依赖任务:</label>
<input name="dependencies" class="easyui-combobox"
data-options="valueField:'id',textField:'name',multiple:true">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveTask()">保存</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="$('#taskDialog').dialog('close')">取消</a>
</div>
<script>
// 初始化甘特图数据
var tasks = [
{
id: 1,
name: '需求分析',
start: new Date(2023, 0, 1),
end: new Date(2023, 0, 5),
progress: 100
},
{
id: 2,
name: '系统设计',
start: new Date(2023, 0, 6),
end: new Date(2023, 0, 15),
progress: 80
},
{
id: 3,
name: '数据库设计',
start: new Date(2023, 0, 6),
end: new Date(2023, 0, 10),
progress: 100,
dependencies: [1]
},
{
id: 4,
name: '前端开发',
start: new Date(2023, 0, 16),
end: new Date(2023, 1, 5),
progress: 60,
dependencies: [2]
},
{
id: 5,
name: '后端开发',
start: new Date(2023, 0, 16),
end: new Date(2023, 1, 10),
progress: 50,
dependencies: [2, 3]
},
{
id: 6,
name: '系统测试',
start: new Date(2023, 1, 11),
end: new Date(2023, 1, 25),
progress: 20,
dependencies: [4, 5]
},
{
id: 7,
name: '部署上线',
start: new Date(2023, 1, 26),
end: new Date(2023, 2, 5),
progress: 0,
dependencies: [6]
}
];
// 当前选中的任务
var selectedTask = null;
$(function(){
// 初始化甘特图
$('#gantt').gantt({
dataSource: tasks,
navigate: 'buttons',
scale: 'days',
maxScale: 'months',
minScale: 'days',
weekends: true,
showToday: true,
grid: true,
rowHeight: 30,
onItemClick: function(data) {
selectedTask = data;
},
onDblClick: function(data) {
selectedTask = data;
showEditTaskDialog();
}
});
// 初始化依赖任务下拉框
updateDependenciesCombo();
});
// 显示添加任务对话框
function showAddTaskDialog() {
$('#taskForm').form('clear');
$('#taskId').val('');
$('#taskDialog').dialog('open');
}
// 显示编辑任务对话框
function showEditTaskDialog() {
if (!selectedTask) {
$.messager.alert('提示', '请先选择一个任务', 'warning');
return;
}
$('#taskForm').form('load', {
id: selectedTask.id,
name: selectedTask.name,
start: formatDate(selectedTask.start),
end: formatDate(selectedTask.end),
progress: selectedTask.progress,
dependencies: selectedTask.dependencies || []
});
$('#taskDialog').dialog('open');
}
// 保存任务
function saveTask() {
$('#taskForm').form('submit', {
onSubmit: function() {
return $(this).form('validate');
},
success: function(data) {
var formData = $('#taskForm').form('getData');
// 转换日期格式
formData.start = new Date(formData.start);
formData.end = new Date(formData.end);
// 更新或添加任务
if (formData.id) {
// 更新现有任务
for (var i = 0; i < tasks.length; i++) {
if (tasks[i].id == formData.id) {
tasks[i] = formData;
break;
}
}
} else {
// 添加新任务
formData.id = tasks.length > 0 ? Math.max.apply(Math, tasks.map(function(t) { return t.id; })) + 1 : 1;
tasks.push(formData);
}
// 刷新甘特图
$('#gantt').gantt('refresh', tasks);
// 更新依赖任务下拉框
updateDependenciesCombo();
// 关闭对话框
$('#taskDialog').dialog('close');
$.messager.show({
title: '成功',
msg: '任务保存成功',
timeout: 2000,
showType: 'slide'
});
}
});
}
// 删除任务
function deleteTask() {
if (!selectedTask) {
$.messager.alert('提示', '请先选择一个任务', 'warning');
return;
}
$.messager.confirm('确认', '确定要删除这个任务吗？', function(r) {
if (r) {
// 删除任务
for (var i = 0; i < tasks.length; i++) {
if (tasks[i].id == selectedTask.id) {
tasks.splice(i, 1);
break;
}
}
// 删除其他任务对此任务的依赖
for (var i = 0; i < tasks.length; i++) {
if (tasks[i].dependencies) {
var index = tasks[i].dependencies.indexOf(selectedTask.id);
if (index != -1) {
tasks[i].dependencies.splice(index, 1);
}
}
}
// 刷新甘特图
$('#gantt').gantt('refresh', tasks);
// 更新依赖任务下拉框
updateDependenciesCombo();
selectedTask = null;
$.messager.show({
title: '成功',
msg: '任务删除成功',
timeout: 2000,
showType: 'slide'
});
}
});
}
// 导出甘特图为图片
function exportGantt() {
// 这里使用html2canvas库将甘特图导出为图片
// 需要先引入html2canvas库
$.messager.alert('提示', '导出功能需要引入html2canvas库', 'info');
}
// 更新依赖任务下拉框
function updateDependenciesCombo() {
var dependenciesCombo = $('input[name="dependencies"]').combobox({
data: tasks.map(function(task) {
return {
id: task.id,
name: task.name
};
})
});
}
// 格式化日期
function formatDate(date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
return year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
}
</script>
</body>
</html>

复制代码

功能实现详解

在页面加载完成后，我们初始化甘特图并设置一些基本配置：

$('#gantt').gantt({
dataSource: tasks,
navigate: 'buttons',
scale: 'days',
maxScale: 'months',
minScale: 'days',
weekends: true,
showToday: true,
grid: true,
rowHeight: 30,
onItemClick: function(data) {
selectedTask = data;
},
onDblClick: function(data) {
selectedTask = data;
showEditTaskDialog();
}
});

复制代码

这里我们设置了数据源、导航方式、时间刻度等基本配置，并定义了任务点击和双击事件的处理函数。

添加任务的功能通过一个对话框实现：

function showAddTaskDialog() {
$('#taskForm').form('clear');
$('#taskId').val('');
$('#taskDialog').dialog('open');
}

复制代码

这个函数会清空表单，然后打开任务对话框，用户可以输入新任务的信息。

编辑任务的功能也通过对话框实现，但会先加载选中任务的信息：

function showEditTaskDialog() {
if (!selectedTask) {
$.messager.alert('提示', '请先选择一个任务', 'warning');
return;
}
$('#taskForm').form('load', {
id: selectedTask.id,
name: selectedTask.name,
start: formatDate(selectedTask.start),
end: formatDate(selectedTask.end),
progress: selectedTask.progress,
dependencies: selectedTask.dependencies || []
});
$('#taskDialog').dialog('open');
}

复制代码

这个函数会检查是否有选中的任务，如果没有则提示用户，如果有则加载任务信息到表单中，然后打开对话框。

保存任务的功能会处理添加和编辑两种情况：

function saveTask() {
$('#taskForm').form('submit', {
onSubmit: function() {
return $(this).form('validate');
},
success: function(data) {
var formData = $('#taskForm').form('getData');
// 转换日期格式
formData.start = new Date(formData.start);
formData.end = new Date(formData.end);
// 更新或添加任务
if (formData.id) {
// 更新现有任务
for (var i = 0; i < tasks.length; i++) {
if (tasks[i].id == formData.id) {
tasks[i] = formData;
break;
}
}
} else {
// 添加新任务
formData.id = tasks.length > 0 ? Math.max.apply(Math, tasks.map(function(t) { return t.id; })) + 1 : 1;
tasks.push(formData);
}
// 刷新甘特图
$('#gantt').gantt('refresh', tasks);
// 更新依赖任务下拉框
updateDependenciesCombo();
// 关闭对话框
$('#taskDialog').dialog('close');
$.messager.show({
title: '成功',
msg: '任务保存成功',
timeout: 2000,
showType: 'slide'
});
}
});
}

复制代码

这个函数会先验证表单，然后根据表单数据更新现有任务或添加新任务，最后刷新甘特图并显示成功消息。

删除任务的功能会先确认用户操作，然后删除任务及其依赖关系：

function deleteTask() {
if (!selectedTask) {
$.messager.alert('提示', '请先选择一个任务', 'warning');
return;
}
$.messager.confirm('确认', '确定要删除这个任务吗？', function(r) {
if (r) {
// 删除任务
for (var i = 0; i < tasks.length; i++) {
if (tasks[i].id == selectedTask.id) {
tasks.splice(i, 1);
break;
}
}
// 删除其他任务对此任务的依赖
for (var i = 0; i < tasks.length; i++) {
if (tasks[i].dependencies) {
var index = tasks[i].dependencies.indexOf(selectedTask.id);
if (index != -1) {
tasks[i].dependencies.splice(index, 1);
}
}
}
// 刷新甘特图
$('#gantt').gantt('refresh', tasks);
// 更新依赖任务下拉框
updateDependenciesCombo();
selectedTask = null;
$.messager.show({
title: '成功',
msg: '任务删除成功',
timeout: 2000,
showType: 'slide'
});
}
});
}

复制代码

这个函数会检查是否有选中的任务，然后确认用户是否真的要删除任务。如果确认，会删除任务以及其他任务对此任务的依赖关系，最后刷新甘特图并显示成功消息。

导出功能可以使用html2canvas库实现：

function exportGantt() {
// 这里使用html2canvas库将甘特图导出为图片
// 需要先引入html2canvas库
$.messager.alert('提示', '导出功能需要引入html2canvas库', 'info');
}

复制代码

这个功能需要引入html2canvas库，然后使用该库将甘特图转换为图片并下载。

高级功能和技巧

动态加载数据

在实际应用中，甘特图数据通常是从服务器动态加载的。下面是一个使用AJAX加载数据的示例：

function loadGanttData(projectId) {
$.ajax({
url: '/api/projects/' + projectId + '/tasks',
type: 'GET',
dataType: 'json',
success: function(data) {
// 转换日期字符串为Date对象
data.forEach(function(task) {
task.start = new Date(task.start);
task.end = new Date(task.end);
});
// 刷新甘特图
$('#gantt').gantt('refresh', data);
// 更新依赖任务下拉框
updateDependenciesCombo();
},
error: function(xhr, status, error) {
$.messager.alert('错误', '加载数据失败: ' + error, 'error');
}
});
}

复制代码

任务拖拽调整

jQuery EasyUI甘特图插件支持拖拽调整任务的开始和结束时间：

$('#gantt').gantt({
dataSource: tasks,
// 启用拖拽
draggable: true,
// 拖拽开始事件
onDragStart: function(data, event) {
console.log('开始拖拽任务:', data.name);
},
// 拖拽结束事件
onDragEnd: function(data, event) {
console.log('结束拖拽任务:', data.name);
console.log('新的开始时间:', data.start);
console.log('新的结束时间:', data.end);
// 这里可以添加保存到服务器的代码
saveTaskToServer(data);
}
});
function saveTaskToServer(task) {
$.ajax({
url: '/api/tasks/' + task.id,
type: 'PUT',
contentType: 'application/json',
data: JSON.stringify(task),
success: function(response) {
$.messager.show({
title: '成功',
msg: '任务更新成功',
timeout: 2000,
showType: 'slide'
});
},
error: function(xhr, status, error) {
$.messager.alert('错误', '更新任务失败: ' + error, 'error');
// 刷新甘特图以恢复原始数据
$('#gantt').gantt('refresh', tasks);
}
});
}

复制代码

自定义工具提示

可以自定义任务的工具提示，显示更多信息：

$('#gantt').gantt({
dataSource: tasks,
// 自定义工具提示
tooltip: function(task) {
return '<div class="gantt-tooltip">' +
'<h4>' + task.name + '</h4>' +
'<p>开始: ' + formatDate(task.start) + '</p>' +
'<p>结束: ' + formatDate(task.end) + '</p>' +
'<p>进度: ' + task.progress + '%</p>' +
'<p>负责人: ' + (task.assignee || '未分配') + '</p>' +
'</div>';
}
});

复制代码

自定义渲染任务

可以自定义任务的渲染方式，添加更多信息：

$('#gantt').gantt({
dataSource: tasks,
// 自定义任务渲染
renderItem: function(task) {
var $item = $('<div class="gantt-item"></div>');
var $bar = $('<div class="bar"></div>');
var $progress = $('<div class="progress"></div>');
// 设置任务条样式
$bar.css({
'background-color': task.color || '#0066cc',
'width': task.progress + '%'
});
// 添加任务名称
$bar.append('<span class="name">' + task.name + '</span>');
// 添加进度条
$bar.append($progress);
// 添加任务条到项目
$item.append($bar);
return $item;
}
});

复制代码

缩放和平移

可以添加缩放和平移功能，以便更好地查看大型项目：

$(function(){
var gantt = $('#gantt').gantt({
dataSource: tasks,
// 启用缩放
zoom: true,
// 缩放事件
onZoom: function(scale) {
console.log('当前缩放级别:', scale);
}
});
// 添加缩放按钮
$('.zoom-in').click(function(){
gantt.gantt('zoomIn');
});
$('.zoom-out').click(function(){
gantt.gantt('zoomOut');
});
// 添加平移按钮
$('.pan-left').click(function(){
gantt.gantt('pan', 'left');
});
$('.pan-right').click(function(){
gantt.gantt('pan', 'right');
});
});

复制代码

常见问题和解决方案

问题1：甘特图不显示

原因：可能是没有正确引入必要的CSS和JS文件，或者容器元素没有设置高度。

解决方案：

1. 确保正确引入了所有必要的文件：

<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/plugins/gantt.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script src="https://www.jeasyui.com/easyui/plugins/jquery.gantt.js"></script>

复制代码

1. 确保容器元素设置了高度：

.gantt-container {
width: 100%;
height: 500px; /* 必须设置高度 */
}

复制代码

问题2：任务条不显示或显示不正确

原因：可能是数据格式不正确，特别是日期格式。

解决方案：

1. 确保日期是Date对象：

// 错误的方式
{
id: 1,
name: '任务1',
start: '2023-01-01', // 字符串，不正确
end: '2023-01-05', // 字符串，不正确
progress: 50
}
// 正确的方式
{
id: 1,
name: '任务1',
start: new Date(2023, 0, 1), // Date对象，正确
end: new Date(2023, 0, 5), // Date对象，正确
progress: 50
}

复制代码

1. 如果从服务器获取数据，确保将日期字符串转换为Date对象：

$.ajax({
url: '/api/tasks',
type: 'GET',
success: function(data) {
// 转换日期字符串为Date对象
data.forEach(function(task) {
task.start = new Date(task.start);
task.end = new Date(task.end);
});
// 刷新甘特图
$('#gantt').gantt('refresh', data);
}
});

复制代码

问题3：任务依赖关系不显示

原因：可能是依赖关系设置不正确，或者没有启用依赖关系显示。

解决方案：

1. 确保任务对象中包含dependencies属性：

{
id: 2,
name: '任务2',
start: new Date(2023, 0, 6),
end: new Date(2023, 0, 10),
progress: 30,
dependencies: [1] // 依赖于ID为1的任务
}

复制代码

1. 确保启用了依赖关系显示：

$('#gantt').gantt({
dataSource: tasks,
// 启用依赖关系显示
showDependencies: true
});

复制代码

问题4：拖拽功能不工作

原因：可能是没有启用拖拽功能，或者与其他插件冲突。

解决方案：

1. 确保启用了拖拽功能：

$('#gantt').gantt({
dataSource: tasks,
// 启用拖拽
draggable: true
});

复制代码

1. 检查是否有其他插件与拖拽功能冲突，尝试禁用其他插件。

问题5：性能问题，甘特图加载缓慢

原因：可能是数据量太大，或者渲染方式不当。

解决方案：

1. 使用分页或虚拟滚动：

$('#gantt').gantt({
dataSource: tasks,
// 启用虚拟滚动
virtualScroll: true,
// 设置每页显示的任务数
pageSize: 50
});

复制代码

1. 优化数据结构，避免不必要的数据：

// 只包含必要的数据
var optimizedTasks = tasks.map(function(task) {
return {
id: task.id,
name: task.name,
start: task.start,
end: task.end,
progress: task.progress,
dependencies: task.dependencies
};
});
$('#gantt').gantt({
dataSource: optimizedTasks
});

复制代码

1. 使用服务器端处理，只加载当前视图所需的数据：

$('#gantt').gantt({
// 使用URL作为数据源
url: '/api/tasks',
// 设置视图变化时的回调
onViewChange: function(start, end) {
// 重新加载数据
$(this).gantt('loadData', {
start: start,
end: end
});
}
});

复制代码

总结

jQuery EasyUI甘特图插件是一个功能强大且易于使用的工具，可以帮助开发者快速实现项目进度管理的可视化。通过本文的介绍和实战案例，我们了解了如何创建基础甘特图、配置和自定义甘特图、实现项目进度管理系统，以及解决常见问题。

使用jQuery EasyUI甘特图插件，可以轻松实现以下功能：

1. 显示项目任务和时间线
2. 添加、编辑和删除任务
3. 设置任务依赖关系
4. 更新任务进度
5. 拖拽调整任务时间
6. 自定义任务样式和工具提示
7. 导出甘特图为图片

通过合理使用这些功能，可以构建一个功能完善的项目进度管理系统，帮助项目经理和团队成员更好地跟踪和管理项目进度。

希望本文对您使用jQuery EasyUI甘特图插件有所帮助。如果您有任何问题或建议，欢迎留言讨论。

版权声明

1、转载或引用本网站内容(jQuery EasyUI甘特图插件实战案例详解轻松实现项目进度管理可视化)须注明原网址及作者(威震华夏关云长)，并标明本网站网址(https://www.pixtech.cc/)。

2、对于不当转载或引用本网站内容而引起的民事纷争、行政处理或其他损失，本网站不承担责任。

3、对不遵守本声明或其他违法、恶意使用本网站内容者，本网站保留追究其法律责任的权利。

本文地址: https://www.pixtech.cc/thread-36865-1-1.html

	通知：是的！我们正在计划一个大动作！	11-02 12:46
	通知：Telegram 推送频道https://t.me/+2tB3a7aKXlw2YjA1 及时接收第一手论坛帖子信息～	10-23 09:32
	通知：本站资源由网友上传分享，如有违规等问题请到版务模块进行投诉，将及时处理！	10-23 09:31
	通知：加入QQ社群吧 https://qm.qq.com/q/QZibQd1hiq	10-23 09:28
	通知：签到时间调整为每日4:00（东八区）	10-23 09:26

活动公告

jQuery EasyUI甘特图插件实战案例详解轻松实现项目进度管理可视化

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

版权声明

三倍冰淇淋

无人之境【一阶】

财Doro

小樱（小丑装）

立华奏

以外的星空【二阶】

⑨的冰沙

友情链接

频道订阅

加入社群