DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS控制TreeView的結點選擇
JS控制TreeView的結點選擇
編輯:關於JavaScript     

網上有很多控制TreeView的checkbox選中,但是自己嘗試的時候,要麼報錯,要麼不可行。以下這種寫法是經過驗證有效的,僅作參考,思維比較巧妙!

Tree:

<asp:TreeView ID="treeViewDapartment" runat="server" SelectedNodeStyle-BackColor="GrayText" onclick="javascript:NodeCheck();" 
     Font-Size="13px" ShowCheckBoxes="All" ShowLines="true" AutoGenerateDataBindings="false" ShowExpandCollapse="true" >
</asp:TreeView>

腳本:

<script language="javascript" type="text/javascript">
   //節點父節點選中子節點全選
   function NodeCheck() {  
      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;
          }
        }

      }
  }
</script>

這個腳本的寫法巧妙運用生成的頁面源文件中checkbox與其子結點div之間的關系!

那麼,只需要在注冊一下觸發事件即可:

protected void Page_Load(object sender, EventArgs e)
{  
    this.treeViewDapartment.Attributes.Add("onclick", "NodeCheck();"); 

}

特別感謝,雷雲鋒給予的指導!

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved