客户端代码实现无刷新TreeView的复选框多选

1. 服务端加载数据.

2.设置每个节点 . NavigateUrl = "javascript:void(0)"或者设置 . NavigateUrl = "#", 但是后者在刷新页面后可能导致TreeView所在页面位置上靠; 目的是防止默认情况下点击节点导致刷新整个页面的麻烦.

3.注册节点的点击事件chkTreeView.Attributes.Add("onclick", "javascript:return CheckNode();");

4.客户端编写点击复选框的操作代码

 

function CheckNode()
...{ 
    if(event.srcElement.tagName.toLowerCase() == "input")//判断是否为checkbox
    ...{
        //如果为选中状态, 则设置所有子节点. 如果为取消状态, 则设置所有子节点,并取消父节点的选中状态.
        var flagChecked = event.srcElement.checked;//当前节点的选择标志
        //当前节点的TABLE     
        var currNodeTable = event.srcElement.parentElement.parentElement.parentElement.parentElement;
        
        //设置所有子节点
        SelAllChildren(currNodeTable, flagChecked);
        
        var parentNodeTable = currNodeTable.parentElement.previousSibling;//父节点
        if(!flagChecked)
        ...{
            SelAllParent(parentNodeTable, flagChecked);
        }
        else
        ...{
            SelFullChildrenChecked(parentNodeTable);
        }
        
        //获取所有选择节点
        GetAllCheckedNodes(currNodeTable);
    }
}


//查找CheckBox
function FindCheckBox(rowList)
...{
    if(rowList == null)
        return null;
        
    var cellList = rowList.cells;
    if(cellList  == null)
        return null;
    for(var k = 0; k < cellList.length; k++)
    ...{
        var childList = cellList[k].children;
        if(childList == null)
            continue;
        for(var m = 0; m < childList.length; m++)
        ...{
            if(childList[m].tagName.toLowerCase() == "input")
            ...{
                return childList[m];
            }
        }
    }
}

//如果没有CheckBox则查找其他节点
function FindNode(rowList)
...{
    if(rowList == null)
        return null;
        
    var cellList = rowList.cells;
    if(cellList == null)
        return null;
    for(var k = 0; k < cellList.length; k++)
    ...{
        var childList = cellList[k].children;
        if(childList == null)
            continue;
        for(var m = 0; m < childList.length; m++)
        ...{
            if(childList[m].tagName.toLowerCase() == "a")
            ...{
                return childList[m];
            }
        }
    }
}

//所有子 节点是否都是选中状态
function IsFullChildrenChecked(parentNodeTable)
...{
    if(parentNodeTable == null || parentNodeTable.nextSibling == null || parentNodeTable.nextSibling.children == null)
        return true;
        
    var childNodeList = parentNodeTable.nextSibling.children;
    for(var i = 0; i < childNodeList.length; i++)
    ...{
        if(childNodeList[i].tagName.toLowerCase() != "table")//是否有子节点
            continue;
            
        var rowList = childNodeList[i].rows;
        if(rowList == null)
            continue;
        for(var j = 0; j < rowList.length; j++)
        ...{
            var lastNode = FindCheckBox(rowList[j]);
            if(lastNode != null)
            ...{
                if(lastNode.checked == false)
                    return false;
            }
            else
            ...{
                lastNode = FindNode(rowList[j]);
            }
            
            if(lastNode == null)
                continue;
                
           var childNodeTable = lastNode.parentElement.parentElement.parentElement.parentElement;
           if(childNodeTable.nextSibling == null || childNodeTable.nextSibling.children == null)
               continue;
               
           if(childNodeTable.nextSibling.children.length != 0)
           ...{
               if(IsFullChildrenChecked(childNodeTable) == false)
                    return false;
           }
        }
    }
    
    return true;
}

//把子节点都为选中状态的父节点也设置为选中状态
function SelFullChildrenChecked(parentNodeTable)
...{
    if(parentNodeTable == null)
        return ;
        
    if(IsFullChildrenChecked(parentNodeTable))
    ...{
       var lastNode = FindCheckBox(parentNodeTable);
        if(lastNode != null)
        ...{
            lastNode.checked = true;
        }
        else
        ...{
            lastNode = FindNode(parentNodeTable);
        }
        
        if(lastNode == null)
            return ;
            
        parentNodeTable = lastNode.parentElement.parentElement.parentElement.parentElement;
        parentNodeTable = parentNodeTable.parentElement.previousSibling;//父节点
 
        SelFullChildrenChecked(parentNodeTable);
    }
}

