漂泊雪狼的博客

思考，讨论，分享C#,JavaScript,.NET,Oracle,SQL Server……技术

posts - 45, comments - 245, trackbacks - 9, articles - 10

ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript

Posted on 2006-04-17 13:08 漂泊雪狼阅读(3065) 评论(0) 编辑收藏网摘所属分类: ASP.NET

ASP.NET 2.0 TreeView has many built-in features such as showing a checkbox for all the Tree Nodes. Node level formating, style, etc., Enabling the ShowCheckBoxes="All" property sets it to show a checkbox for all the nodes. The other options are Leaf, None, Parent and Root which show checkboxes at the respective node levels. None doesnt display CheckBoxes.

When we set ShowCheckBoxes="All", we would like to provide a feature where people can select the checkbox on the Root Node so that all the other checkboxes are checked automatically. Basically, when the parent node is checked, all the child nodes should be checked automatically.

It would be intuitive to accomplish this task at the client side without involving a postback.

The following code snippet helps in accomplishing the same.

TreeView Declaration

<asp:TreeView ID="TreeView1" Runat="server" DataSourceID="XmlDataSource1" onclick="client_OnTreeNodeChecked();" ShowCheckBoxes="all">

<DataBindings>

<asp:TreeNodeBinding DataMember="Category" ValueField="ID" TextField="Name"></asp:TreeNodeBinding>

<asp:TreeNodeBinding DataMember="Description" ValueField="Value" TextField="Value"></asp:TreeNodeBinding>

</DataBindings>

</asp:TreeView>

In the above TreeView declaration Code, you can find the property onclick="client_OnTreeNodeChecked();" event which actually is the JavaScript function which would accomplish this task.

The Javascript Code snippet is as follows:-

全选Javascript
1

function client_OnTreeNodeChecked()
2

{
3

var obj = window.event.srcElement;
4

var treeNodeFound = false;
5

var checkedState;
6

if (obj.tagName == "INPUT" && obj.type == "checkbox")
7

{
8

var treeNode = obj;
9

checkedState = treeNode.checked;
10

do
11

{
12

obj = obj.parentElement;
13

}
14

while (obj.tagName != "TABLE")
15

var parentTreeLevel = obj.rows[0].cells.length;
16

var parentTreeNode = obj.rows[0].cells[0];
17

var tables = obj.parentElement.getElementsByTagName("TABLE");
18

var numTables = tables.length
19

if (numTables >= 1)
20

{
21

for (i=0; i < numTables; i++)
22

{
23

if (tables[i] == obj)
24

{
25

treeNodeFound = true;
26

i++;
27

if (i == numTables)
28

{
29

return;
30

}
31

}
32

if (treeNodeFound == true)
33

{
34

var childTreeLevel = tables[i].rows[0].cells.length;
35

if (childTreeLevel > parentTreeLevel)
36

{
37

var cell = tables[i].rows[0].cells[childTreeLevel - 1];
38

var inputs = cell.getElementsByTagName("INPUT");
39

inputs[0].checked = checkedState;
40

}
41

else
42

{
43

return;
44

}
45

}
46

}
47

}
48

}
49

}
50

新用户注册刷新评论列表

标题

姓名

主页

Email

(博主才能看到)


验证码	* 看不清,换一张 [登录][注册]

内容(请不要发表任何与政治相关的内容)

网站首页

新闻频道

社区

小组

博问

网摘

人才

找找看

Remember Me?

登录使用高级评论新用户注册返回页首恢复上次提交

[使用Ctrl+Enter键可以直接提交]

该文被作者在 2007-04-05 12:28 编辑过

Google站内搜索

China-pub 计算机图书网上专卖店！6.5万品种 2-8折！
近千种 9-95 新二手计算图书火热销售中！

相关文章:

相关链接:

所属分类的其他文章:
不能将Session保存在其他机器的state server 中问题的解决
在asp.net程序开发中避免编译就要重新登录系统的小技巧
在ASP.NET AJAX中防止用户多次提交页面
ASP.NET2.0MasterPage使用技巧总结
【续】用ObjectDataSource实现自定义分页的心得总结，几种分页方法的性能对比
ASP.NET Ajax 和ASP.NET 2.0 的登陆控件相冲突的问题的讨论
用ObjectDataSource实现自定义分页的心得总结
在VS.NET 2003中使用.ashx进图片及文件的传送和读取
使用XMLHttp在页面间传送参数
解决IE在客户端使用ADODB.Stream不能创建对象成功的方法

最新IT新闻:
[译稿]微软将 jQuery IntelliSense整合到Visual Studio
微软：不裁员也不削减研发开支
2008年11月22日科技博客精选
诺基亚将支持Lotus Notes 和黑莓争夺市场
Mozilla公布去年收入报告

Search Engine Optimization