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