javascript+css+xml 全选树(续)
对上一篇的javascript+css+xml 全选树 代码进行了整理和增加了一些功能，如：取得当前节点的路径，是否显示checkbox大家可以自己研究.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<Style>
/* .on
{
background:#5eeDBE url(images/menu_head_bg.gif) repeat-x;
text-decoration:none;
border: 1px solid #2a4dab;
font:bold 12px/22px "lucida Grande", verdana, lucida, Arial, helvetica, "宋体", sans-serif;
}*/
.list{margin:0;padding:0;}
.list ul
{
/*background:#5eeDBE url(images/menu_head_bg.gif) repeat-x;背景样式依次为：颜色，图片路径，横向重复*/
list-style-type:none;
margin:0,0,0,9;
padding:0;
padding-left:1px;
}
.list li
{
font:bold 12px/22px "lucida Grande", verdana, lucida, Arial, helvetica, "宋体", sans-serif;/*文字样式依次为：粗体 大小/行高 字族*/
list-style-type:none;
margin:0;
padding:0;
padding-left:12px;
cursor:hand;
background:#008080
}
.SPAN A:link {font-size:12px;text-decoration:none;color: #ffffff}
.SPAN A:visited {font-size:12px;text-decoration:none;color: #000080}
.SPAN A:active {font-size:12px;text-decoration: none;color: #ff8000}
.SPAN A:hover {font-size:12px;text-decoration:none;color: #ff8040;border: 2px solid #ff0000;/*边框颜色*/ }
</Style>
<script language='javascript'>
function LTree(xPath,oPath,cPath,pPath,mPath,dPath)
{
this.closeImgPath=cPath; //关闭图标
this.openImgPath=oPath; //打开图标
this.plusImgPath=pPath; //+号图标
this.minusImgPath=mPath; //-号图标
this.fileImgPath=dPath; //默认图标
this.xmlPath=xPath; //xml文件路径
this.getXmlObj=function()
{
var xmlDoc;
if(window.ActiveXObject)
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else
{
xmlDoc==document.implementation.createDocument("","",null);
}
//xmlDoc.async=false;
xmlDoc.load(this.xmlPath);
if(xmlDoc.parseError.errorCode!=0)
{
var xmlErr=xmlDoc.parseError;
alert("出错:"+xmlErr.reason);
}
return xmlDoc;
}
}
var str="";
LTree.prototype.tree=function(divid,bool)
{
var str="<div class=\"list\" id=\"menu1_child\">";
var xmlDoc=this.getXmlObj();
var root=xmlDoc.documentElement;
str+=this.getTreeString(root,bool);
str+="</div>";
document.getElementById(divid).innerHTML=str;
}
LTree.prototype.getTreeString=function(root,bool)
{
if(root.hasChildNodes)
{
var uid=root.getAttribute("Id")+"-1";
str+="<ul id=\""+uid+"\">"
for(var i=0;i<root.childNodes.length;i++)
{
var node=root.childNodes[i];
var id=node.getAttribute("Id");
var name=node.getAttribute("Name");
if(bool)
{ //显示checkbox
if(node.hasChildNodes)
{//父节点
str+="<li id=\"L"+id+"\"><img onclick=\"showMinusHide(this,'"+id+"-1')\" src=\""+minusImgPath+"\"/><img onclick=\"showImgHide(this,'"+id+"-1')\" src=\""+openImgPath+"\"/><input onclick=\"checkAll(this)\" type=\"checkbox\" id=\""+id+"\" /><SPAN class=\"span\" id=\"S"+id+"\" ondblclick=\"setNodeBgColor(this,'"+id+"-1')\"><a href=\"javascript:\">"+name+"</a></SPAN>"
LTree.prototype.getTreeString(node,bool)
str+="</li>";
}
else
{//子节点
str+="<li id=\"L"+id+"\" style=\"margin-left:26px;\" ><img src=\""+fileImgPath+"\"/><input type=\"checkbox\" id=\""+id+"\" /><SPAN class=\"span\" onclick=\"setNodeBgColor(this,'"+id+"')\" id=\"S"+id+"\" ><a href=\"javascript:\">"+name+"</a></SPAN></li>"
}
}
else
{//不显示checkbox
if(node.hasChildNodes)
{//父节点
str+="<li id=\"L"+id+"\"><img onclick=\"showMinusHide(this,'"+id+"-1')\" src=\""+minusImgPath+"\"/><img onclick=\"showImgHide(this,'"+id+"-1')\" src=\""+openImgPath+"\"/><SPAN class=\"span\" id=\"S"+id+"\" ondblclick=\"setNodeBgColor(this,'"+id+"-1')\"><a href=\"javascript:\">"+name+"</a></SPAN>"
LTree.prototype.getTreeString(node,bool)
str+="</li>";
}
else
{//子节点
str+="<li id=\"L"+id+"\" style=\"margin-left:26px;\" ><img src=\""+fileImgPath+"\"/><SPAN class=\"span\" onclick=\"setNodeBgColor(this,'"+id+"')\" id=\"S"+id+"\" ><a href=\"javascript:\">"+name+"</a></SPAN></li>"
}
}
}
str+="</ul>"
}
return str;
}
//打开全部
function showAll(divid,checkbox)
{
// checkbox=true 显示checkbox 否则：不显示checkbox
//var root=document.getElementById(divid).firstChild.firstChild.firstChild;//0级
var root=null;
if(checkbox)
{
root=document.getElementById(divid).firstChild.firstChild.firstChild.childNodes[4];//1级
}
else
{
root=document.getElementById(divid).firstChild.firstChild.firstChild.childNodes[3];//1级
}
getULNode(root,checkbox,true);
}
//关闭全部
function closeAll(divid,checkbox)
{
//var root=document.getElementById(divid).firstChild.firstChild.firstChild;//0级
var root;
if(checkbox)
{
root=document.getElementById(divid).firstChild.firstChild.firstChild.childNodes[4];//1级
}
else
{
root=document.getElementById(divid).firstChild.firstChild.firstChild.childNodes[3];//1级
}
getULNode(root,checkbox,false);
}
function getULNode(rootNode,checkbox,bool)
{
for(var i=0;i<rootNode.childNodes.length;i++)
{
if(rootNode.childNodes[i].hasChildNodes)
{
if(rootNode.childNodes[i].tagName=="UL")
{
if(bool)
{
openUL(rootNode.childNodes[i].previousSibling,rootNode.childNodes[i].id,checkbox);
}
else
{
closeUL(rootNode.childNodes[i].previousSibling,rootNode.childNodes[i].id,checkbox);
}
}
getULNode(rootNode.childNodes[i],checkbox,bool);
}
}
}
function closeUL(thisobj,id,checkbox)
{
var obj=document.getElementById(id);
if(obj!=null)
{
obj.style.display="none";
if(checkbox)
{
thisobj.previousSibling.previousSibling.setAttribute("src",closeImgPath);
thisobj.previousSibling.previousSibling.previousSibling.setAttribute("src",plusImgPath)
}
else
{
thisobj.previousSibling.previousSibling.setAttribute("src",closeImgPath);
thisobj.previousSibling.previousSibling.setAttribute("src",plusImgPath)
}
}
}
function openUL(thisobj,id,checkbox)
{
var obj=document.getElementById(id);
if(obj!=null)
{
obj.style.display="";
if(checkbox)
{
thisobj.previousSibling.previousSibling.setAttribute("src",openImgPath);
thisobj.previousSibling.previousSibling.previousSibling.setAttribute("src",minusImgPath)
}
else
{
thisobj.previousSibling.previousSibling.setAttribute("src",openImgPath);
thisobj.previousSibling.previousSibling.setAttribute("src",minusImgPath)
}
}
}
//checkbox 全选事件
function checkAll(e)
{
var bool=e.checked;
var childObj=document.getElementById(e.id+"-1");
setCheckBox(bool,childObj);
}
function setCheckBox(bool,chk)
{
if(chk!=null)
{
//alert(chk.childNodes.length);
if(chk.childNodes.length>0)
{
for(var i=0;i<chk.childNodes.length;i++)
{
//alert(chk.childNodes[i].type);
if(chk.childNodes[i].type=="checkbox")
{
chk.childNodes[i].setAttribute("checked",bool);
}
if(chk.childNodes[i].childNodes.length>0)
{
setCheckBox(bool,chk.childNodes[i]);
}
}
}
}
}
//设置节点背景颜色
function setNodeBgColor(e,id)
{
nodePath="";
nodePath=getNodePath(e);//取得当前节点的路径
alert(nodePath);
if(bgObj==null)
{
bgObj=e;
}
else
{
bgObj.style.background=""
bgObj=e;
}
bgObj.style.background="#00ffff"
}
//取当前节点的路径
var nodePath="";
function getNodePath(node)
{
getParentNodePath(node);
var ss="";
var t=nodePath.substring(0,nodePath.length-2).split('->');
for(var i=t.length-1;i>=0;i--)
{
ss+=t[i]+"->";
}
return ss.substring(0,nodePath.length-2);
}
function getParentNodePath(node)
{
nodePath+=node.innerText+"->";
var parNode=node.parentNode.parentNode.previousSibling;//span/li/ul/span
if(parNode!=null)
{
getParentNodePath(parNode)
}
}
//父节点事件
var bgObj=null;
function showhide(thisobj,id)
{
if(bgObj==null)
{
bgObj=thisobj;
}
else
{
bgObj.style.background=""
bgObj=thisobj;
}
bgObj.style.background="red"
var obj=document.getElementById(id);
if(obj.style.display=="")
{
obj.style.display="none";
thisobj.previousSibling.previousSibling.setAttribute("src",closeImgPath);
thisobj.previousSibling.previousSibling.previousSibling.setAttribute("src",plusImgPath)
}
else
{
obj.style.display="";
//thisobj.innerText="-"+thisobj.innerText.substring(1);
thisobj.previousSibling.previousSibling.setAttribute("src",openImgPath)
thisobj.previousSibling.previousSibling.previousSibling.setAttribute("src",minusImgPath)
}
}
//打开、关闭文件夹图标事件
function showImgHide(thisobj,id)
{
var obj=document.getElementById(id);
if(obj.style.display=="")
{
obj.style.display="none";
thisobj.setAttribute("src",closeImgPath);
thisobj.previousSibling.setAttribute("src",plusImgPath)
}
else
{
obj.style.display="";
thisobj.setAttribute("src",openImgPath)
thisobj.previousSibling.setAttribute("src",minusImgPath)
}
}
//+、－符号事件
function showMinusHide(thisobj,id)
{
var obj=document.getElementById(id);
if(obj.style.display=="")
{
obj.style.display="none";
thisobj.setAttribute("src",plusImgPath);
thisobj.nextSibling.setAttribute("src",closeImgPath)
}
else
{
obj.style.display="";
thisobj.setAttribute("src",minusImgPath)
thisobj.nextSibling.setAttribute("src",openImgPath)
}
}
//*******************************************************下面是调用***********************************************************************//
var closeImgPath="C:\\Documents and Settings\\kevin.long\\桌面\\Web\\books_close.gif"; //关闭图标
var openImgPath="C:\\Documents and Settings\\kevin.long\\桌面\\Web\\books_open.gif"; //打开图标
var plusImgPath="C:\\Documents and Settings\\kevin.long\\桌面\\Web\\plus.gif"; //+号图标
var minusImgPath="C:\\Documents and Settings\\kevin.long\\桌面\\Web\\minus.gif"; //-号图标
var fileImgPath="C:\\Documents and Settings\\kevin.long\\桌面\\Web\\icon_text.gif"; //默认图标
var xmlPath="C:\\Documents and Settings\\kevin.long\\桌面\\Web\\Tree.xml";
function Test()
{
//xPath,oPath,cPath,pPath,mPath,dPath
var tree=new LTree(xmlPath,openImgPath,closeImgPath,plusImgPath,minusImgPath,fileImgPath);
tree.tree("idmenu");
}
</script>
</head>
<body onload="Test()">
<input type="button" onclick="showAll('idmenu')" value="全部展開">
<input type="button" onclick="closeAll('idmenu')" value="全部關閉">
<input type="button" onclick="Test()" value="测试">
<input id="codeText" type="text" value="">
<div id="idmenu"></div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> <title>Untitled</title> <Style>
/* .on
{ background:#5eeDBE url(images/menu_head_bg.gif) repeat-x; text-decoration:none; border: 1px solid #2a4dab; font:bold 12px/22px "lucida Grande", verdana, lucida, Arial, helvetica, "宋体", sans-serif; }*/ .list{margin:0;padding:0;} .list ul { /*background:#5eeDBE url(images/menu_head_bg.gif) repeat-x;背景样式依次为：颜色，图片路径，横向重复*/ list-style-type:none; margin:0,0,0,9; padding:0; padding-left:1px; } .list li { font:bold 12px/22px "lucida Grande", verdana, lucida, Arial, helvetica, "宋体", sans-serif;/*文字样式依次为：粗体 大小/行高 字族*/ list-style-type:none; margin:0; padding:0; padding-left:12px; cursor:hand; background:#008080 } .SPAN A:link {font-size:12px;text-decoration:none;color: #ffffff} .SPAN A:visited {font-size:12px;text-decoration:none;color: #000080} .SPAN A:active {font-size:12px;text-decoration: none;color: #ff8000} .SPAN A:hover {font-size:12px;text-decoration:none;color: #ff8040;border: 2px solid #ff0000;/*边框颜色*/ } </Style> <script language='javascript'> function LTree(xPath,oPath,cPath,pPath,mPath,dPath) { this.closeImgPath=cPath; //关闭图标 this.openImgPath=oPath; //打开图标 this.plusImgPath=pPath; //+号图标 this.minusImgPath=mPath; //-号图标 this.fileImgPath=dPath; //默认图标 this.xmlPath=xPath; //xml文件路径 this.getXmlObj=function() { var xmlDoc; if(window.ActiveXObject) { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); } else { xmlDoc==document.implementation.createDocument("","",null); } //xmlDoc.async=false; xmlDoc.load(this.xmlPath); if(xmlDoc.parseError.errorCode!=0) { var xmlErr=xmlDoc.parseError; alert("出错:"+xmlErr.reason); } return xmlDoc; } } var str=""; LTree.prototype.tree=function(divid,bool) { var str="<div class=\"list\" id=\"menu1_child\">"; var xmlDoc=this.getXmlObj(); var root=xmlDoc.documentElement; str+=this.getTreeString(root,bool); str+="</div>"; document.getElementById(divid).innerHTML=str; } LTree.prototype.getTreeString=function(root,bool) { if(root.hasChildNodes) { var uid=root.getAttribute("Id")+"-1"; str+="<ul id=\""+uid+"\">" for(var i=0;i<root.childNodes.length;i++) { var node=root.childNodes[i]; var id=node.getAttribute("Id"); var name=node.getAttribute("Name"); if(bool) { //显示checkbox if(node.hasChildNodes) {//父节点 str+="<li id=\"L"+id+"\"><img onclick=\"showMinusHide(this,'"+id+"-1')\" src=\""+minusImgPath+"\"/><img onclick=\"showImgHide(this,'"+id+"-1')\" src=\""+openImgPath+"\"/><input onclick=\"checkAll(this)\" type=\"checkbox\" id=\""+id+"\" /><SPAN class=\"span\" id=\"S"+id+"\" ondblclick=\"setNodeBgColor(this,'"+id+"-1')\"><a href=\"javascript:\">"+name+"</a></SPAN>" LTree.prototype.getTreeString(node,bool) str+="</li>"; } else {//子节点 str+="<li id=\"L"+id+"\" style=\"margin-left:26px;\" ><img src=\""+fileImgPath+"\"/><input type=\"checkbox\" id=\""+id+"\" /><SPAN class=\"span\" onclick=\"setNodeBgColor(this,'"+id+"')\" id=\"S"+id+"\" ><a href=\"javascript:\">"+name+"</a></SPAN></li>" } } else {//不显示checkbox if(node.hasChildNodes) {//父节点 str+="<li id=\"L"+id+"\"><img onclick=\"showMinusHide(this,'"+id+"-1')\" src=\""+minusImgPath+"\"/><img onclick=\"showImgHide(this,'"+id+"-1')\" src=\""+openImgPath+"\"/><SPAN class=\"span\" id=\"S"+id+"\" ondblclick=\"setNodeBgColor(this,'"+id+"-1')\"><a href=\"javascript:\">"+name+"</a></SPAN>" LTree.prototype.getTreeString(node,bool) str+="</li>"; } else {//子节点 str+="<li id=\"L"+id+"\" style=\"margin-left:26px;\" ><img src=\""+fileImgPath+"\"/><SPAN class=\"span\" onclick=\"setNodeBgColor(this,'"+id+"')\" id=\"S"+id+"\" ><a href=\"javascript:\">"+name+"</a></SPAN></li>" } } } str+="</ul>" } return str; } //打开全部 function showAll(divid,checkbox) { // checkbox=true 显示checkbox 否则：不显示checkbox //var root=document.getElementById(divid).firstChild.firstChild.firstChild;//0级 var root=null; if(checkbox) { root=document.getElementById(divid).firstChild.firstChild.firstChild.childNodes[4];//1级 } else { root=document.getElementById(divid).firstChild.firstChild.firstChild.childNodes[3];//1级 } getULNode(root,checkbox,true); } //关闭全部 function closeAll(divid,checkbox) { //var root=document.getElementById(divid).firstChild.firstChild.firstChild;//0级 var root; if(checkbox) { root=document.getElementById(divid).firstChild.firstChild.firstChild.childNodes[4];//1级 } else { root=document.getElementById(divid).firstChild.firstChild.firstChild.childNodes[3];//1级 } getULNode(root,checkbox,false); } function getULNode(rootNode,checkbox,bool) { for(var i=0;i<rootNode.childNodes.length;i++) { if(rootNode.childNodes[i].hasChildNodes) { if(rootNode.childNodes[i].tagName=="UL") { if(bool) { openUL(rootNode.childNodes[i].previousSibling,rootNode.childNodes[i].id,checkbox); } else { closeUL(rootNode.childNodes[i].previousSibling,rootNode.childNodes[i].id,checkbox); } } getULNode(rootNode.childNodes[i],checkbox,bool); } } } function closeUL(thisobj,id,checkbox) { var obj=document.getElementById(id); if(obj!=null) { obj.style.display="none"; if(checkbox) { thisobj.previousSibling.previousSibling.setAttribute("src",closeImgPath); thisobj.previousSibling.previousSibling.previousSibling.setAttribute("src",plusImgPath) } else { thisobj.previousSibling.previousSibling.setAttribute("src",closeImgPath); thisobj.previousSibling.previousSibling.setAttribute("src",plusImgPath) } } } function openUL(thisobj,id,checkbox) { var obj=document.getElementById(id); if(obj!=null) { obj.style.display=""; if(checkbox) { thisobj.previousSibling.previousSibling.setAttribute("src",openImgPath); thisobj.previousSibling.previousSibling.previousSibling.setAttribute("src",minusImgPath) } else { thisobj.previousSibling.previousSibling.setAttribute("src",openImgPath); thisobj.previousSibling.previousSibling.setAttribute("src",minusImgPath) } } } //checkbox 全选事件 function checkAll(e) { var bool=e.checked; var childObj=document.getElementById(e.id+"-1"); setCheckBox(bool,childObj); } function setCheckBox(bool,chk) { if(chk!=null) { //alert(chk.childNodes.length); if(chk.childNodes.length>0) { for(var i=0;i<chk.childNodes.length;i++) { //alert(chk.childNodes[i].type); if(chk.childNodes[i].type=="checkbox") { chk.childNodes[i].setAttribute("checked",bool); } if(chk.childNodes[i].childNodes.length>0) { setCheckBox(bool,chk.childNodes[i]); } } } } } //设置节点背景颜色 function setNodeBgColor(e,id) { nodePath=""; nodePath=getNodePath(e);//取得当前节点的路径 alert(nodePath); if(bgObj==null) { bgObj=e; } else { bgObj.style.background="" bgObj=e; } bgObj.style.background="#00ffff" } //取当前节点的路径 var nodePath=""; function getNodePath(node) { getParentNodePath(node); var ss=""; var t=nodePath.substring(0,nodePath.length-2).split('->'); for(var i=t.length-1;i>=0;i--) { ss+=t[i]+"->"; } return ss.substring(0,nodePath.length-2); } function getParentNodePath(node) { nodePath+=node.innerText+"->"; var parNode=node.parentNode.parentNode.previousSibling;//span/li/ul/span if(parNode!=null) { getParentNodePath(parNode) } } //父节点事件 var bgObj=null; function showhide(thisobj,id) { if(bgObj==null) { bgObj=thisobj; } else { bgObj.style.background="" bgObj=thisobj; } bgObj.style.background="red" var obj=document.getElementById(id); if(obj.style.display=="") { obj.style.display="none"; thisobj.previousSibling.previousSibling.setAttribute("src",closeImgPath); thisobj.previousSibling.previousSibling.previousSibling.setAttribute("src",plusImgPath) } else { obj.style.display=""; //thisobj.innerText="-"+thisobj.innerText.substring(1); thisobj.previousSibling.previousSibling.setAttribute("src",openImgPath) thisobj.previousSibling.previousSibling.previousSibling.setAttribute("src",minusImgPath) } } //打开、关闭文件夹图标事件 function showImgHide(thisobj,id) { var obj=document.getElementById(id); if(obj.style.display=="") { obj.style.display="none"; thisobj.setAttribute("src",closeImgPath); thisobj.previousSibling.setAttribute("src",plusImgPath) } else { obj.style.display=""; thisobj.setAttribute("src",openImgPath) thisobj.previousSibling.setAttribute("src",minusImgPath) } } //+、－符号事件 function showMinusHide(thisobj,id) { var obj=document.getElementById(id); if(obj.style.display=="") { obj.style.display="none"; thisobj.setAttribute("src",plusImgPath); thisobj.nextSibling.setAttribute("src",closeImgPath) } else { obj.style.display=""; thisobj.setAttribute("src",minusImgPath) thisobj.nextSibling.setAttribute("src",openImgPath) } } //*******************************************************下面是调用***********************************************************************// var closeImgPath="C:\\Documents and Settings\\kevin.long\\桌面\\Web\\books_close.gif"; //关闭图标 var openImgPath="C:\\Documents and Settings\\kevin.long\\桌面\\Web\\books_open.gif"; //打开图标 var plusImgPath="C:\\Documents and Settings\\kevin.long\\桌面\\Web\\plus.gif"; //+号图标 var minusImgPath="C:\\Documents and Settings\\kevin.long\\桌面\\Web\\minus.gif"; //-号图标 var fileImgPath="C:\\Documents and Settings\\kevin.long\\桌面\\Web\\icon_text.gif"; //默认图标 var xmlPath="C:\\Documents and Settings\\kevin.long\\桌面\\Web\\Tree.xml"; function Test() { //xPath,oPath,cPath,pPath,mPath,dPath var tree=new LTree(xmlPath,openImgPath,closeImgPath,plusImgPath,minusImgPath,fileImgPath); tree.tree("idmenu"); } </script></head><body onload="Test()"><input type="button" onclick="showAll('idmenu')" value="全部展開"><input type="button" onclick="closeAll('idmenu')" value="全部關閉"><input type="button" onclick="Test()" value="测试"><input id="codeText" type="text" value=""><div id="idmenu"></div></body></html>