dhtmlxGantt 之简单的页面样式调整

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;
		}

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

离线写博客

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