关于TreeView连带选择的功能估计很多人都写过,如果用服务器端事件来写比较方便,但是多了一层服务器端交互,系统易用性也上不太好,所以还是把这些功能的处理放在客户端会好一些。
功能说明:
A、选中某节点后会默认选中其所有子节点和其所有父节点的CheckBox
B、取消选中某节点后会取消选中其所有子节点的CheckBox,如其父节点下尚有其他子节点被选中,则不取消父节点CheckBox,如没有,则取消选中所有父节点的CheckBox
简单写了些客户端代码,可以直接放到JS文件中使用,希望对大家能有帮助。
1、首先是服务器端加一段代码,进行客户脚本注册
this.TVMenus.Attributes.Add("onclick", "CheckEvent();");
2、其次是下面的客户端脚本,我把它直接放到一个专用的JS文件中
JavaScript
1 //客户端捕捉事件
2 function CheckEvent()
3 {
4 var objNode = event.srcElement;
5 if(objNode.tagName == "INPUT" && objNode.type== "checkbox")
6 {
7 var objParentDiv = objNode.id.replace("CheckBox","Nodes");
8 if(objNode.checked==true)
9 {
10 setChildCheckState(objParentDiv,true);
11
12 setParentCheckeState(objNode,true);
13 }
14 else
15 {
16 setChildCheckState(objParentDiv,false);
17
18 if(!HasOtherChecked(objNode)){
19 setParentCheckeState(objNode,false);
20 }
21 }
22 }
23 }
24
25 //判断是否有并行的其他节点被选中
26 function HasOtherChecked(objNode)
27 {
28 var objParentDiv = WebForm_GetParentByTagName(objNode, "div");
29
30 var chks = objParentDiv.getElementsByTagName("INPUT");
31 for(var i=0;i<chks.length;i++){
32 if(chks[i].checked && chks[i].id != objNode.id)
33 {
34 return true;
35 }
36 }
37 return false;
38 }
39
40 //设置父节点
41 function setParentCheckeState(objNode,chkstate)
42 {
43 try{
44 var objParentDiv = WebForm_GetParentByTagName(objNode, "div");
45
46 if(objParentDiv == null || objParentDiv == "undefined "){
47 return;
48 }
49 else{
50 var objParentChkId = objParentDiv.id.replace("Nodes","CheckBox");
51 var objParentCheckBox = document.getElementById(objParentChkId);
52
53 if(objParentCheckBox){
54 objParentCheckBox.checked = chkstate;
55 setParentCheckeState(objParentDiv,chkstate);
56 }
57 }
58 }
59 catch(e){}
60 }
61
62 //设置子节点
63 function setChildCheckState(nodeid,chkstate)
64 {
65 var node = document.getElementById(nodeid);
66
67 if(node){
68 var chks = node.getElementsByTagName("INPUT");
69 for(var i=0;i<chks.length;i++){
70 chks[i].checked = chkstate;
71 }
72 }
73 }