[导入]TreeView的级联选择(下)
书接上回。
选中父节点要比选中子节点稍微复杂一些。
1.如果这个节点原来的状态为未选中,现在选中了,那简单了,找到它的父节点,选中父节点,继续以父节点为起点,继续向上找,直到到达根节点。
2.如果这个节点原来的状态为选中,现在不选了,那么比较麻烦。
2.1如果这个节点的兄弟节点中有选中的,那么父节点的选中与否,就可以用兄弟节点为基础来做了。
2.2如果这个节点的所有兄弟节点都没有选中,那么父节点应该是不选的,可是爷爷呢?爷爷的状态应该和叔叔伯伯节点的状态来确定。
从上面来看递归是少不了的了。
完整版的代码如下:
//选中父节点
function SelectAllParent(obj,x)
{
//如果传过来的CheckBox选中了
if(obj.checked==true)
{
//获得某个CheckBox所在的div
var parentDiv=obj.parentElement.parentElement.parentElement.parentElement.parentElement;
//如果没有这个div,那么意味着到根节点了。
if(parentDiv==null)
{
return;
}
//获得这个div的父节点的CheckBox的id
var parentId=parentDiv.id.replace("Nodes","CheckBox");
//获得父节点的CheckBox
var temp=document.getElementById(parentId);
//如果有父节点,那么不是根节点
if(temp!=null)
{
//设置父节点的CheckBox为选中
document.getElementById(parentId).checked=true;
//继续以这个父节点找爷爷节点。
SelectAllParent(document.getElementById(parentId),x);
}
}
else
{
//设置一个变量
var result=false;
//还是获取这个CheckBox的父div
var parentDiv=obj.parentElement.parentElement.parentElement.parentElement.parentElement;
var items=parentDiv.childNodes;
//遍历div中的每个table
for(var i=0;i<items.length;i++)
{
if(items[i].tagName=='TABLE')
{
//找到装有CheckBox的tr
var tr=items[i].childNodes[0].childNodes[parseInt(x)];
//找到td集合
var tds=tr.childNodes;
//找到最后一个td
var lastTd=tds[tds.length-1];
//获得最后一个td中的第一个元素,就是checkbox
var input=lastTd.childNodes[0].id;
//如果其中有一个兄弟节点选中了
if(document.getElementById(input).checked==true)
{
//那么结果为真
result=true;
//那么以这个CheckBox继续向上遍历
SelectAllParent(document.getElementById(input),x);
return;
}
}
}
//如果循环都跑完了,result依然false,
//意味着这个节点的父节点的选中状态应该为false
document.getElementById(parentDiv.id.replace("Nodes","CheckBox")).checked=result;
//接着用这个父节点,去找爷爷节点。
SelectAllParent(document.getElementById(parentDiv.id.replace("Nodes","CheckBox")),x);
}
}
//看是否应用了样式
//如果没有应用样式,table中应该只有1行
//如果应用了样式,table中应该有3行
//CheckBox一般会在第二行中出现
function HasStyle(tree)
{
var x=document.getElementById(tree).childNodes[0].childNodes[0].childNodes.length;
return parseInt(x-1);
}
//选中子节点
//obj为某个点中的CheckBox
//x为0:没有应用样式,1:应用了样式
function SelectAllChild(obj,x)
{
//获得子节点的id
var childrenId=obj.id.replace("CheckBox","Nodes");
//获得子节点
var temp=document.getElementById(childrenId);
//如果有子节点
if(temp!=null)
{
//获取其中的子节点,目的是找那些TABLE
//因为在Table中有CheckBox
var items=document.getElementById(childrenId).childNodes;
function SelectAllParent(obj,x)
{
//如果传过来的CheckBox选中了
if(obj.checked==true)
{
//获得某个CheckBox所在的div
var parentDiv=obj.parentElement.parentElement.parentElement.parentElement.parentElement;
//如果没有这个div,那么意味着到根节点了。
if(parentDiv==null)
{
return;
}
//获得这个div的父节点的CheckBox的id
var parentId=parentDiv.id.replace("Nodes","CheckBox");
//获得父节点的CheckBox
var temp=document.getElementById(parentId);
//如果有父节点,那么不是根节点
if(temp!=null)
{
//设置父节点的CheckBox为选中
document.getElementById(parentId).checked=true;
//继续以这个父节点找爷爷节点。
SelectAllParent(document.getElementById(parentId),x);
}
}
else
{
//设置一个变量
var result=false;
//还是获取这个CheckBox的父div
var parentDiv=obj.parentElement.parentElement.parentElement.parentElement.parentElement;
var items=parentDiv.childNodes;
//遍历div中的每个table
for(var i=0;i<items.length;i++)
{
if(items[i].tagName=='TABLE')
{
//找到装有CheckBox的tr
var tr=items[i].childNodes[0].childNodes[parseInt(x)];
//找到td集合
var tds=tr.childNodes;
//找到最后一个td
var lastTd=tds[tds.length-1];
//获得最后一个td中的第一个元素,就是checkbox
var input=lastTd.childNodes[0].id;
//如果其中有一个兄弟节点选中了
if(document.getElementById(input).checked==true)
{
//那么结果为真
result=true;
//那么以这个CheckBox继续向上遍历
SelectAllParent(document.getElementById(input),x);
return;
}
}
}
//如果循环都跑完了,result依然false,
//意味着这个节点的父节点的选中状态应该为false
document.getElementById(parentDiv.id.replace("Nodes","CheckBox")).checked=result;
//接着用这个父节点,去找爷爷节点。
SelectAllParent(document.getElementById(parentDiv.id.replace("Nodes","CheckBox")),x);
}
}
//看是否应用了样式
//如果没有应用样式,table中应该只有1行
//如果应用了样式,table中应该有3行
//CheckBox一般会在第二行中出现
function HasStyle(tree)
{
var x=document.getElementById(tree).childNodes[0].childNodes[0].childNodes.length;
return parseInt(x-1);
}
//选中子节点
//obj为某个点中的CheckBox
//x为0:没有应用样式,1:应用了样式
function SelectAllChild(obj,x)
{
//获得子节点的id
var childrenId=obj.id.replace("CheckBox","Nodes");
//获得子节点
var temp=document.getElementById(childrenId);
//如果有子节点
if(temp!=null)
{
//获取其中的子节点,目的是找那些TABLE
//因为在Table中有CheckBox
var items=document.getElementById(childrenId).childNodes;
var count=items.length;
for(var i=0;i<count;i++)
{
if(items[i].tagName=='TABLE')
{
//找到tr
var tr=items[i].childNodes[0].childNodes[parseInt(x)];
//找到td集合
var tds=tr.childNodes;
//找到最后一个td
var lastTd=tds[tds.length-1];
//获得最后一个td中的第一个元素,就是checkbox
var input=lastTd.childNodes[0].id;
//设置这个checkbox的状态为父节点的状态
document.getElementById(input).checked=obj.checked;
//接着看这个子节点还有没有孙子节点。
SelectAllChild(document.getElementById(input),parseInt(x));
}
}
}
}
//遍历每个CheckBox,给它们加上onclick处理过程
for(var i=0;i<count;i++)
{
if(items[i].tagName=='TABLE')
{
//找到tr
var tr=items[i].childNodes[0].childNodes[parseInt(x)];
//找到td集合
var tds=tr.childNodes;
//找到最后一个td
var lastTd=tds[tds.length-1];
//获得最后一个td中的第一个元素,就是checkbox
var input=lastTd.childNodes[0].id;
//设置这个checkbox的状态为父节点的状态
document.getElementById(input).checked=obj.checked;
//接着看这个子节点还有没有孙子节点。
SelectAllChild(document.getElementById(input),parseInt(x));
}
}
}
}
//遍历每个CheckBox,给它们加上onclick处理过程
function AutoSelectHandle(treeID)
{
var x=HasStyle(treeID);
//获得所有的input标记
var objs = document.getElementsByTagName("input");
//遍历
for(var i=0;i<objs.length;i++)
{
//如果是CheckBox
if(objs[i].type=='checkbox')
{
var obj=objs[i];
//如果CheckBox的id中包括TreeView在客户端的id
//那么意味着这个CheckBox是TreeView中的CheckBox
if(obj.id.indexOf(treeID)!=-1)
{
//注册事件处理过程
objs[i].onclick=function()
{
//选中子节点
SelectAllChild(this,parseInt(x));
//选中父节点
SelectAllParent(this,x);
};
}
}
}
}
{
var x=HasStyle(treeID);
//获得所有的input标记
var objs = document.getElementsByTagName("input");
//遍历
for(var i=0;i<objs.length;i++)
{
//如果是CheckBox
if(objs[i].type=='checkbox')
{
var obj=objs[i];
//如果CheckBox的id中包括TreeView在客户端的id
//那么意味着这个CheckBox是TreeView中的CheckBox
if(obj.id.indexOf(treeID)!=-1)
{
//注册事件处理过程
objs[i].onclick=function()
{
//选中子节点
SelectAllChild(this,parseInt(x));
//选中父节点
SelectAllParent(this,x);
};
}
}
}
}
在TreeView的下面加一段:
打完收工,解放土鳖。
文章来源:http://blog.sina.com.cn/s/blog_49458c270100c28v.html