2、TreeView的实现:
此部分参考了 梅花雪的TreeView。
TreeView.js
此部分参考了 梅花雪的TreeView。
TreeView.js
/*
设置TreeView样式
*/
function setTreeStyle()
{
var style = "<style>";
style += "DIV.zhTreeView DIV IMG{border: 0px solid #FFFFFF;} ";
style += "DIV.zhTreeView DIV SPAN IMG{border: 0px solid #FFFFFF;} ";
style += "DIV.zhTreeView DIV{ height: 20px;line-height: 20px;} ";
style += "DIV.zhTreeView SPAN{ vertical-align:top; font-size: 10pt; height: 20px; color: #D4D0C8; cursor: default;overflow:hidden;} ";
style += ".zhALink { color: #000000;text-decoration:none} ";
style += "</style>";
document.write( style );
}
/*
TreeView控件脚本
Author: zh
execRequestHandler: RequestHandler对象执行AJAX请求数据的函数名称,其参数为ID值
iconArray: 节点图标图片,
iconArray各元素说明:+└┌├
0: "|"
1: "├"
2: "└"
3: "+┌"
4: "+├"
5: "+└"
6: "-┌"
7: "-├"
8: "-└"
9: "folderopen" //展开时的图标
10: "folderclose" //收缩时的图标
11: 无子分类的图标
12: 空白图片
13: "+-"
14: "--";
targetFrame: 目录框架名称
colorMouseOver: OnMouseOver事件时的背景色
*/
function OnMouseOverHandler( obj,objSpan )
{
SetBackgroundColor( obj.MouseOverColor,objSpan );
}
/*
处理OnMouseOut事件
*/
function OnMouseOutHandler( objSpan )
{
SetBackgroundColor( "",objSpan );
}
/*
设置控件的背景颜色
*/
function SetBackgroundColor( colorBackground,objSpan )
{
var objStyle = objSpan.getAttribute( "style" );
//如果Style属性存在
if( objStyle != null && objStyle != undefined )
{
//设置背景颜色
objStyle.backgroundColor = colorBackground;
}
}
/*
处理双击展开或收缩节点事件
node: 双击的节点
*/
function ClickHandler ( node )
{
var bExpand = node.Expand;
if( bExpand ) //展开,将要执行的是收缩,将的有子节点设置为关闭
{
CollapseAllSubNodes( node );
}
else //收缩,将要执行的是展开
{
var level = eval( node.Level );
level += 1;
//如果有数据,则直接展开
if( !node.IsRefresh && node.hasChilds && level > 1 ) //没有数据,提取数据
{
//如果有子节点,创建一提示等待节点
waitNode = node.Tree.AppendNode( "正在加载数据,请稍候...","","tmpNode","",false,level,1,true,false,node );
node.appendChild( waitNode );
//设置父节点
node.ExecRequestHandler.parentNode = node;
node.ExecRequestHandler.strID = node.Tag;
node.IsRefresh = true;
//请求数据
node.ExecRequestHandler.RequestData();
}
else
{
ExpandNextNodes( node );
}
}
//设置当前节点状态
node.Expand = !bExpand;
setIndetiferIcon( node,!bExpand );
setExpandCollapseImage( node,bExpand );
}
/*
设置指定节点的标识图标
node: 欲设置图标的节点
bExpand:状态,true:展开,false:收缩
*/
setIndetiferIcon = function ( node,bExpand )
{
//获取node的img对象
var imgObject = document.getElementById( "img_" + node.Tag );
if( imgObject != null && imgObject != "undefined" )
{
if( bExpand )
{
imgObject.src = node.IconArrays[ 9 ];
}
else
{
imgObject.src = node.IconArrays[ 10 ];
}
}
node.Expand = bExpand;
}
/*
展开指定节点的下一级子节点
parentNode: 欲展开的节点
*/
ExpandNextNodes = function ( parentNode )
{
var node = null;
for( var i = 1; i < parentNode.childNodes.length; ++i )
{
node = parentNode.childNodes[i];
node.style.display = "";
}
}
/*
收缩指定节点的所有子节点
parentNode: 欲收缩的节点
*/
CollapseAllSubNodes = function ( parentNode )
{
var node = null;
var expand = null;
for( var i = 1; i < parentNode.childNodes.length; ++i )
{
node = parentNode.childNodes[i];
node.style.display = "NONE";
expand = node.getAttribute( "Expand" );
if( node.hasChilds == true && expand != null && expand != undefined )
{
//设置图标
setIndetiferIcon( node,false );
setExpandCollapseImage( node,true );
}
//递归调用
CollapseAllSubNodes( node );
}
}
/*
设置展开或收缩图片
node: 点击的节点
state: true:展开,false:收缩
*/
setExpandCollapseImage = function ( node,state )
{
var headerImage = document.getElementById( "header_img_" + node.Tag );
if( headerImage != null && headerImage != undefined )
{
if( !state ) //展开
{
headerImage.src = node.IconArrays[ node.Tree.getIcons( false,node.Location,node.Level,node.hasNext ) ];
}
else //收缩
{
headerImage.src = node.IconArrays[ node.Tree.getIcons( true,node.Location,node.Level,node.hasNext ) ];
}
}
}
function TreeView( execRequestHandler,iconArray,targetFrame,colorMouseOver )
{
this.execRequestHandler = execRequestHandler;
this.iconArray = iconArray;
this.targetFrame = targetFrame;
this.colorMouseOver = colorMouseOver
/*
添加节点到父容器
parentNode: 父节点容器
nodeName: 节点名称
urlText: 节点链接地址
id: 节点标识符
hasChilds: 当前节点是否还有子节点
displayStatus: 是否显示当前节点
nodeLevel: 当前节点级别
nodeLocation: 当前节点在当前级别的排序位置:1起始位置,2:中间位置,3:末尾位置
hasParent: 是否有父节点
hasNext: 当前节点是否还有后续数据
expand/collapse
*/
this.AppendNode = function( nodeName,urlText,id,displayStatus,hasChilds,nodeLevel,nodeLocation,hasParent,hasNext,parentNode )
{
//检查父节点
//parentNode = CheckParentNode( parentNode );
//创建节点
var newNode = document.createElement( "div" );
newNode.noWrap = "True";
newNode.id = "div_" + id; //节点ID标识符
newNode.Tag = id; //节点标识符,根据此属性值提取数据
newNode.style.display = displayStatus; //节点是否显示
newNode.setAttribute( "hasChilds",hasChilds ); //此节点是否有子分类,根据此值确定图标状态
newNode.setAttribute( "Expand",false ); //节点是否展开,当发生Click事件时根据此值确定节点是展开还是收缩
newNode.setAttribute( "Level",nodeLevel ); //节点级别
newNode.setAttribute( "ExecRequestHandler",execRequestHandler );
newNode.setAttribute( "IconArrays",iconArray );
newNode.setAttribute( "MouseOverColor",colorMouseOver );
newNode.setAttribute( "Location",nodeLocation );
newNode.setAttribute( "hasNext",hasNext );
newNode.setAttribute( "parent",parentNode );
newNode.setAttribute( "hasParent",hasParent ); //是否有父节点
newNode.setAttribute( "IsRefresh",false ); //是否已读取过子节点数据,如果已读取过,则不再读取
newNode.setAttribute( "Tree",this ); //对当前对象的引用
//newNode.setAttribute( "Location",nodeLocation );//节点位置
var strText = "<NOBR><span id="span_" + id + "" url="" + urlText + "" οnmοuseοver='OnMouseOverHandler( div_" + id + ",span_" + id + ")' οnmοuseοut='OnMouseOutHandler( span_" + id + ")' >";
if( nodeLevel > 1 )
{
strText += this.getSpaceIdentify( parentNode,nodeLevel );
}
var index = this.getIcons( hasChilds,nodeLocation,nodeLevel,hasNext );
if( hasChilds == true ) //有子节点
{
strText += "<img id="header_img_" + id + "" align="center" src="" + iconArray[ index ] + "" οnclick='ClickHandler(div_" + id + ")' >";
}
else //无子节点
{
strText += "<img id="header_img_" + id + "" align="center" src="" + iconArray[ index ] + "">";
}
strText += "<img id="img_" + id + "" align="center" src="" + iconArray[ this.getIndetiferIcon( hasChilds ) ] + "">";
strText += "<a href="" + urlText + "" target="" + targetFrame + "" class="zhALink">" + nodeName + "</a>";
strText += "</span>";
newNode.innerHTML = strText;
//添加到父节点
//parentNode.appendChild( parentNode );
//返回新节点
return newNode;
}
/*
检查父节点
*/
this.CheckParentNode = function( parentNode )
{
if( parentNode == null || parentNode == undefined )
{
var body = document.getElementById( "body" );
parentNode = document.createElement( "div" );
parentNode.setAttribute( "style","zhTreeView" );
}
return parentNode;
}
/*
获取从当前节点开始一直到顶级节点的前导图片
parentNode: 当前节点的父节点
nodeLevel: 当前节点级别
*/
this.getSpaceIdentify = function( parentNode,nodeLevel )
{
var result = "";
//如果当前节点是第一级,则无前导图片,直接返回
if( nodeLevel > 1 )
{
//检查当前节点的父节点是否为空
if( parentNode != null && parentNode != undefined )
{
//如果父节点有下一级节点
if( parentNode.hasNext )
{
result = "<img align="center" src="" + iconArray[0] + "">";
}
else
{
result = "<img align="center" src="" + iconArray[12] + "">";
}
//递归读取父节点
if( parentNode.parent != null && parentNode.parent != undefined )
{
result = this.getSpaceIdentify( parentNode.parent,parentNode.Level ) + result;
}
}
}
return result;
}
/*
处理OnMouseOver事件
*/
TreeView.OnMouseOverHandler = function ( obj )
{
this.SetBackgroundColor( obj,colorOnMouseOver );
}
/*
处理OnMouseOut事件
*/
TreeView.OnMouseOutHandler = function ( obj )
{
this.SetBackgroundColor( obj,"" );
}
/*
设置控件的背景颜色
*/
TreeView.SetBackgroundColor = function ( obj,colorBackground )
{
var objStyle = obj.getAttribute( "style" );
//如果Style属性存在
if( objStyle != null && objStyle != undefined )
{
//设置背景颜色
objStyle.backgroundColor = colorBackground;
}
}
/*
获取标识图标索引
*/
this.getIndetiferIcon = function ( hasChilds )
{
var index = 11;
if( hasChilds == true )
{
index = 10;
}
return index;
}
/*
获取节点的图标
hasChilds: 是否有子分类
location: 节点位置
nodeLevel: 当前节点级别
hasNext: 当前节点后是否还有同级数据
*/
this.getIcons = function ( hasChilds,location,nodeLevel,hasNext )
{
var index = 7; //默认为"-├"
if( hasChilds == true )
{
switch( location )
{
case 1:
if( nodeLevel == 1 )
{
if( hasNext )
{
index = 3;
}
else
{
index = 13;
}
}
else
index = 4;
break;
case 2:
index = 4;
break;
case 3:
index = 5;
break;
}
}
else
{
switch( location )
{
case 1:
if( nodeLevel == 1 )
{
if( hasNext )
{
index = 6;;
}
else
{
index = 14;
}
}
else
return 7;
break;
case 2:
index = 7;
break;
case 3:
index = 8;
break;
}
}
return index;
}
} // end TreeView
设置TreeView样式
*/
function setTreeStyle()
{
var style = "<style>";
style += "DIV.zhTreeView DIV IMG{border: 0px solid #FFFFFF;} ";
style += "DIV.zhTreeView DIV SPAN IMG{border: 0px solid #FFFFFF;} ";
style += "DIV.zhTreeView DIV{ height: 20px;line-height: 20px;} ";
style += "DIV.zhTreeView SPAN{ vertical-align:top; font-size: 10pt; height: 20px; color: #D4D0C8; cursor: default;overflow:hidden;} ";
style += ".zhALink { color: #000000;text-decoration:none} ";
style += "</style>";
document.write( style );
}
/*
TreeView控件脚本
Author: zh
execRequestHandler: RequestHandler对象执行AJAX请求数据的函数名称,其参数为ID值
iconArray: 节点图标图片,
iconArray各元素说明:+└┌├
0: "|"
1: "├"
2: "└"
3: "+┌"
4: "+├"
5: "+└"
6: "-┌"
7: "-├"
8: "-└"
9: "folderopen" //展开时的图标
10: "folderclose" //收缩时的图标
11: 无子分类的图标
12: 空白图片
13: "+-"
14: "--";
targetFrame: 目录框架名称
colorMouseOver: OnMouseOver事件时的背景色
*/
function OnMouseOverHandler( obj,objSpan )
{
SetBackgroundColor( obj.MouseOverColor,objSpan );
}
/*
处理OnMouseOut事件
*/
function OnMouseOutHandler( objSpan )
{
SetBackgroundColor( "",objSpan );
}
/*
设置控件的背景颜色
*/
function SetBackgroundColor( colorBackground,objSpan )
{
var objStyle = objSpan.getAttribute( "style" );
//如果Style属性存在
if( objStyle != null && objStyle != undefined )
{
//设置背景颜色
objStyle.backgroundColor = colorBackground;
}
}
/*
处理双击展开或收缩节点事件
node: 双击的节点
*/
function ClickHandler ( node )
{
var bExpand = node.Expand;
if( bExpand ) //展开,将要执行的是收缩,将的有子节点设置为关闭
{
CollapseAllSubNodes( node );
}
else //收缩,将要执行的是展开
{
var level = eval( node.Level );
level += 1;
//如果有数据,则直接展开
if( !node.IsRefresh && node.hasChilds && level > 1 ) //没有数据,提取数据
{
//如果有子节点,创建一提示等待节点
waitNode = node.Tree.AppendNode( "正在加载数据,请稍候...","","tmpNode","",false,level,1,true,false,node );
node.appendChild( waitNode );
//设置父节点
node.ExecRequestHandler.parentNode = node;
node.ExecRequestHandler.strID = node.Tag;
node.IsRefresh = true;
//请求数据
node.ExecRequestHandler.RequestData();
}
else
{
ExpandNextNodes( node );
}
}
//设置当前节点状态
node.Expand = !bExpand;
setIndetiferIcon( node,!bExpand );
setExpandCollapseImage( node,bExpand );
}
/*
设置指定节点的标识图标
node: 欲设置图标的节点
bExpand:状态,true:展开,false:收缩
*/
setIndetiferIcon = function ( node,bExpand )
{
//获取node的img对象
var imgObject = document.getElementById( "img_" + node.Tag );
if( imgObject != null && imgObject != "undefined" )
{
if( bExpand )
{
imgObject.src = node.IconArrays[ 9 ];
}
else
{
imgObject.src = node.IconArrays[ 10 ];
}
}
node.Expand = bExpand;
}
/*
展开指定节点的下一级子节点
parentNode: 欲展开的节点
*/
ExpandNextNodes = function ( parentNode )
{
var node = null;
for( var i = 1; i < parentNode.childNodes.length; ++i )
{
node = parentNode.childNodes[i];
node.style.display = "";
}
}
/*
收缩指定节点的所有子节点
parentNode: 欲收缩的节点
*/
CollapseAllSubNodes = function ( parentNode )
{
var node = null;
var expand = null;
for( var i = 1; i < parentNode.childNodes.length; ++i )
{
node = parentNode.childNodes[i];
node.style.display = "NONE";
expand = node.getAttribute( "Expand" );
if( node.hasChilds == true && expand != null && expand != undefined )
{
//设置图标
setIndetiferIcon( node,false );
setExpandCollapseImage( node,true );
}
//递归调用
CollapseAllSubNodes( node );
}
}
/*
设置展开或收缩图片
node: 点击的节点
state: true:展开,false:收缩
*/
setExpandCollapseImage = function ( node,state )
{
var headerImage = document.getElementById( "header_img_" + node.Tag );
if( headerImage != null && headerImage != undefined )
{
if( !state ) //展开
{
headerImage.src = node.IconArrays[ node.Tree.getIcons( false,node.Location,node.Level,node.hasNext ) ];
}
else //收缩
{
headerImage.src = node.IconArrays[ node.Tree.getIcons( true,node.Location,node.Level,node.hasNext ) ];
}
}
}
function TreeView( execRequestHandler,iconArray,targetFrame,colorMouseOver )
{
this.execRequestHandler = execRequestHandler;
this.iconArray = iconArray;
this.targetFrame = targetFrame;
this.colorMouseOver = colorMouseOver
/*
添加节点到父容器
parentNode: 父节点容器
nodeName: 节点名称
urlText: 节点链接地址
id: 节点标识符
hasChilds: 当前节点是否还有子节点
displayStatus: 是否显示当前节点
nodeLevel: 当前节点级别
nodeLocation: 当前节点在当前级别的排序位置:1起始位置,2:中间位置,3:末尾位置
hasParent: 是否有父节点
hasNext: 当前节点是否还有后续数据
expand/collapse
*/
this.AppendNode = function( nodeName,urlText,id,displayStatus,hasChilds,nodeLevel,nodeLocation,hasParent,hasNext,parentNode )
{
//检查父节点
//parentNode = CheckParentNode( parentNode );
//创建节点
var newNode = document.createElement( "div" );
newNode.noWrap = "True";
newNode.id = "div_" + id; //节点ID标识符
newNode.Tag = id; //节点标识符,根据此属性值提取数据
newNode.style.display = displayStatus; //节点是否显示
newNode.setAttribute( "hasChilds",hasChilds ); //此节点是否有子分类,根据此值确定图标状态
newNode.setAttribute( "Expand",false ); //节点是否展开,当发生Click事件时根据此值确定节点是展开还是收缩
newNode.setAttribute( "Level",nodeLevel ); //节点级别
newNode.setAttribute( "ExecRequestHandler",execRequestHandler );
newNode.setAttribute( "IconArrays",iconArray );
newNode.setAttribute( "MouseOverColor",colorMouseOver );
newNode.setAttribute( "Location",nodeLocation );
newNode.setAttribute( "hasNext",hasNext );
newNode.setAttribute( "parent",parentNode );
newNode.setAttribute( "hasParent",hasParent ); //是否有父节点
newNode.setAttribute( "IsRefresh",false ); //是否已读取过子节点数据,如果已读取过,则不再读取
newNode.setAttribute( "Tree",this ); //对当前对象的引用
//newNode.setAttribute( "Location",nodeLocation );//节点位置
var strText = "<NOBR><span id="span_" + id + "" url="" + urlText + "" οnmοuseοver='OnMouseOverHandler( div_" + id + ",span_" + id + ")' οnmοuseοut='OnMouseOutHandler( span_" + id + ")' >";
if( nodeLevel > 1 )
{
strText += this.getSpaceIdentify( parentNode,nodeLevel );
}
var index = this.getIcons( hasChilds,nodeLocation,nodeLevel,hasNext );
if( hasChilds == true ) //有子节点
{
strText += "<img id="header_img_" + id + "" align="center" src="" + iconArray[ index ] + "" οnclick='ClickHandler(div_" + id + ")' >";
}
else //无子节点
{
strText += "<img id="header_img_" + id + "" align="center" src="" + iconArray[ index ] + "">";
}
strText += "<img id="img_" + id + "" align="center" src="" + iconArray[ this.getIndetiferIcon( hasChilds ) ] + "">";
strText += "<a href="" + urlText + "" target="" + targetFrame + "" class="zhALink">" + nodeName + "</a>";
strText += "</span>";
newNode.innerHTML = strText;
//添加到父节点
//parentNode.appendChild( parentNode );
//返回新节点
return newNode;
}
/*
检查父节点
*/
this.CheckParentNode = function( parentNode )
{
if( parentNode == null || parentNode == undefined )
{
var body = document.getElementById( "body" );
parentNode = document.createElement( "div" );
parentNode.setAttribute( "style","zhTreeView" );
}
return parentNode;
}
/*
获取从当前节点开始一直到顶级节点的前导图片
parentNode: 当前节点的父节点
nodeLevel: 当前节点级别
*/
this.getSpaceIdentify = function( parentNode,nodeLevel )
{
var result = "";
//如果当前节点是第一级,则无前导图片,直接返回
if( nodeLevel > 1 )
{
//检查当前节点的父节点是否为空
if( parentNode != null && parentNode != undefined )
{
//如果父节点有下一级节点
if( parentNode.hasNext )
{
result = "<img align="center" src="" + iconArray[0] + "">";
}
else
{
result = "<img align="center" src="" + iconArray[12] + "">";
}
//递归读取父节点
if( parentNode.parent != null && parentNode.parent != undefined )
{
result = this.getSpaceIdentify( parentNode.parent,parentNode.Level ) + result;
}
}
}
return result;
}
/*
处理OnMouseOver事件
*/
TreeView.OnMouseOverHandler = function ( obj )
{
this.SetBackgroundColor( obj,colorOnMouseOver );
}
/*
处理OnMouseOut事件
*/
TreeView.OnMouseOutHandler = function ( obj )
{
this.SetBackgroundColor( obj,"" );
}
/*
设置控件的背景颜色
*/
TreeView.SetBackgroundColor = function ( obj,colorBackground )
{
var objStyle = obj.getAttribute( "style" );
//如果Style属性存在
if( objStyle != null && objStyle != undefined )
{
//设置背景颜色
objStyle.backgroundColor = colorBackground;
}
}
/*
获取标识图标索引
*/
this.getIndetiferIcon = function ( hasChilds )
{
var index = 11;
if( hasChilds == true )
{
index = 10;
}
return index;
}
/*
获取节点的图标
hasChilds: 是否有子分类
location: 节点位置
nodeLevel: 当前节点级别
hasNext: 当前节点后是否还有同级数据
*/
this.getIcons = function ( hasChilds,location,nodeLevel,hasNext )
{
var index = 7; //默认为"-├"
if( hasChilds == true )
{
switch( location )
{
case 1:
if( nodeLevel == 1 )
{
if( hasNext )
{
index = 3;
}
else
{
index = 13;
}
}
else
index = 4;
break;
case 2:
index = 4;
break;
case 3:
index = 5;
break;
}
}
else
{
switch( location )
{
case 1:
if( nodeLevel == 1 )
{
if( hasNext )
{
index = 6;;
}
else
{
index = 14;
}
}
else
return 7;
break;
case 2:
index = 7;
break;
case 3:
index = 8;
break;
}
}
return index;
}
} // end TreeView