[轉]關於treeview中的checkbox的全選問題

本文轉自:http://www.cnblogs.com/ltenai/archive/2007/06/28/798822.html
原文如下:

由於vs 自帶的treeview控件,顯示出checkbox以後,點checkbox的時候不能觸發任何事件,所以在後臺也不能控制
只有給checkbox添加一個回發事件:
function postBackObject()
{  
    var o = window.event.srcElement;
    if (o.tagName == "INPUT" && o.type == "checkbox") //點擊treeview的checkbox是觸發
    {
              __doPostBack("","");
     }
}

//TreeView 添加一個點擊事件
  <asp:TreeView ID="tvGrant" runat="server" Height="322px" ImageSet="Arrows" ShowCheckBoxes="All"
                    Width="194px" οnclick="postBackObject()">


添加完以後,當選擇checkbox的時候將回發一次,接着就只要在後臺的TreeNodeCheckChanged()裏面判斷一下
就可以達到全選的目的了.但是這個每次選擇的時候,都要刷新頁面.
爲了不刷新 ,就在前臺寫代碼控制:

function postBackByObject()
{  
    var o = window.event.srcElement;
    if (o.tagName == "INPUT" && o.type == "checkbox") //點擊treeview的checkbox是觸發
    {
       var d=o.id;//獲得當前checkbox的id;
       var e= d.replace("CheckBox","Nodes");//通過查看腳本信息,獲得包含所有子節點div的id
       var div= window.document.getElementById(e);//獲得div對象
      if(div!=null)  //如果不爲空則表示,存在自節點
      {
           var check=div.getElementsByTagName("INPUT");//獲得div中所有的已input開始的標記
           for(i=0;i<check.length;i++)   
           {
                if(check[i].type=="checkbox") //如果是checkbox
                {
                  check[i].checked=o.checked;//字節點的狀態和父節點的狀態相同,即達到全選
                }

           }

      }
      else  //點子節點的時候,使父節點的狀態改變,即不爲全選
      {
          var divid=o.parentElement.parentElement.parentElement.parentElement.parentElement; //子節點所在的div

          var id= divid.id.replace("Nodes","CheckBox"); //獲得根節點的id

          var checkbox=divid.getElementsByTagName("INPUT"); //獲取所有子節點數
          var s=0;
          for(i=0;i<checkbox.length;i++)   
           {
              if(checkbox[i].checked)  //判斷有多少子節點被選中
              {
                 s++;  
              }
           }
 
        if(s==checkbox.length)  //如果全部選中 或者 選擇的是另外一個根節點的子節點 ,
        {                               //    則開始的根節點的狀態仍然爲選中狀態
         window.document.getElementById(id).checked=true;
        }
        else
        {                               //否則爲沒選中狀態
         window.document.getElementById(id).checked=false;
        }

      }   

    }

}

添加上面的代碼後,後臺不要寫代碼控制了,頁面也不刷了,同樣達到多選的目的.希望對大家有點幫助!!!!


 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章