[dhtmlxGantt]MilestoneMark-⾥程碑标识的交错显⽰
问题描述
dhtmlx 默认状况下， Milestone Mark是在最上⽅显⽰的，如果两个Milestone的时间距离⽐较短的话， 就有可能出现重叠的状况，导致看不清楚， 影响⽤户体验。
解决思路
如果可以让Milestone错开显⽰，就能解决这个问题了。
布局英文
也就是说如果第⼀个与第⼆个发⽣重叠的话， 可以将第⼆个的位置放在第⼆⾏。
第三个还是从第⼀⾏开始，如果与第⼀个还是发⽣重叠的话，判断是否与位于第⼆⾏中的第⼆个是否发
⽣重叠。
…………
具体算法
变量定义
allMilestones – 所有的milestone
currentMilestone - 当前milesten
currentMilestoneWidth - 当前milesten宽度
currentMilestoneLeft — 当前milesten距离左边的长度
nextMilestone - 下⼀个milesten
nextMilestoneWidth - 下⼀个milesten宽度
nextMilestoneLeft — 下⼀个milesten距离左边的长度
初始化
currentMilestone = 第⼀个milestone
currentMilestoneWidth = 第⼀个milesten宽度
currentMilestoneLeft= 第⼀个 milesten距离左边的长度
for(i=从第⼆个开始,i<=allMilestones.length;i++)
{
nextMilestone = allMilestones[i];
如果 nextMilestoneLeft - currentMilestoneLeft的绝对值⼤于 currentMilestoneWidth， 说明出现了重叠的状况，
- 在迭代判断在下⼀⾏是否会出现重叠， 知道找到没有重叠的那⼀⾏
否则的话， 就放在当前⾏
}cage
实际解决及代码
在实际状况中， 出现重叠的状况不是很多， 如果使⽤迭代代码的话会⽐较⿇烦，效率不⾼。
实际状况应该使⽤两⾏就可以解决这个问题， 两⾏不够， 可以三⾏或者四⾏， 也就是说， 遵循满意原则， 不⼀定要最优解。 以下的代码就基于两层来实现的。
function adjuctMarkerPosition(baPos){
english resumevar milestonMarksContent = $('.gantt_marker_content');
if(milestonMarksContent!=null&&milestonMarksContent.length>0)
{
var sCurLeft = milestonMarksContent[0].parentNode.style.left; //xxpx
var iCurWidth = milestonMarksContent[0].offtWidth;
var iCurLeft = dealWebUnit(sCurLeft);
for(var i=1;i<milestonMarksContent.length;i++)
{
var sNextLeft = milestonMarksContent[i].parentNode.style.left; //xxpx
mikadovar iNextWidth = milestonMarksContent[i].offtWidth;
var iNextLeft = dealWebUnit(sNextLeft);
if(iCurWidth>Math.abs(iNextLeft-iCurLeft))
{
var iTop = 23;
if(baPos!=null&&baPos>0)
{
iTop += baPos;
}
milestonMarksContent[i].p = iTop+"px";
//iCurLeft = iCurLeft;
}el{
iCurLeft = iNextLeft;
}
}
}
}
function dealWebUnit(value,subfix){赵建昆
var newvalue = "";
if(value!=null&&value.length>0)
{
var pureDigit = 0;
if(value.indexOf("px")>0)
{branch name
pureDigit = value.substr(0,value.indexOf("px"));
}el{
pureDigit = value;
}
if(pureDigit>0)
{
if(subfix!=null)
{
newvalue = pureDigit + subfix;
}el{
小学教师读书心得
laura story gracenewvalue = pureDigit;
}
figured}
}
return newvalue;
}
席慕容 青春解释⼀下：
dhtmlxGantt使⽤的是div来实现Milestone mark的效果， ⼀个div下⾯包含⼀个⼦的div，
外层的div定义位置，以及⼀条竖直的长线， 内层的div, 也就是class 是gantt_marker_content定义的是矩形⽅框的显⽰。
$(‘.gantt_marker_content’) 使⽤JQuery得到所有的矩形⽅框
milestonMarksContent[0].parentNode 得到外层的div
milestonMarksContent[0].parentNode.style.left 外层div距离左边的距离， 得到的是px 单位的数据。
milestonMarksContent[i].offtWidth 得到矩形⽅框的宽度，因为这个宽度是动态运算出来的， 所以需要使⽤offtWidth的⽅式获取dealWebUnit就是转换px 和 整型的数据
实现效果
