当前位置： 首页 > article >正文

甘特图实例 dhtmlxGantt.js

article 2025/8/28 3:43:04

本文介绍了如何使用dhtmlxGantt库创建一个基础的甘特图示例，并对其进行汉化和自定义配置。首先，通过引入dhtmlxgantt.css和dhtmlxgantt.js文件初始化甘特图。接着，通过设置gantt.i18n.setLocale("cn")实现核心文本的汉化，并配置了时间轴、按钮等元素的显示格式。为了限制用户操作，禁用了任务拖动、双击编辑等功能，并将甘特图设置为只读模式。此外，隐藏了工具栏、快速操作栏和表头操作栏，确保用户仅能查看而无法修改数据。最后，通过gantt.parse方法加载示例数据，并调用gantt.render()渲染甘特图。该示例展示了如何通过灵活的配置实现甘特图的定制化需求。

效果图：

<!DOCTYPE html>
<html><head><title>dhtmlxGantt 基础示例</title><link href="dhtmlxgantt.css" rel="stylesheet"><script src="dhtmlxgantt.js"></script><style>body {margin: 0;font-family: Arial;}.gantt-container {width: 100%;height: 100vh;}/* 隐藏所有加号按钮 */.gantt_add {display: none !important;}/* 或仅隐藏左侧任务树的加号按钮 */.gantt_tree_icon.gantt_add {display: none !important;}.gantt_last_cell {display: none !important;}</style>
</head><body><div id="gantt" class="gantt-container"></div><script>//汉化//文件内容示例gantt.i18n.setLocale("cn");// 核心文本汉化gantt.config.labels = {new_task: "新建任务",icon_save: "保存",icon_cancel: "取消",icon_details: "详情",icon_edit: "编辑",icon_delete: "删除",confirm_closing: "更改将丢失，确定关闭？",confirm_deleting: "任务将永久删除，确定继续？",section_description: "描述",section_time: "时间范围"};// 时间轴汉化gantt.config.month_date = "%Y年%m月";gantt.config.day_date = "%m月%d日";gantt.config.week_date = "第%W周";gantt.config.scale_date = "%Y年%m月%d日";gantt.config.buttons_left = [{ text: "周视图", command: "scale_cells", param: "week" },{ text: "月视图", command: "scale_cells", param: "month" }];gantt.config.buttons_right = [{ text: "导出PDF", command: "export_pdf" }];// 完全禁用任务拖动// 1. 初始化配置gantt.config.date_format = "%Y-%m-%d";// // 完全禁用任务拖动// gantt.config.drag_move = false;// gantt.config.drag_resize = false;gantt.config.select_task = false;// 禁用所有交互事件（包括双击编辑）gantt.config.interaction = {click: false,//禁用单击dblclick: false,//禁用双击drag: false,// 禁用任务拖动resize: false 禁用调整大小};// 仅允许查看但禁止修改gantt.config.readonly = true;// 禁用任务点击选中// gantt.config.scale_unit = "week";gantt.config.subscales = [{ unit: "day", step: 1, date: "%D" }];// 初始化时禁用任务创建按钮gantt.config.show_add_button = false;gantt.config.toolbar = []; // 清空工具栏gantt.config.show_quick_info = false; // 隐藏快速操作栏gantt.config.show_grid_header = false; // 隐藏表头操作栏// 2. 加载数据gantt.init("gantt");gantt.parse({data: [{ id: 1, text: "项目启动", start_date: "2025-05-01", duration: 7, progress: 0.5 },{ id: 2, text: "需求分析", start_date: "2025-05-08", duration: 5, parent: 1 },{ id: 3, text: "UI设计", start_date: "2025-05-10", duration: 8, parent: 1 },{ id: 4, text: "开发", start_date: "2025-05-15", duration: 10 },{ id: 5, text: "测试", start_date: "2025-05-16", end_date: "2025-05-20" }],// links: [//     { id: 1, source: 2, target: 3, type: "0" } // 0表示"完成-开始"依赖关系// ]});// 或通过事件拦截（更灵活）gantt.attachEvent("onBeforeTaskDrag", function () {return false; // 取消拖动操作});// 刷新视图使配置生效gantt.render();</script>
</body></html>

实例资源包下载：https://download.csdn.net/download/lybwwp/90892502

相关文章：

甘特图实例 dhtmlxGantt.js

本文介绍了如何使用dhtmlxGantt库创建一个基础的甘特图示例&#xff0c;并对其进行汉化和自定义配置。首先&#xff0c;通过引入dhtmlxgantt.css和dhtmlxgantt.js文件初始化甘特图。接着&#xff0c;通过设置gantt.i18n.setLocale("cn")实现核心文本的汉化&#xff0…...

