TreeView+Checkbox級聯操作

?

步驟1、前臺頁面拖放一個Treeview，將其ShowCheckBoxes屬性設置為All

<asp:TreeView?ID="tvCountry"?runat="server"?ShowCheckBoxes="All">

?

步驟2、在后臺代碼中添加Treeview的特性，使得Treeview控件在單擊時觸發JavaScript實現的級聯邏輯

代碼 1?protected?void?Page_Load(object?sender,?EventArgs?e)
2?{
3?????//?添加特性
4?????//this.tvCountry.Attributes.Add("onclick",?"Client_OnTreeNodeChecked(this)");???//?這樣寫只能IE中使用?
5?????this.tvCountry.Attributes.Add("onclick",?"Client_OnTreeNodeChecked(event)");????//?這樣寫IE/FF都可以使用
6?}

?

步驟3、前臺頁面添加JavaScript代碼

代碼 ?1?<script?type="text/javascript"?language="javascript">
?2?//?TreeView節點觸發事件
?3?function?Client_OnTreeNodeChecked(evt){
?4???var?obj?=?getCurrentNode(evt);??//?根據瀏覽器判斷事件
?5???var?treeNodeFound?=?false;
?6???var?checkedState;
?7???
?8???if(obj.tagName?==?"INPUT"?&&?obj.type?==?"checkbox"){
?9?????checkedState?=?obj.checked;
10?????var?curNode?=?getParentNode(obj);
11?????changeNodeState(curNode,checkedState);
12???}
13?}
14?
15?//?根據瀏覽器判斷事件
16?function?getCurrentNode(evt){
17???var?obj;
18?
19???if(window.event){//?IE
20?????obj?=?window.event.srcElement;
21???}else{//?FireFox
22?????obj?=?(evt?evt:(window.event?window.event:null)).target;
23???}
24???
25???return?obj;
26?}
27?
28?//?取得父節點
29?function?getParentNode(node){
30???do{
31?????node?=?node.parentNode;
32???}while(node.tagName!="TABLE")
33???return?node;
34?}
35?
36?//?改變節點狀態
37?function?changeNodeState(node,state){
38???//?根據nextSibling屬性判斷處于同一樹層級中緊跟的元素
39???if(node.nextSibling?!=?null?&&?node.nextSibling.tagName?==?"DIV"){
40?????var?cbArr?=?node.nextSibling.getElementsByTagName("INPUT");
41?????for?(var?i?=?0;?i?<?cbArr.length;?i++){
42???????if?(cbArr[i].type?==?"checkbox"){
43?????????cbArr[i].checked?=?state;
44???????}
45?????}
46???}
47???
48???var?flag?=?true;
49???var?inputArr?=?node.parentNode.getElementsByTagName("INPUT");
50???
51???if(state){
52?????for(var?i=0;i<inputArr.length;i++){
53???????if?(inputArr[i].type?==?"checkbox"?&&?!inputArr[i].checked){
54?????????flag?=?false;
55???????}
56?????}
57???}else{
58?????flag?=?true;
59???}
60???
61???if(flag){
62?????var?parentArr?=?node.parentNode.previousSibling.getElementsByTagName("INPUT");
63?????for(var?i=0;i<parentArr.length;i++){
64???????if(parentArr[i].type?==?"checkbox"){
65?????????parentArr[i].checked?=?state;
66???????}
67?????}
68???}
69?}
70?</script>

?

【運行效果】：

?

轉載于:https://www.cnblogs.com/dajiang02/archive/2010/08/20/1804137.html

總結

以上是生活随笔為你收集整理的【原】TreeView+Checkbox级联操作（IE/FireFox测试通过）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。