使用js脚本控制asp.net treeview的NodeCheck

根据TreeView2.js修改后的TreeView父节点与子节点的CheckBox联动.

 

增加CheckBox联动的情况选择：

1.单选TreeView中的任一节点

2.当一节点CheckBox属性值改变时:子节点的CheckBox属性值跟随其改动,父节点不变;

父节点的所有子节点的CheckBox属性值都为false时才为false;有一个子节点的CheckBox属性值true时则为true.

3.当一节点CheckBox属性值改变时:子节点、父节点的CheckBox属性值跟随其改动;

父节点的所有子节点的CheckBox属性值都为false时才为false;有一个子节点的CheckBox属性值true时则为true.

 

javascript代码

function  OnTreeNodeChecked(id, type) {
     // 获取触发事件的对象
     var  element  =  window.event.srcElement;

     // 如果对象不是checkbox则不处理
     if  ( ! IsCheckBox(element))
         return ;

     // 获取checked状态
     var  isChecked  =  element.checked;
     // 获取tree对象
     var  tree  =  TV2_GetTreeById(id);
     // 获取element的相对结点(如果是叶结点，则就为element,否则为其<A>结点)
     var  node  =  TV2_GetNode(tree, element);

     switch  (type) {
         case   " 1 " :
            SetNodesUnChecked(tree);
            element.checked  =   true ;
             break ;
         case   " 2 " :
            TV2_SetChildNodesCheckStatus(node, isChecked);
             break ;
         case   " 3 " :
            TV2_SetChildNodesCheckStatus(node, isChecked);
             var  parent  =  TV2_GetParentNode(tree, node);
            TV2_NodeOnChildNodeCheckedChanged(tree, parent, isChecked);
    }
}

// set all nodes checkbox nochecked
function  SetNodesUnChecked(TreeNode) {
     var  inputs  =  WebForm_GetElementsByTagName(TreeNode,  " INPUT " );
     if  (inputs  ==   null   ||  inputs.length  ==   0 )
         return ;

     for  ( var  i  =   0 ; i  <  inputs.length; i ++ ) {
         if  (IsCheckBox(inputs[i]))
            inputs[i].checked  =   false ;
    }
}

// set child nodes checkbox status
function  TV2_SetChildNodesCheckStatus(node, isChecked) {
     // 返回当前node所在的div层
     var  childNodes  =  TV2i_GetChildNodesDiv(node);
     if  (childNodes  ==   null )
         return ;

     var  inputs  =  WebForm_GetElementsByTagName(childNodes,  " INPUT " );
     if  (inputs  ==   null   ||  inputs.length  ==   0 )
         return ;

     for  ( var  i  =   0 ; i  <  inputs.length; i ++ ) {
         if  (IsCheckBox(inputs[i]))
            inputs[i].checked  =  isChecked;
    }
}

// change parent node checkbox status after child node changed
function  TV2_NodeOnChildNodeCheckedChanged(tree, node, isChecked) {
     if  (node  ==   null )
         return ;

     var  childNodes  =  TV2_GetChildNodes(tree, node);

     if  (childNodes  ==   null   ||  childNodes.length  ==   0 )
         return ;

     var  isAllSame  =   true ;

     for  ( var  i  =   0 ; i  <  childNodes.length; i ++ ) {
         var  item  =  childNodes[i];
         var  value  =  TV2_NodeGetChecked(item);

         if  (isChecked  !=  value) {
            isAllSame  =   false ;
             break ;
        }
    }

     var  parent  =  TV2_GetParentNode(tree, node);
     if  (isAllSame) {
        TV2_NodeSetChecked(node, isChecked);
        TV2_NodeOnChildNodeCheckedChanged(tree, parent, isChecked);
    }
     else  {
        TV2_NodeSetChecked(node,  true );
        TV2_NodeOnChildNodeCheckedChanged(tree, parent,  true );
    }
}

// get node relative element(etc. checkbox)
function  TV2_GetNode(tree, element) {
     var  id  =  element.id.replace(tree.id,  "" );
    id  =  id.toLowerCase().replace(element.type,  "" );
    id  =  tree.id  +  id;

     var  node  =  document.getElementById(id);
     if  (node  ==   null )  // leaf node, no "A" node
         return  element;
     return  node;
}