编程日记 2025/8/26 16:01:22

AMD硬件笔试面试题型解析

本专栏预计更新60期左右。当前第12期 这个系列通过在各类网上搜索大厂公开的笔试和面试题目，然后构造相关的知识点矩阵，让大家对核心的知识点有更深的认识，这个过程虽然耗时费力，但大厂的很多题目确实非常巧妙，很有代表性。由于官方没有发布过这样的题库，所以文章中的题目…...

编程日记 2025/7/8 4:01:05

视频剪辑 VEGAS - 配置视频片段保持原长宽比

VEGAS 配置视频片段保持原长宽比 右击视频片段 -> 选择【开关】 -> 勾选【保持长宽比】 右击视频片段 -> 点击【属性】 -> 弹出【属性】窗口 点击【媒体】 -> 选择【像素宽高比】为【1,0000&#xff08;方形&#xff09;】...

编程日记 2025/8/20 13:25:55

力扣 54 .螺旋矩阵

文章目录 题目介绍题解 题目介绍 题解 代码如下&#xff1a; class Solution {public List<Integer> spiralOrder(int[][] matrix) {List<Integer> res new ArrayList<>();if (matrix.length 0){return res;}int l 0, r matrix[0].length - 1, t 0, b…...

编程日记 2025/8/25 22:32:48

四、【API 开发篇 (上)】：使用 Django REST Framework 构建项目与模块 CRUD API

【API 开发篇 】&#xff1a;使用 Django REST Framework 构建项目与模块 CRUD API 前言为什么选择 Django REST Framework (DRF)&#xff1f;第一步&#xff1a;创建 Serializers (序列化器)第二步&#xff1a;创建 ViewSets (视图集)第三步&#xff1a;配置 URLs (路由)第四步…...

编程日记 2025/8/26 5:22:45

python使用pycharm和conda 设置默认使用清华镜像

将步骤分为Conda配置和PyCharm配置两部分。Conda部分包括添加镜像源、调整优先级、更新环境。PyCharm部分需要根据版本说明如何添加镜像源到项目解释器设置中。同时&#xff0c;需要验证配置是否成功&#xff0c;并提醒常见问题&#xff0c;比如路径错误或缓存问题。需要确保引…...

编程日记 2025/6/4 22:17:42

Prometheus+Grafana实现对服务的监控

PrometheusGrafana实现对服务的监控 前言&#xff1a;PrometheusGrafana实现监控会更加全面&#xff0c;监控的组件更多 Prometheus官网 https://prometheus.io/docs/prometheus/latest/getting_started/ Grafana官网 https://grafana.com/docs/ 一、安装PrometheusGrafana 这…...

编程日记 2025/8/5 8:20:45

ARM笔记-ARM伪指令及编程基础

第四章 ARM伪指令及编程基础 4.1 伪指令概述 4.1.1 伪指令定义 人们设计了一些专门用于指导汇编器进行汇编工作的指令&#xff0c;由于这些指令不形成机器码指令&#xff0c;它们只是在汇编器进行汇编工作的过程中起作用&#xff0c;所以被叫做伪指令。 4.1.2 伪指令特征 …...

编程日记 2025/8/20 13:26:11

Python入门手册：Python基础语法

Python是一种简洁、易读且功能强大的编程语言&#xff0c;非常适合初学者入门。无论你是编程新手&#xff0c;还是有一定编程基础但想学习Python的开发者&#xff0c;掌握Python的基础语法都是迈向高效编程的第一步。本文将详细介绍Python的基本语法&#xff0c;包括变量和数据…...

编程日记 2025/8/20 14:09:19

SpringBoot-SpringBoot源码解读

SpringBoot-SpringBoot源码解读 一、Spring Boot启动过程概述 Spring Boot通过一系列的类和机制&#xff0c;简化了Spring应用的启动流程。当你执行SpringApplication.run()时&#xff0c;Spring Boot会自动完成应用的初始化、环境配置、组件加载、自动配置等任务&#xff0c…...

编程日记 2025/8/19 14:05:53

CAD如何导出PDF？PDF如何转CAD？详细教程来了

浩辰CAD看图王是一款功能强大的CAD图纸查看与编辑工具&#xff0c;其核心功能之一便是支持CAD与PDF格式的互转。下面是CAD看图王输出PDF和PDF转CAD功能的详细介绍及操作步骤&#xff1a; 一、输出PDF功能 看图王可以将CAD图纸转换为PDF格式&#xff0c;是文件在不同的设备上显…...

