dhtmlxGantt 之简单的页面样式调整

最新推荐文章于 2025-03-10 23:49:28 发布

一个有梦想的小白

最新推荐文章于 2025-03-10 23:49:28 发布

阅读量9.3k

点赞数 6

分类专栏： dhtmlxgantt 文章标签： gantt样式 gantt进度条颜色修改

本文链接：https://blog.csdn.net/weixin_42803027/article/details/83586996

版权

3 篇文章

订阅专栏

本文详细介绍了如何调整dhtmlxGantt甘特图的样式，包括左侧表格的字体颜色、大小，右侧任务条的颜色及进度条的样式修改。通过自定义CSS覆盖默认样式，实现甘特图界面的个性化设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

dhtmlxgantt 样式调整

最近需求中，要求我对之前开发的甘特图中的一些字体颜色进行调整;因为甘特图css名称过多，所以调起来不是很快，虽然有F12的帮助，所以在此记录下一些名称，希望以后在碰到的时候可以不用太麻烦。

在这里插入图片描述
如图所示，要对该字体进行调整的话，不用去dhtmlxgantt.css去改，至于为什么我就不多说了，在自己的页面中重写css覆盖就可以了。

.gantt_grid_head_cell{
		  font-size:14px;
		}

这个是第一行，各列头的字体样式。

 .gantt_tree_content, .gantt_tree_icon {
		   font-family: "微软雅黑";
		   height: 100%;
		   display: inline-block;
        }

这个是对表格中数据以及图片进行调整的样式。

在这里插入图片描述
这个是经过调整之后的样子，是不是很丑，但是请别介意，这个完全就是大家看的，是测试版本，方便看。

	.gantt_demo {
			border: 2px solid red;
			color: red;
			background: red;
		}

这个是条周边的线的样式以及颜色（红色的）；注意还需要在JS中加入以下代码才行：

gantt.templates.task_class = function (start, end, item) {
		return item.$level == 0 ? "gantt_demo" : ""
	};

.gantt_task_line{
		   background-color: #ffffff;
		}

这个是整个条的颜色修改。颜色为白色的。

你以为这就结束了，你错了，
在这里插入图片描述
看拖动之后可以显示进度，这个也需要改的，要不然，就会按照dhtmlxgantt.css中的颜色执行了。

.gantt_task_progress{
		 background-color: #000000;
		}

这个就是进度条的样式，颜色。

以上仅仅是一些基本的样式调整，以后我会随着需求的增加，改动的多少，对这篇样式进行不断填充的。本文为本人根据项目需求研究写出，也许有所不足，真诚的希望，有大牛能帮我纠正一下，我的错误，互相提高，以便以为可以分享更好的代码和技术给大家，携手在研发的道路上一去不复返。