//设置所有子节点
function SelAllChildren(currNodeTable, flagChecked)
...{
    if(currNodeTable == null || currNodeTable.nextSibling == null || currNodeTable.nextSibling.children == null)
        return;
        
    var childNodeList = currNodeTable.nextSibling.children;
    for(var i = 0; i < childNodeList.length; i++)
    ...{
        if(childNodeList[i].tagName.toLowerCase() != "table")//是否有子节点
            continue;
            
        var rowList = childNodeList[i].rows;
        if(rowList == null)
            continue;
        for(var j = 0; j < rowList.length; j++)
        ...{
            var lastNode = FindCheckBox(rowList[j]);
            if(lastNode != null)
            ...{
                lastNode.checked = flagChecked;
            }
            else
            ...{
                lastNode = FindNode(rowList[j]);
            }
            
            if(lastNode == null)
                continue;
                
           var childNodeTable = lastNode.parentElement.parentElement.parentElement.parentElement;
           if(childNodeTable.nextSibling == null || childNodeTable.nextSibling.children == null)
               continue;
               
           if(childNodeTable.nextSibling.children.length != 0)
           ...{
               SelAllChildren(childNodeTable, flagChecked);
           }
         }
    }
}  
  
//设置所有父节点
function SelAllParent(parentNodeTable, flagChecked)
...{
    if(parentNodeTable == null)
        return;
        
    var lastNode = FindCheckBox(parentNodeTable);
    if(lastNode != null)
    ...{
        lastNode.checked = flagChecked;
    }
    else
    ...{
        lastNode = FindNode(parentNodeTable);
    }
       
    if(lastNode == null)
        return ;
           
    parentNodeTable = lastNode.parentElement.parentElement.parentElement.parentElement;
    parentNodeTable = parentNodeTable.parentElement.previousSibling;//父节点
 
    SelAllParent(parentNodeTable, flagChecked);

}

//在XML文档中查找节点

function FindXMLNode(parentNode, nodeID)
...{
    if(parentNode == null || parentNode.attributes == null || nodeID == null)
        return null;
        
    if(parentNode.attributes.getNamedItem("NodeValue") != null)
    ...{        
        if(parentNode.attributes.getNamedItem("NodeValue").nodeValue == nodeID)
            return parentNode;
     }
        
    var childNodeList = parentNode.childNodes;
    for(var i = 0; i < childNodeList.length; i++)
    ...{
        var childNode = childNodeList[i];
        var returnNode = FindXMLNode(childNode, nodeID);
        if(returnNode != null)
            return returnNode;
    }
    
    return null;
}

function SetXMLNodeChecked(nodeID, checkedFlag)
...{
    var childNodeList = xmlDoc.childNodes;
    
    for(var i = 0; i < childNodeList.length; i++)
    ...{
        var childNode = childNodeList[i];
        
        var returnNode = FindXMLNode(childNode, nodeID);
        if(returnNode != null)
            returnNode.attributes.getNamedItem("IsChecked").nodeValue = checkedFlag;
    }

}