编程日记 2025/8/27 6:11:04

python-数据可视化（大数据、数据分析、可视化图像、HTML页面）

通过 Python 读取 XLS 、CSV文件中的数据&#xff0c;对数据进行处理&#xff0c;然后生成包含柱状图、扇形图和折线图的 HTML 报告。这个方案使用了 pandas 处理数据&#xff0c;matplotlib 生成图表&#xff0c;并将图表嵌入到 HTML 页面中。 1.XSL文件生成可视化图像、生成h…...

编程日记 2025/8/26 9:42:33

el-select中自定义 两组el-option,但是key不一样，并且点击需获取当前整个项的所有属性

当el-select中只有一组el-option &#xff0c; 获取点击的当前项的属性 &#xff0c; el-select 绑定:value-keyid 但是 当el-select中有两组el-option ,每组option的key不一致,如下代码所示 <el-selectv-model"sth" change"choosee":value-key"…...

编程日记 2025/8/11 0:42:06

【笔记】OpenCV的学习（未完）

由于只记关键和不懂的部分 希望做到下次再看这部分笔记就记得 所以用词会非常简练 前向传播 输入数据依次经过模型的各层&#xff0c;按照各层定义的运算规则进行计算&#xff0c;最终得到模型预测输出的过程。 单向的信息流动&#xff0c;不涉及模型参数的更新。 助于思考的…...

编程日记 2025/8/20 14:09:03

多模态大语言模型arxiv论文略读（八十七）

MG-LLaVA: Towards Multi-Granularity Visual Instruction Tuning ➡️ 论文标题&#xff1a;MG-LLaVA: Towards Multi-Granularity Visual Instruction Tuning ➡️ 论文作者&#xff1a;Xiangyu Zhao, Xiangtai Li, Haodong Duan, Haian Huang, Yining Li, Kai Chen, Hua Ya…...

编程日记 2025/8/20 6:02:57

《棒球百科》长寿运动排名·棒球1号位

关于长寿运动的排名&#xff0c;运动长寿秘诀&#xff1a; 一、全球公认的「长寿运动」排名 游泳&#xff08;低冲击、强化心肺&#xff09; 快走/健走&#xff08;每日30分钟降低15%早逝风险&#xff09; 太极拳&#xff08;平衡力减压&#xff0c;哈佛研究称可延缓衰老&am…...

编程日记 2025/8/18 22:57:10

Maven 项目打包时添加本地 Jar 包

在 Maven 项目开发中&#xff0c;我们经常会遇到需要引入本地 Jar 包的场景&#xff0c;比如使用未发布到中央仓库的第三方库、公司内部自定义工具包&#xff0c;或者处理版本冲突的依赖项。本文将详细介绍如何通过 Maven 命令将本地 Jar 包安装到本地仓库&#xff0c;并在项目…...

编程日记 2025/6/22 6:27:32

记录将网站从http升级https

http与https 你知道http是什么吗&#xff0c;那你知道https吗&#xff1f;在进行升级之前我们应该都听说http不安全&#xff0c;要用https&#xff0c;那你知道这是为什么吗&#xff1f; 什么是http&#xff1f; HTTP 是超文本传输协议&#xff0c;也就是HyperText Transfer…...

编程日记 2025/8/20 14:08:47

如何利用 ORM 框架有效防范 SQL 注入攻击

如何利用 ORM 框架有效防范 SQL 注入攻击 1. 引言 在现代 Web 开发中，SQL 注入攻击始终是数据库安全的一大隐患。攻击者利用不安全的 SQL 语句执行恶意操作，可能导致数据库泄露、篡改甚至被完全控制。幸运的是，ORM（对象关系映射）框架为开发者提供了一种更安全、更高效的…...

编程日记 2025/6/29 9:33:01

spark-shuffle 类型及其对比

1. Hash Shuffle 原理&#xff1a;将数据按照分区键进行哈希计算&#xff0c;将相同哈希值的数据发送到同一个Reducer中。特点&#xff1a;实现简单&#xff0c;适用于数据分布均匀的场景。但在数据分布不均匀时&#xff0c;容易导致某些Reducer处理的数据量过大&#xff0c;产…...

编程日记 2025/8/19 3:53:13

免费PDF工具-PDF24V9.16.0【win7专用版】

