網上有很多控制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();"); }
特別感謝,雷雲鋒給予的指導!
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。