TreeView+Checkbox級(jí)聯(lián)操作

?

步驟1、前臺(tái)頁(yè)面拖放一個(gè)Treeview，將其ShowCheckBoxes屬性設(shè)置為All

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

?

步驟2、在后臺(tái)代碼中添加Treeview的特性，使得Treeview控件在單擊時(shí)觸發(fā)JavaScript實(shí)現(xiàn)的級(jí)聯(lián)邏輯

代碼 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、前臺(tái)頁(yè)面添加JavaScript代碼

代碼 ?1?<script?type="text/javascript"?language="javascript">
?2?//?TreeView節(jié)點(diǎn)觸發(fā)事件
?3?function?Client_OnTreeNodeChecked(evt){
?4???var?obj?=?getCurrentNode(evt);??//?根據(jù)瀏覽器判斷事件
?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?//?根據(jù)瀏覽器判斷事件
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?//?取得父節(jié)點(diǎn)
29?function?getParentNode(node){
30???do{
31?????node?=?node.parentNode;
32???}while(node.tagName!="TABLE")
33???return?node;
34?}
35?
36?//?改變節(jié)點(diǎn)狀態(tài)
37?function?changeNodeState(node,state){
38???//?根據(jù)nextSibling屬性判斷處于同一樹層級(jí)中緊跟的元素
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>

?

【運(yùn)行效果】：

?

轉(zhuǎn)載于:https://www.cnblogs.com/dajiang02/archive/2010/08/20/1804137.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。