大家好，欢迎来到IT知识分享网。
**
Dhtmlx Gantt甘特图初学习—行高设置
由于boss要求使用Dhtmlx Gantt控件开发甘特图，所以下载研究了一下。
现在boss要求甘特图不同行实现自定义的行高，而该控件API中未找到相关实现，所以本人使用css修改，未完全成功。各位大牛可以看看我使用的方法，提些建议。
官网下载相关文件
初始化甘特图
@{
ViewBag.Title = "Home Page";
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/gantt/codebase/dhtmlxgantt.css" rel="stylesheet" />
<script src="~/gantt/codebase/dhtmlxgantt.js"></script>
<script src="~/gantt/codebase/locale/locale_cn.js"></script>
</head>
<body>
<div id="gantt_here" style='width:1000px; height:600px;'></div>
</body>
</html>
<script type="text/javascript">
var tasks = {
data: [
{ id: 1, text: "项目 #1", start_date: "2016-05-01", duration: 11, progress: 0.6, open: true },
{ id: 2, text: "项目 #2", start_date: "2016-05-01", duration: 11, progress: 1, open: true }
]
};
//设置行高 100
gantt.config.row_height = 100;
gantt.init("gantt_here");
gantt.parse(tasks);
</script>
效果如下（具体教程可见官网）：
下面加上个人写的样式修改代码：
@{
ViewBag.Title = "Home Page";
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/gantt/codebase/dhtmlxgantt.css" rel="stylesheet" />
<script src="~/gantt/codebase/dhtmlxgantt.js"></script>
<script src="~/gantt/codebase/locale/locale_cn.js"></script>
</head>
<body>
<div id="gantt_here" style='width:1000px; height:600px;'></div>
</body>
</html>
<script type="text/javascript">
var tasks = {
data: [
{ id: 1, text: "项目 #1", start_date: "2016-05-01", duration: 11, progress: 0.6, open: true },
{ id: 2, text: "项目 #2", start_date: "2016-05-01", duration: 11, progress: 1, open: true }
]
};
gantt.config.order_branch = true;
// 设置行高100
gantt.config.row_height = 100;
gantt.init("gantt_here");
gantt.parse(tasks);
// 获得左侧Grid Area节点
var es1 = document.getElementsByClassName("gantt_row gantt_row_task");
// 获得右侧Scales节点
var es2 = document.getElementsByClassName("gantt_task_row");
var es3 = document.getElementsByClassName("gantt_task_line");
keepHeight(es1[0], es2[0], es3[0], 50);
// 保持行高一致 参数：同行节点以及要设置的行高
function keepHeight(e1, e2, e3, height) {
e1.style.height = height + "px";
e1.style.lineHeight = height + "px";
e2.style.height = height + "px";
e2.style.lineHeight = height + "px";
e3.style.height = (height - 4) + "px";
e3.style.lineHeight = height-4 + "px";
}
</script>
效果如下：
可以看到此时，第一行与第二行的行高已经不一致了。
但是有个问题：
当选中第一行或者拖动第一行时，两行的行高又自动回复到100px，本人暂未找到解决办法，估计要修改源码才行。如果有看懂gantt源码的大牛，希望帮忙解决一下。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/24453.html
