【アイテム】-TreeView親ノード同期選択

2711 ワード

プロジェクトでは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);
 
          }

プロジェクトを行うことは、蓄積されたプロセスであり、自分のコードライブラリを構築してこそ、より効率的な仕事と学習ができます.