function CreateXMLDoc()
...{
    var xmlDoc;
    if(ActiveXObject != null)
    ...{
        xmlDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
    }
    else if(document.implementation && document.implementation.createDocument)
    ...{
        xmlDoc=document.implementation.createDocument("","doc",null);
    }
    else
    ...{
        return null;
    }
    
    xmlDoc.async = false;
    xmlDoc.preserveWhiteSpace=true;
    
    return xmlDoc
}

 function createXMLHttp()
 ...{
    var xmlHttp;
    if (ActiveXObject != null)
    ...{
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else
    ...{
        xmlHttp=new XMLHttpRequest();
    }
    return xmlHttp;
 }
 
function GetAllCheckedNodes(currNodeTable)
...{
    HighNodesNameStr = "";
    AllNodesNameStr = "";
    
   RootNode = GetRootNode(currNodeTable, currNodeTable);
   
   //获取最上一级的选中节点
   GetHighChildCheckedNode(RootNode);
   
   //获取所有的选中节点
   GetAllChildCheckedNodes(RootNode);
   
   window.parent.document.all("SelHighNodesNameHFld").value = HighNodesNameStr;
   window.parent.document.all("SelAllNodesNameHFld").value = AllNodesNameStr;
   window.parent.document.all("SplitSymbolHFld").value = SplitSymbolStr;
  
   document.all("SelHighNodesNameHFld").value = HighNodesNameStr;
   document.all("SelAllNodesNameHFld").value = AllNodesNameStr;
   document.all("SplitSymbolHFld").value = SplitSymbolStr;
 
   
}

 //获取最上一级的指标节点ID, 如果有父节点, 则只记录父节点的ID
function GetHighChildCheckedNode(currNodeTable)
...{
    if(currNodeTable == null || currNodeTable.nextSibling == null || currNodeTable.nextSibling.children == null)
        return;
        
    var childNodeList = currNodeTable.nextSibling.children;
    for(var i = 0; i < childNodeList.length; i++)
    ...{
        if(childNodeList[i].tagName.toLowerCase() != "table")//是否有子节点
            continue;
            
        var rowList = childNodeList[i].rows;
        if(rowList == null)
            continue;
        for(var j = 0; j < rowList.length; j++)
        ...{
            var lastNode = FindCheckBox(rowList[j]);
            if(lastNode != null)
            ...{
                if(lastNode.checked == 1)
                ...{
                    HighNodesNameStr += childNodeList[i].innerText + SplitSymbolStr;
                    break;
                 }
            }
            else
            ...{
                lastNode = FindNode(rowList[j]);
            }
            
            if(lastNode == null)
                continue;
                
           var childNodeTable = lastNode.parentElement.parentElement.parentElement.parentElement;
           if(childNodeTable.nextSibling == null || childNodeTable.nextSibling.children == null)
               continue;
               
           if(childNodeTable.nextSibling.children.length != 0)
           ...{
               GetHighChildCheckedNode(childNodeTable);
           }
         }
    }
}

//获取最上一级的指标节点ID, 如果有父节点, 则只记录父节点的ID
function GetAllChildCheckedNodes(currNodeTable)
...{
    if(currNodeTable == null || currNodeTable.nextSibling == null || currNodeTable.nextSibling.children == null)
        return;
        
    var childNodeList = currNodeTable.nextSibling.children;
    for(var i = 0; i < childNodeList.length; i++)
    ...{
        if(childNodeList[i].tagName.toLowerCase() != "table")//是否有子节点
            continue;
            
        var rowList = childNodeList[i].rows;
        if(rowList == null)
            continue;
        for(var j = 0; j < rowList.length; j++)
        ...{
            var lastNode = FindCheckBox(rowList[j]);
            if(lastNode != null)
            ...{
                if(lastNode.checked == 1)
                ...{
                    AllNodesNameStr += childNodeList[i].innerText + SplitSymbolStr;
                 }
            }
            else
            ...{
                lastNode = FindNode(rowList[j]);
            }
            
            if(lastNode == null)
                continue;
                
           var childNodeTable = lastNode.parentElement.parentElement.parentElement.parentElement;
           if(childNodeTable.nextSibling == null || childNodeTable.nextSibling.children == null)
               continue;
               
           if(childNodeTable.nextSibling.children.length != 0)
           ...{
               GetAllChildCheckedNodes(childNodeTable);
           }
         }
    }
}

function GetRootNode(currNodeTable, preNodeTable)
...{
    if(RootNode != null)
        return RootNode;
      
     if(currNodeTable == null)
        return null;
        
    var lastNode = FindCheckBox(currNodeTable);
    if(lastNode == null)
    ...{
        lastNode = FindNode(currNodeTable);
    }
       
    if(lastNode == null)
    ...{
        RootNode = preNodeTable;
        return RootNode;
    }
           
    parentNodeTable = lastNode.parentElement.parentElement.parentElement.parentElement;
    parentNodeTable = parentNodeTable.parentElement.previousSibling;//父节点
 
    RootNode = GetRootNode(parentNodeTable, currNodeTable);
    if(RootNode != null)
        return RootNode;
             
     
}