http://blog.csdn.net/xiage/article/details/5128755
在开发中经常可以碰到类似的问题: 想通过一个树父节点的TreeNodeCheckChanged 事件( 前提是设置TreeView 的CheckBox可见), 来选择或反选择全部的子节点, 来实现自己的要实现的操作功能. 于是我们很正常的思维促使我们去寻找TreeView的的类似于 ” CheckChanged ” 的事件, 很容易我们找到了这个事件 ” TreeNodeCheckChanged ” . 我们很轻松并优雅的写着事件的实现代码, 心理很感谢微软, 丫的真实方便咱开发啊, 要啥有啥, 就差偷偷笑出来了(:-D).
正当我们在高兴头上呢, 我们发现当我们点击那个三角号运行页面的时候, 点击父节点子节点并没有被选中货反选. 还以为是鼠标问题呢. 于是再次的点击父节点, 还是没有我们想要的结果. 这是我们可能会刷新页面并再次的尝试, 结果还不是我们想要的样子.
用惯了现成的东西, 现在突然出了点意外, 很让人扫兴. 但是项目不能停呐, 于是乎我们开始分析代码, 检查数次后发现代码没问题. 我们开始google. 嗯, 找到了原因. 原来只有当页面submit 的时候才会提交更改, 这也是一个解决问题的方向.但是我们想在不提交页面的时候就更改变, 这个时候我们想到了通过javascript 来解决问题.
这是我们要进行操作的TreeView, 当我想点击一级节点的时候想把两个二级节点都选中. 如下图 .
从查看TreeView 的HTML 代码开始, 页面上生成的代码类似于下面( 代码太多我整理了一下):
一个TreeView 从一个锚点开始.
< a href ="#TreeView1_SkipLink">
< img alt =" 跳过导航链接。" width ="0" height ="0" style ="border-width: 0px;" /></ a >
然后是一个节点容器DIV( TreeView1 ), 所有的节点都放在这里.
< div id ="TreeView1" onclick="onTreeViewClick(event);" style ="font-size: 12px;">
树节点在HTML 用Table 标签来表示, 一个Node 节点就是一个表格Table. 所以下面名称为 ” 一级节点 ” 的表格是树的一个节点 .
< table cellpadding ="0" cellspacing ="0" style ="border-width: 0;">
< tr >
< td >
< a id ="TreeView1n0" href ="javascript:TreeView_ToggleNode( … )">
< img src =" … " alt =" 折叠一级节点" style ="border-width: 0;" /></ a ></ td>
< td >
< a href ="javascript:TreeView_ToggleNode( … )" id ="TreeView1t0i" tabindex ="-1">
< img src ="image/folderopen.gif" alt ="" style ="border-width: 0;" /></ a ></td >
< td class ="TreeView1_2" style ="white-space: nowrap;">
< input type ="checkbox" name ="TreeView1n0CheckBox" id ="TreeView1n0CheckBox" title ="一级节点" />
< a id ="TreeView1t0"> 一级节点</ a ></ td >
</ tr >
</ table >
紧接着下面的是子节点( 如果有的话), 子节点是被DIV 包容着的. 我们看这个DIV 的ID, 前半部分 ” TreeView1n0 ” 和上面的父节点里面元素是不是有很多是相同的, 由此可以看出TreeView 的节点命名规则. 这点很重要下面就会用到 .
< div id ="TreeView1n0Nodes" style ="display: block;">
子节点
< table cellpadding ="0" cellspacing ="0" style ="border-width: 0;">
< tr >
< td >
< div style ="width: 20px; height: 1px">
</ div >
</ td >
< td >
< img src =" … " alt ="" /></ td >
< td >
< a onclick ="javascript:TreeView_SelectNode(TreeView1_Data, this,'TreeView1t1');"
id ="TreeView1t1i" tabindex ="-1">
< img src ="image/file.gif" alt ="" style ="border-width: 0;" /></ a ></ td >
< td class ="TreeView1_2" style ="white-space: nowrap;">
< input type ="checkbox" name ="TreeView1n1CheckBox" id ="TreeView1n1CheckBox"title =" 二级节点" />
< a id ="TreeView1t1"> 二级节点1</ a ></ td >
</ tr >
</ table >
子节点
< table cellpadding ="0" cellspacing ="0" style ="border-width: 0;">
< tr >
< td >
< div style ="width: 20px; height: 1px">
</ div >
</ td >
< td >
< img src =" … " alt ="" /></ td >
< td >
< a onclick ="javascript:TreeView_SelectNode(...);" id ="TreeView1t2i" tabindex="-1">
< img src ="image/file.gif" alt ="" style ="border-width: 0;" /></ a ></ td >
< td class ="TreeView1_2" style ="white-space: nowrap;">
< input type ="checkbox" name ="TreeView1n2CheckBox" id ="TreeView1n2CheckBox"title =" 二级节点" />
< a id ="TreeView1t2"> 二级节点2</ a ></ td >
</ tr >
</ table >
</ div >
我们看到这里似乎明白了很多, 选中和反选中我们其实也可以通过对这些HTML 标签的操作来实现的( 其实我们知道TreeView 也是操作这些HTML 标签的, 它生成的脚本被我去掉了, 就是通过这些脚本来操作的).
首先要给TreeView 添加一个onclick 事件 onclick ="onTreeViewClick(event);" 如上面红色加粗代码的地方, 这是为了响应CheckChanged 事件.
我们定义一个对象来接收被我们点解触发的CheckBox, 这里我们为了考虑浏览器的兼容性, 所以多写点代码.
evt = evt || window.event ;
var obj = (evt.target) ? evt.target : evt.srcElement ;
evt 是作为参数传递进来的( 在Firefox 下适用).
这时的obj 还不确定是不是CheckBox, 所以我们加个判断
if (obj.tagName == "INPUT" && obj.type == "checkbox" ){
//...
}
这个时候obj 就是CheckBox 对象了, 我们继续往下看.
if (obj.tagName == "INPUT" && obj.type == "checkbox" )
{
//var node = obj.parentNode.parentNode.parentNode.parentNode.nextSibling;
// TD TR TBODY TABLE DIV( 子节点的容器)
var node = document.getElementById(obj.id.replace("CheckBox" ,"Nodes" ));
var nodes ;
if (node){
nodes = node.getElementsByTagName("INPUT" );
for (var j = 0 ;j<nodes.length ; j++){
if (nodes[j].type == "checkbox" ){
nodes[j].checked = obj.checked;
}
}
}
}
来看这句
var node = document.getElementById(obj.id.replace("CheckBox" ,"Nodes" ));
这条代码就是获取当前节点的子节点的容器 , 我们上面分析的时候提到的
< div id ="TreeView1n0Nodes" style ="display: block;">, 这个容器的 ID 和当前 CheckBox 的 ID 的区别就是后面的”Nodes” 和 ”CheckBox”, 根据这个规律我们可以进行上面的操作 . 然后我们就可以找出这个 DIV 里面所有的CheckBox 了 : getElementsByTagName("INPUT" ), 然后就是选中货饭选中所有的CheckBox.
大家注意到上面还有一条被注释掉的代码 , 这句代码和上面分析的获取子节点的可以说是异曲同工 , 我第一次最直接想到的就是这个方法 . 各个 parentNode 的代表的元素我都在下面表出来的 .
下面把整个方法给出来 .
function onTreeViewClick(evt)
{
evt = evt || window.event ;
var obj = (evt.target) ? evt.target : evt.srcElement ;
if (obj.tagName == "INPUT" && obj.type == "checkbox" )
{
//var node = obj.parentNode.parentNode.parentNode.parentNode.nextSibling;
// TD TR TBODY TABLE DIV( 子节点的容器)
alert(obj.parentNode.parentNode.parentNode.tagName);
var node = document.getElementById(obj.id.replace("CheckBox" ,"Nodes" ));
var nodes ;
if (node){
nodes = node.getElementsByTagName("INPUT" );
for (var j = 0 ;j<nodes.length ; j++){
if (nodes[j].type == "checkbox" ){
nodes[j].checked = obj.checked;
}
}
}
}
}
好了 , 这样就基本上满足了我们的需求 .