转：asp.net TreeView CheckChanged 事件浅谈

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;

}

}

}

}

}

好了 , 这样就基本上满足了我们的需求 .