【百度】https://pan.baidu.com/s/1H7kvHudG5JTfxHg-eu2grA?pwd8euh 提取码: 8euh 【夸克】https://pan.quark.cn/s/92080b2e1f4c 【123】https://www.123912.com/s/0yvtTd-XAHjv https://creator.pdf24.org/listVersions.php...

编程日记 2025/8/25 10:15:08

游戏开发实战（二）：Python复刻「崩坏星穹铁道」嗷呜嗷呜事务所---源码级解析该小游戏背后的算法与设计模式【纯原创】

文章目录 奇美拉和队列奇美拉被动技能多对多观察者关系实现自定义元类奇美拉基类 管理奇美拉的队列奇美拉队列类心得体会扩展 规则定义工作相关奇美拉相关 奇美拉属性 在本篇博文&#xff0c;我将介绍本项目的整体框架&#xff0c;以及“编码规则”&#xff0c;这些规则保证了本…...

编程日记 2025/8/8 17:10:58

人工智能发展

探秘人工智能领域的热门编程语言与关键知识 在当今科技飞速发展的时代&#xff0c;人工智能已渗透到生活的各个角落&#xff0c;从智能语音助手到精准的推荐系统&#xff0c;从自动驾驶汽车到医疗影像诊断&#xff0c;人工智能正以前所未有的速度改变着世界。而在这背后&#x…...

编程日记 2025/7/5 8:31:22

在Rockchip平台上利用FFmpeg实现硬件解码与缩放并导出Python接口

在Rockchip平台上利用FFmpeg实现硬件解码与缩放并导出Python接口 一、为什么需要硬件加速？二、[RK3588 Opencv-ffmpeg-rkmpp-rkrga编译与测试](https://hi20240217.blog.csdn.net/article/details/148177158)三、核心代码解释3.1 初始化硬件上下文3.2 配置解码器3.3 构建滤镜链…...

编程日记 2025/6/13 7:36:25

Flink集成资源管理器

Flink集成资源管理器 Apache Flink 支持多种资源管理器&#xff0c;主要包括以下几种‌&#xff1a; YARN ResourceManager ‌&#xff1a;适用于使用 Hadoop YARN 作为资源管理器的环境。YARN ResourceManager 负责管理集群中的资源&#xff0c;包括 CPU、内存等&#xff0c;并…...

编程日记 2025/6/19 0:52:35

一周学会Pandas2 Python数据处理与分析-Pandas2数据合并与对比-pd.concat()：轴向拼接

锋哥原创的Pandas2 Python数据处理与分析 视频教程&#xff1a; 2025版 Pandas2 Python数据处理与分析 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 在数据分析中&#xff0c;数据往往分散在多个来源&#xff08;如不同文件、数据库表或API&#xff09;&#xff0c;需…...

编程日记 2025/8/28 0:08:29

安卓原生兼容服务器

安卓原生兼容服务器的定义 安卓原生兼容服务器‌指基于Android系统内核和服务框架构建的服务器环境&#xff0c;能够在不依赖第三方适配层的情况下&#xff0c;直接运行符合Android API规范的服务程序&#xff0c;并满足与其他软硬件组件的协同工作需求。其核心特征体现在以下…...

编程日记 2025/8/24 19:37:30

优化用户体验：拦截浏览器前进后退、刷新、关闭、路由跳转等用户行为并弹窗提示

&#x1f9d1;‍&#x1f4bb; 写在开头 点赞 收藏 学会&#x1f923;&#x1f923;&#x1f923; 需求 首先列举一下需要拦截的行为&#xff0c;接下来我们逐个实现。 浏览器前进后退标签页刷新和关闭路由跳转 1、拦截浏览器前进后退 这里的实现是核心&#xff0c;涉及到大…...

编程日记 2025/8/23 11:11:28

横川机器人驱动器导入参数教程

连接端口&#xff1a;有分220v和380v&#xff08;刷新多次无效果就重新打开软件&#xff09;升级固件&#xff1a;区分低压版和高压版导入参数&#xff1a;下载参数&#xff0c;下载成功后必须软重启&#xff0c;重新连接确认电机无干涉后相序测试 &#xff08;等待10s&#x…...

编程日记 2025/8/21 8:31:24

大学生创新创业项目管理系统设计——数据库实验九

本实验为自己设计完成&#xff0c;我当年数据库实验得了94分 目录 1.实验目的 2.实验内容和要求 3.实验步骤 4.实验心得 实验九 数据库设计 1.实验目的 掌握数据库设计的过程和方法。 2.实验内容和要求 &#xff08;35&#xff09;大学生创新创业项目管理系统设计 一…...

编程日记 2025/8/27 6:00:36