javascript+css+xml 全选树

vs2005 的TreeView树控件入门非常简单，花费很少时间就可以构造一颗树形目录来，是新手的不错选择，但是它缺少灵活性，要改变它的图标除了它本身的模板外，就有点麻烦了，还有它的点击回发事件，特别烦。如果选择父节点同时选择子节点，就很麻烦了，因为它的结构是div+table的，我们要扩展它也要花不少时间。我发现很多高手都没有用到它，都是自己写的，这样可以灵活扩展，和修改相关属性，下面是我用javascript+css+xml写的一颗树，只要xml文件的格式不变，你可以随便增加、删除目录，很容易就可以得到相应的树目录了，你可以在原有的基础上扩展更多的属性、和相关的操作。当然刚刚写出来的东西不是很好，还有BUG,没有时间测试，如果大家有什么建议或发现bug请提出来。大家一起讨论。

<!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

}

A:link {font-size:12px;text-decoration:none;color: #FFFFFF}

A:visited {font-size:12px;text-decoration:none;color: #FFFFFF}

A:active {font-size:12px;text-decoration: none;color: ##FFFFFF}

A:hover {font-size:12px;text-decoration:none;color: #ff00ff;border: 1px solid #2a4dab;/*边框颜色*/ }

</Style>

function GetName()

{

alert("88888");

}

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 show(thisobj)

{

alert(thisobj);

}

</script>

var xmlDoc;

function CreateXmlObj()

{

if(window.ActiveXObject)

{

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

}

else

{

xmlDoc==document.implementation.createDocument("","",null);

}

//xmlDoc.async=false;

xmlDoc.load(xmlPath);

if(xmlDoc.parseError.errorCode!=0)

{

var xmlErr=xmlDoc.parseError;

alert("出错:"+xmlErr.reason);

}

//父节点事件

var bgObj=null;

function showhide(thisobj,id)

{

if(bgObj==null)

{

bgObj=thisobj;

}

else

{

bgObj.style.background=""

bgObj=thisobj;

}

bgObj.style.background="red"

//alert(thisobj.outerHTML);

var obj=document.getElementById(id);

//alert(thisobj.previousSibling.previousSibling.getAttribute("src"));

if(obj.style.display=="")

{

obj.style.display="none";

//thisobj.innerText="+"+thisobj.innerText.substring(1);

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)

}

//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)

{

if(bgObj==null)

{

bgObj=e;

}

else

{

bgObj.style.background=""

bgObj=e;

}

bgObj.style.background="#804000"

}

var str="<div class=\"list\" id=\"menu1_child\" title=\"菜单功能区\">";

function CreateTreeNode(root)

{

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(node.hasChildNodes)

{//父节点

str+="<li id=\""+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 id=\"S"+id+"\" onclick=\"showhide(this,'"+id+"-1')\"><a >"+name+"</a></SPAN>"

CreateTreeNode(node)

str+="</li>";

}

else

{//子节点

str+="<li id=\""+id+"\" style=\"margin-left:18px;\" ><img src=\""+fileImgPath+"\"/><input type=\"checkbox\" id=\""+id+"\" /><a onclick=\"setNodeBgColor(this,'"+id+"')\" href=\"javascript:\">"+name+"</a></li>"

}

str+="</ul>"

// alert(root.childNodes.length);

}

//打开全部

function showAll()

{

//var root=document.getElementById("idmenu").firstChild.firstChild.firstChild;//0级

var root=document.getElementById("idmenu").firstChild.firstChild.firstChild.childNodes[4];//1级

getULNode(root,true);

}

//关闭全部

function closeAll()

{

//var root=document.getElementById("idmenu").firstChild.firstChild.firstChild;//0级

var root=document.getElementById("idmenu").firstChild.firstChild.firstChild.childNodes[4];//1级

getULNode(root,false);

}

function getULNode(rootNode,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);

}

else

{

closeUL(rootNode.childNodes[i].previousSibling,rootNode.childNodes[i].id);

}

getULNode(rootNode.childNodes[i],bool);

}

function closeUL(thisobj,id)

{

var obj=document.getElementById(id);

if(obj!=null)

{

obj.style.display="none";

thisobj.previousSibling.previousSibling.setAttribute("src",closeImgPath);

thisobj.previousSibling.previousSibling.previousSibling.setAttribute("src",plusImgPath)

}

function openUL(thisobj,id)

{

var obj=document.getElementById(id);

if(obj!=null)

{

obj.style.display="";

thisobj.previousSibling.previousSibling.setAttribute("src",openImgPath);

thisobj.previousSibling.previousSibling.previousSibling.setAttribute("src",minusImgPath)

}

function Test()

{

CreateXmlObj();

//alert(xmlDoc.documentElement.firstChild.getAttribute("Name"));

var root=xmlDoc.documentElement;

//alert(root.xml);

CreateTreeNode(root);

str+="</div>";

//alert(str);

document.getElementById("codeText").value=str

idmenu.innerHTML=str;

}

</script>

</head>

</body>

</html>

posted @ 2008-03-27 08:29 龍的傳人阅读(970) 评论(1) 编辑收藏举报

刷新页面返回顶部

javascript+css+xml 全选树

公告