今天完成了对菜单输出部分的重构实现,就是怎么样把我们的JS类变成能看到的实实在在的树。这个步骤虽然不是很难,不过很多细微的东西还是值得注意的。具体输出HTML代码的结构可以参看(1)中的图示,而我们的重点是讲讲为TreeView显示正确的层次结构图标。
由于我开始说了,希望树的UI逻辑有比较高的内聚性,所以使用了一个可以递归的UI层次结构。我们使用一个TABLE元素来作为树的一个Level的容器,每个TABLE中的一个TR作为一个TreeNode的显示元素。TR又分为两个TD,第一个TD放Hierarchy图标;第二个TD中放TreeNode的具体内容,包括Image、CheckBox和Span(文字放Span中)。
虽然贴代码不是写文章的好习惯,不过我觉得参照代码来说,还是更容易理解的。
TreeNodeBase.prototype.Render = function(doc)
{
var tr = doc.createElement('TR');
tr.Comment = 'TreeNode';
tr.Object = this;
this.m_Element = tr;
var tdOpIcon = doc.createElement('TD');
tr.appendChild(tdOpIcon);
var opImg = doc.createElement('IMG');
tr.OpIcon = opImg;
opImg.src = TreeStyle.OpIcon(this.GetOpIconName());
tdOpIcon.appendChild(opImg);
var tdContent = doc.createElement('TD');
tr.appendChild(tdContent);
tdContent.noWrap = 'noWrap';
var hasCheckBox = this.Attributes('HasCheckBox');
if ( hasCheckBox )
{
var input = doc.createElement('INPUT');
input.type = 'checkbox';
input.onfocus = function(){ FindParentElement(this, 'TD').focus(); };
tr.CheckBox = input;
tdContent.appendChild(input);
}
var icon = doc.createElement('IMG');
icon.src = TreeStyle.Icon(this.m_IconPath);
tdContent.appendChild(icon);
tr.Icon = icon;
var span = doc.createElement('SPAN');
span.noWrap = 'nowrap';
var textIndent = this.Attributes('TextIndent');
if ( textIndent > 0 )
{
indent = doc.createElement('SPAN');
indent.style.width = textIndent;
tdContent.appendChild(indent);
}
tdContent.appendChild(span);
span.innerText = this.m_Text;
tr.Content = span;
return tr;
};
</ script >
我之前说过,菜单的UI元素都在TreeNodeBase这个类中负责生成,事件处理放在TreeNode中,所以这里我们只关注UI呈现问题。doc参数其实就是document,写在这里是为了防止在popup中使用时可能出问题,因为只有来自同一个document对象创建的HTML对象才能append到一起。tr.Object=this;和this.m_Element=tr;是用来建立脚本对象和DHTML对象的双向快捷引用,不过这里有一个IE内存泄露潜在问题(我前面的随笔有讲),怎么办?在Dispose中处理就行了。后面的就比较按部就班了,OpIcon是表示Hierarchy的TreeView操作图标,Icon是内容中的图标,CheckBox是一个Optional的条目,最后是用Span括起来的TreeNode的文本。
{
if ( this .m_Element )
{
this .m_Element.clearAttributes();
this .m_Element = null ;
}
};
接下来说TreeView呈现中比较麻烦的OpIcon问题,就是上面代码中的:
由于使用了TABLE嵌套,同级菜单条目之间的连接变得非常的容易处理。就只有两种情况,对于有子菜单的TreeNode,如果不是该Level上最后一个Node,则显示一个"|"线,如果是最后一个Node,则什么都不用显示。然后每个OpIcon就对应于每个Node(一一对应),我们知道就是那些什么"+"、"-"、"|"和"|-"一类的东西了。对于普通Level上的OpIcon是比较容易处理的,可是对于Root那个Level,还需要做很多的特殊处理,以优化其显示。获取节点OpIcon图标的代码如下:
TreeNodeBase.prototype.GetOpIconName = function()
{
var nodeCount = this.m_Tree.m_Nodes.length;
if ( ( nodeCount > 1 || this.m_IsLazyLoad ) && !this.IsLastNode() )
{
if ( !this.m_ChildTree )
{
if ( this.IsFirstNode() && this.m_Tree.m_ParentNode == null )
{
return 'TopLine';
}
else
{
return 'MiddleCrossLine';
}
}
else
{
if ( this.m_IsChildExpanded )
{
if ( this.IsFirstNode() && this.m_Tree.m_ParentNode == null )
{
return 'TopMinus';
}
else
{
return 'MiddleMinus';
}
}
else
{
if ( this.IsFirstNode() && this.m_Tree.m_ParentNode == null )
{
return 'TopPlus';
}
else
{
return 'MiddlePlus';
}
}
}
}
else
{
if ( !this.m_ChildTree )
{
if ( this.IsFirstNode() && this.m_Tree.m_ParentNode == null )
{
return 'SingleNode';
}
else
{
return 'BottomLine';
}
}
else
{
if ( this.m_IsChildExpanded )
{
if ( this.IsFirstNode() && this.m_Tree.m_ParentNode == null )
{
return 'SingleMinus';
}
else
{
return 'BottomMinus';
}
}
else
{
if ( this.IsFirstNode() && this.m_Tree.m_ParentNode == null )
{
return'SinglePlus';
}
else
{
return 'BottomPlus';
}
}
}
}
return '';
};
</ script >
从上面的代码可以看出,判断节点在Level是IsFirstNode还是IsLastNode是非常重要的哦,虽然这两个方法都简单到只有一行代码 。TreeStyle.OpIcon是一个用于支持不同风格OpIcon图标的静态方法。
{
return 'Skins / default / ' + imageName + '.gif';
};
附上各中TreeView呈现的外观样式:
to be continued . . .