-
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>
-
相关阅读:
【刷题】LOJ 6038 「雅礼集训 2017 Day5」远行
【刷题】BZOJ 4650 [Noi2016]优秀的拆分
【刷题】BZOJ 4566 [Haoi2016]找相同字符
【刷题】BZOJ 3238 [Ahoi2013]差异
微信公众号_订阅号_被动回复用户消息
艺术模板 art-template-web
AJAX_违反了同源策略_就是"跨域"——jsonp 和 cors
Ajax_简介： 异步的 JS 和 XML_原生写 ajax 分析其原理_jquery_ajax_art-template
Node.js_express_临时会话对象 session
BOM 浏览器对象模型_XMLHttpRequest 对象
-
原文地址：https://www.cnblogs.com/jacklong/p/1127293.html
Copyright © 2020-2023
润新知