上一篇,
一个树控件的实现(1)UI的展现 我们已经看到一个树控件的样子,这节我们要看看如何来实现树控件的javascript
其实一个导航树,需要的脚本非常有限,在以后写选择树的时候javascript 可能要复杂一点,好我们一切为了简单,从简单开始把
首先我们还是要对HTML做一些改动 ,其实改动非常少,就是要给Node的每个元素加上一个ID
注:代码的样式有点问题啊,注释的颜色 ,
我们来看一个Node把,基本上每个Node都要改,并且给一些图片加上了onmouseover,和onmouseout,onclick事件
<!--我们来分析一个Node-->
<li>
<div id="tvAppSubMenu_1" ><!--div是node的容器,ID为=TreeViewID+NodeIndex-->
<!--每个元素都有NodeID延伸开的唯一表示如NodeID+"_cimg"->
<img id="tvAppSubMenu_1_cimg" src="/Images/TreeView/s.gif" class="bbit-tree-arrow bbit-tree-arrow-plus"/>
<a href="javascript:void(0)" onclick="javascript:TreeNode_Click($('tvAppSubMenu_1'),{id:'tvAppSubMenu_1',text:'菜单',value:'',url:'testpage.aspx',target:'',tooltip:''})>
<img onclick="javascript:OnTreeArrowClick(this,$('tvAppSubMenu_1_ul'),$('tvAppSubMenu_1_pimg'));"
onmouseout="javascript:OnTreeArrowMouseOut(this);"
onmouseover="javascript:OnTreeArrowMouseOver(this); class="bbit-tree-folder" src="/Images/TreeView/s.gif" />
<span>菜单1</span>
</a>
</div>
<!--这里是子节点-->
<ul id="tvAppSubMenu_1_ul">
此处的内容省略
</ul>
</li>
好了Javascript 开始了其实需要写的函数非常之少
function $()
{
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}
function toggle(element)
{
if (!(element = $(element))) return;
if(element.style.display =="none")
{
element.style.display ="";
}
else
{
element.style.display ="none";
}
}
function hasClassName(element,className)
{
if (!(element = $(element))) return;
var elementClassName = element.className;
return (elementClassName.length > 0 && (elementClassName == className ||
new RegExp("(^|\\s)" + className + "(\\s|$)").test(elementClassName)));
}
function addClassName(element, className) {
if (!(element = $(element))) return;
if (!hasClassName(element,className))
element.className += (element.className ? ' ' : '') + className;
return element;
}
function removeClassName(element, className) {
if (!(element = $(element))) return;
element.className = element.className.replace(
new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ').strip();
return element;
}
//+,-号的变化效果
function OnTreeArrowMouseOver(arrow)
{
if(hasClassName(arrow,"bbit-tree-arrow-plus"))
{
removeClassName(arrow,"bbit-tree-arrow-plus");
addClassName(arrow,"bbit-tree-arrow-plus-over");
}
if(hasClassName(arrow,"bbit-tree-arrow-minus"))
{
removeClassName(arrow,"bbit-tree-arrow-minus");
addClassName(arrow,"bbit-tree-arrow-minus-over");
}
}
//+,-号的变化效果
function OnTreeArrowMouseOut(arrow)
{
if(hasClassName(arrow,"bbit-tree-arrow-plus-over"))
{
removeClassName(arrow,"bbit-tree-arrow-plus-over");
addClassName(arrow,"bbit-tree-arrow-plus");
}
if(hasClassName(arrow,"bbit-tree-arrow-minus-over"))
{
removeClassName(arrow,"bbit-tree-arrow-minus-over");
addClassName(arrow,"bbit-tree-arrow-minus");
}
}
//展开和收缩子元素
function OnTreeArrowClick(arrow,elobj,pimg)
{
if(hasClassName(arrow,"bbit-tree-arrow-plus-over") || hasClassName(arrow,"bbit-tree-arrow-plus") )
{
removeClassName(arrow,"bbit-tree-arrow-plus-over");
removeClassName(arrow,"bbit-tree-arrow-plus");
addClassName(arrow,"bbit-tree-arrow-minus");
}
else if(hasClassName(arrow,"bbit-tree-arrow-minus-over") || hasClassName(arrow,"bbit-tree-minus-plus"))
{
removeClassName(arrow,"bbit-tree-arrow-minus-over");
removeClassName(arrow,"bbit-tree-arrow-minus");
addClassName(arrow,"bbit-tree-arrow-plus");
}
if(hasClassName(pimg,"bbit-tree-folder"))
{
removeClassName(pimg,"bbit-tree-folder");
addClassName(pimg,"bbit-tree-folderopen");
}
else if(hasClassName(pimg,"bbit-tree-folderopen"))
{
removeClassName(pimg,"bbit-tree-folderopen");
addClassName(pimg,"bbit-tree-folder");
}
toggle(elobj);;
}
function TreeNode_ExpandToggle(node)
{
var nodeul = $(node.id+"_ul");
var pimg = $(node.id+"_pimg");
if(nodeul !=null && pimg !=null)
{
OnTreeArrowClick(node.id+"_cimg",nodeul,pimg);
}
}
//需要实现的函数,可以从arg中获取到说需要到节点的数据
//,现有代码实现点击node如果包含子元素则展开/收缩子元素
function TreeNode_Click(sender,arg)
{
if(sender.HasChilds =="true")
{
TreeNode_ExpandToggle(sender);
}
}
好了定义了基本的函数,还有就是前面HTML 就需要用到onmouseover,onmouseout,TreeNode_Click 等
其中的TreeNode_Click 需要实现,如需要获取Url直接打开,或者想获取value 做其他操作
至此导航树 的前台代码已经完毕了。下节我们一起来完成服务器代码的编写
预定
一个树控件的实现(3)编写一个ASP.Net 导航树TreeView