<HTML>
<HEAD>
<TITLE> emu's test of simple tree</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkSelect(){
var elm = event.srcElement;
checkChildrenRecurve(elm);
checkRootRecurve(document.getElementById("root"));
}
function checkChildrenRecurve(elm){
var li = elm.parentNode;
var ul = li.lastChild;
if (ul.tagName != "UL") return;
var lis = ul.children;
for (var i=0;i<lis.length;i++){
lis[i].firstChild.checked=elm.checked;
checkChildrenRecurve(lis[i].firstChild)
}
}
function checkRootRecurve(ul){
if (ul.tagName != "UL") {
ul.parentNode.firstChild.allChecked = ul.parentNode.firstChild.checked;
ul.parentNode.firstChild.allUnChecked = !ul.parentNode.firstChild.checked;
return;
}
var lis = ul.children;
var allChecked = true;
var allUnChecked = true;
for (var i=0;i<lis.length;i++){
checkRootRecurve(lis[i].lastChild)
allChecked = allChecked && lis[i].firstChild.checked && lis[i].firstChild.allChecked;
allUnChecked = allUnChecked && !lis[i].firstChild.checked && lis[i].firstChild.allUnChecked;
}
ul.parentNode.firstChild.allChecked=allChecked;
ul.parentNode.firstChild.allUnChecked=allUnChecked;
if (allChecked || allUnChecked){
ul.parentNode.firstChild.checked=allChecked;
ul.parentNode.firstChild.style.backgroundColor="white";
}else{
ul.parentNode.firstChild.style.backgroundColor="gray";
ul.parentNode.firstChild.checked=true; }
}function init(){
var elms = document.getElementsByTagName("INPUT");
for (var i=0;i<elms.length;i++)
elms[i].onclick=checkSelect;
}
//-->
</SCRIPT>
</HEAD><BODY onload="init()">
<div>
<input type=checkbox>
<UL id=root>
<LI><input type=checkbox>
<UL>
<LI><input type=checkbox>
<UL>
<LI><input type=checkbox>
<LI><input type=checkbox>
</UL>
<LI><input type=checkbox>
<UL>
<LI><input type=checkbox>
<LI><input type=checkbox>
</UL>
</UL>
<LI><input type=checkbox>
<UL>
<LI><input type=checkbox>
<UL>
<LI><input type=checkbox>
<LI><input type=checkbox>
</UL>
<LI><input type=checkbox>
<UL>
<LI><input type=checkbox>
<LI><input type=checkbox>
</UL>
</UL>
</UL>
</div>
</BODY>
</HTML>
<%@ Page Language="C#" debug="true"%>
<script runat="server">
</script>
<html>
<head></head>
<body>
<script type="text/javascript">
if(typeof(HTMLElement)!="undefined")HTMLElement.prototype.getNode=function(isPre){
var o=null;
if(isPre){
o=this.previousSibling;
while(o&&o.nodeType!=1)o=o.previousSibling;
}
else{
o=this.nextSibling;
while(o&&o.nodeType!=1)o=o.nextSibling;
}
return o;
}document.onclick=function(e){
var e=e||event;
var o=e.srcElement||e.target;
if(o.type=="checkbox"){
// td tr tbody table
var tb=o.parentNode.parentNode.parentNode.parentNode;
var div=document.all?tb.nextSibling:tb.getNode();
if(div&&div.tagName=="DIV"){
var cbs=div.getElementsByTagName("input");//子checkbox
for(var i=0;i<cbs.length;i++)cbs[i].checked=o.checked;
}
//遍历父checkbox
var p=tb.parentNode;
p=p?(document.all?p.previousSibling:p.getNode(true)):null;
while(p&&p.tagName=="TABLE"){
p.getElementsByTagName("input")[0].checked=o.checked;
p=p.parentNode
p=p?(document.all?p.previousSibling:p.getNode(true)):null;
}
}
}
</script>
<form runat="server" id="form1">
<asp:TreeView runat="server" ID="tv1" Height="146px" Width="118px">
<Nodes>
<asp:TreeNode ShowCheckBox="True" Text="系统管理" Value="系统管理">
<asp:TreeNode ShowCheckBox="True" Text="角色管理" Value="角色管理">
<asp:TreeNode ShowCheckBox="True" Text="查询" Value="查询">
<asp:TreeNode ShowCheckBox="True" Text="新增" Value="新增"></asp:TreeNode>
<asp:TreeNode ShowCheckBox="True" Text="修改" Value="修改"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</form>
</body>
</html>