// get parent node
function  TV2_GetParentNode(tree, node) {
     var  div  =  WebForm_GetParentByTagName(node,  " DIV " );

     // The structure of node: <table>information of node</table><div>child nodes</div>
     var  table  =  div.previousSibling;
     if  (table  ==   null )
         return   null ;

     return  TV2i_GetNodeInElement(tree, table);
}

// get child nodes array
function  TV2_GetChildNodes(tree, node) {
     if  (TV2_NodeIsLeaf(node))
         return   null ;

     var  children  =   new  Array();
     var  div  =  TV2i_GetChildNodesDiv(node);
     var  index  =   0 ;

     for  ( var  i  =   0 ; i  <  div.childNodes.length; i ++ ) {
         var  element  =  div.childNodes[i];
         if  (element.tagName  !=   " TABLE " )
             continue ;

         var  child  =  TV2i_GetNodeInElement(tree, element);
         if  (child  !=   null )
            children[index ++ ]  =  child;
    }
     return  children;
}

function  TV2_NodeIsLeaf(node) {
     return   ! (node.tagName  ==   " A " );  // Todo
}

function  TV2_NodeGetChecked(node) {
     var  checkbox  =  TV2i_NodeGetCheckBox(node);
     return  checkbox.checked;
}

function  TV2_NodeSetChecked(node, isChecked) {
     var  checkbox  =  TV2i_NodeGetCheckBox(node);
     if  (checkbox  !=   null )
        checkbox.checked  =  isChecked;
}

function  IsCheckBox(element) {
     if  (element  ==   null )
         return   false ;
     return  (element.tagName  ==   " INPUT "   &&  element.type.toLowerCase()  ==   " checkbox " );
}

// get tree
function  TV2_GetTreeById(id) {
     return  document.getElementById(id);
}

// ////////////////////////////////////////////////////////////////////////////////////////////
// private mothods, with TV2i_ prefix
// ////////////////////////////////////////////////////////////////////////////////////////////

// get div contains child nodes
function  TV2i_GetChildNodesDiv(node) {
     // 如果node.tagName == "A"则不处理
     if  (TV2_NodeIsLeaf(node))
         return   null ;

     var  childNodsDivId  =  node.id  +   " Nodes " ;
     return  document.getElementById(childNodsDivId);
}

// find node in element
function  TV2i_GetNodeInElement(tree, element) {
     var  node  =  TV2i_GetNodeInElementA(tree, element);
     if  (node  ==   null ) {
        node  =  TV2i_GetNodeInElementInput(tree, element);
    }
     return  node;
}

// find "A" node 
function  TV2i_GetNodeInElementA(tree, element) {
     var  as  =  WebForm_GetElementsByTagName(element,  " A " );
     if  (as  ==   null   ||  as.length  ==   0 )
         return   null ;

     var  regexp  =   new  RegExp( " ^ "   +  tree.id  +   " n\\d+$ " );

     for  ( var  i  =   0 ; i  <  as.length; i ++ ) {
         if  (as[i].id.match(regexp)) {
             return  as[i];
        }
    }
     return   null ;
}

// find "INPUT" node
function  TV2i_GetNodeInElementInput(tree, element) {
     var  as  =  WebForm_GetElementsByTagName(element,  " INPUT " );
     if  (as  ==   null   ||  as.length  ==   0 )
         return   null ;

     var  regexp  =   new  RegExp( " ^ "   +  tree.id  +   " n\\d+ " );

     for  ( var  i  =   0 ; i  <  as.length; i ++ ) {
         if  (as[i].id.match(regexp)) {
             return  as[i];
        }
    }
     return   null ;
}

// get checkbox of node
function  TV2i_NodeGetCheckBox(node) {
     if  (IsCheckBox(node))
         return  node;

     var  id  =  node.id  +   " CheckBox " ;
     return  document.getElementById(id);
}

 

 

 

 

html代码

  < asp:TreeView ID = " TreeView1 "  runat = " server "  ImageSet = " Msdn "  ShowCheckBoxes = " All "
                            ShowLines = " True "  BorderWidth = " 0px "  Height = " 430px "  Width = " 250px "  Font - Size = " Small "
                            OnClick = " OnTreeNodeChecked() " >
                         </ asp:TreeView >