转自http://zane.cnblogs.com/, 原文地址http://www.cnblogs.com/Zane/archive/2007/06/18/786819.html,在此感谢原文作者。本人也写过一篇相关的文章,不过没有用jquery,作者做成插件以后使用更方便了。
首先,分析一下TreeView在客户端生成的html。TreeView中的checkbox的id是TreeView的id + n + 数字 + CheckBox,其下级的checkbox集合则是包含在将该checkbox的id中的CheckBox替换成Nodes的div中所有的checkbox集合。而其上级checkbox的id是将该checkbox的父div的id中的Nodes替换成CheckBox。先看截图:
![](https://i-blog.csdnimg.cn/blog_migrate/354b0a9dcc3bbed96b5a119716e94c4a.gif)
用法如下:
CascadingSelect : function(container, node, target)
当点击checkbox时调用这个方法,其中参数
container:容器的ID,如果使用母版页请用ClientID
node:包括key(关键字属性,一般使用checkbox的title属性),type(关键字类型,设置number表示数字,否则表示字符)
target:存放所选checkbox的控件,一般使用HiddenField
CascadingRefresh : function(container, node, target)
PostBack时刷新checkbox的选择状态,参数同上
示例如下:
<
script type
=
"
text/javascript
"
>
$(
function
()
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
{
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
$().CascadingRefresh("<%= this.TreeView1.ClientID %>",
{key: "title", type: ""}, "<%= this.ID.ClientID %>");
$("input[@type='checkbox']", $("#<%= this.TreeView1.ClientID %>")).click(
function()
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
$(this).CascadingSelect("<%= this.TreeView1.ClientID %>",
{key: "title", type: ""}, "<%= this.ID.ClientID %>");
});
}
);
</
script
>
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
<
asp:TreeView ID
=
"
TreeView1
"
runat
=
"
server
"
>
<
Nodes
>
<
asp:TreeNode ShowCheckBox
=
"
True
"
Text
=
"
1
"
Value
=
"
1
"
>
<
asp:TreeNode ShowCheckBox
=
"
True
"
SelectAction
=
"
None
"
Text
=
"
1.1
"
Value
=
"
1.1
"
>
<
asp:TreeNode ShowCheckBox
=
"
True
"
Text
=
"
1.1.1
"
Value
=
"
1.1.1
"
></
asp:TreeNode
>
<
asp:TreeNode ShowCheckBox
=
"
True
"
Text
=
"
1.1.2
"
Value
=
"
1.1.2
"
></
asp:TreeNode
>
</
asp:TreeNode
>
<
asp:TreeNode ShowCheckBox
=
"
True
"
Text
=
"
1.2
"
Value
=
"
1.2
"
></
asp:TreeNode
>
<
asp:TreeNode ShowCheckBox
=
"
False
"
Text
=
"
1.3
"
Value
=
"
1.3
"
>
<
asp:TreeNode ShowCheckBox
=
"
True
"
Text
=
"
1.3.1
"
Value
=
"
1.3.1
"
></
asp:TreeNode
>
<
asp:TreeNode ShowCheckBox
=
"
True
"
Text
=
"
1.3.2
"
Value
=
"
1.3.2
"
></
asp:TreeNode
>
</
asp:TreeNode
>
</
asp:TreeNode
>
</
Nodes
>
</
asp:TreeView
>
/Files/Zane/MultiSelect_20070618.rar
<script type="text/javascript">
</script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>