【项目】——TreeView父节点子节点同步选中

时间:2022-05-27 23:26:24

      在项目中经常会用到TreeView,为了增加用户体验度,子节点选中时,父节点也要同步选中;父节点选中时,子节点也全部选中,在此分享一下ASP.NET中,TreeView的这一功能。


      一、添加TreeView的OnClick事件

m_Tree.Attributes.Add("onclick", "TreeNodeChecked();");
function TreeNodeChecked()
 {
  var objNode = window.event.srcElement;
  if(objNode.tagName!="INPUT" || objNode.type !="checkbox")
  return;
  if(window.lastCheckNode != null)
  window.lastCheckNode.checked = false;
  window.lastCheckNode = objNode;
 }


      二、选中所有子节点


function OnTreeNodeChecked() 
          {
             var ele = window.event.srcElement; 
             if(ele.type=='checkbox') 
              { 
                 var childrenDivID = ele.id.replace('CheckBox','Nodes'); 
                 var div = document.getElementByIdx_x(childrenDivID); 
                 if(div==null)return; 
                 var checkBoxs = div.getElementsByTagName_r('INPUT'); 
                 for(var i=0;i<checkBoxs.length;i++) 
                  { 
                     if(checkBoxs[i].type=='checkbox') 
                         checkBoxs[i].checked=ele.checked; 
                 } 
             } 
      }


      三、选中子节点时,父节点选中

function setChildCheckedState(div,state)
          {
             var    objchild = div.childNodes;
             var    count =    objchild.length;
             for(var    i=0;i<objchild.length;i++)
              {
                 var    tempObj    = objchild[i];
                 if(tempObj.tagName=="INPUT"    && tempObj.type    == "checkbox")
                  {
                     tempObj.checked    = state;
                 }
                 setChildCheckedState(tempObj,state);
             }
         }
         function TreeNodeChecked()
          {
             var    objNode    = window.event.srcElement;
             if(objNode.tagName!="INPUT"    || objNode.type!="checkbox")
                 return;
             
             if(objNode.checked == true)
              {
                 setParentChecked(objNode);
             }
             var    objID =    objNode.getAttribute("ID");
             var    objParentDiv = document.getElementByIdx_x(objID.replace("CheckBox","Nodes"));
             if(objParentDiv==null || typeof(objParentDiv) == "undefined")
                 return;
             setChildCheckedState(objParentDiv,objNode.checked);
 
          }


      做项目也就是一个积累的过程,建立自己的代码库,才能更加高效的工作和学习。