JS控制TreeView的結(jié)點選擇
更新時間:2016年11月11日 09:07:07 作者:Lerry.Zhao
這篇文章主要為大家詳細介紹了JS控制TreeView的結(jié)點選擇,具有一定的參考價值,感興趣的小伙伴們可以參考一下
網(wǎng)上有很多控制TreeView的checkbox選中,但是自己嘗試的時候,要么報錯,要么不可行。以下這種寫法是經(jīng)過驗證有效的,僅作參考,思維比較巧妙!
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">
//節(jié)點父節(jié)點選中子節(jié)點全選
function NodeCheck() {
var o = window.event.srcElement;
if (o.tagName == "INPUT" && o.type == "checkbox") //點擊treeview的checkbox是觸發(fā)
{
var d = o.id; //獲得當前checkbox的id;
var e = d.replace("CheckBox", "Nodes"); //通過查看腳本信息,獲得包含所有子節(jié)點div的id
var div = window.document.getElementById(e); //獲得div對象
if (div != null) //如果不為空則表示,存在自節(jié)點
{
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; //字節(jié)點的狀態(tài)和父節(jié)點的狀態(tài)相同,即達到全選
}
}
}
else //點子節(jié)點的時候,使父節(jié)點的狀態(tài)改變,即不為全選
{
var divid = o.parentElement.parentElement.parentElement.parentElement.parentElement; //子節(jié)點所在的div
var id = divid.id.replace("Nodes", "CheckBox"); //獲得根節(jié)點的id
var checkbox = divid.getElementsByTagName("INPUT"); //獲取所有子節(jié)點數(shù)
var s = 0;
for (i = 0; i < checkbox.length; i++) {
if (checkbox[i].checked) //判斷有多少子節(jié)點被選中
{
s++;
}
}
if (s == checkbox.length) //如果全部選中 或者 選擇的是另外一個根節(jié)點的子節(jié)點 ,
{ // 則開始的根節(jié)點的狀態(tài)仍然為選中狀態(tài)
window.document.getElementById(id).checked = true;
}
else { //否則為沒選中狀態(tài)
window.document.getElementById(id).checked = false;
}
}
}
}
</script>
這個腳本的寫法巧妙運用生成的頁面源文件中checkbox與其子結(jié)點div之間的關系!
那么,只需要在注冊一下觸發(fā)事件即可:
protected void Page_Load(object sender, EventArgs e)
{
this.treeViewDapartment.Attributes.Add("onclick", "NodeCheck();");
}
特別感謝,雷云鋒給予的指導!
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Bootstrap樹形菜單插件TreeView.js使用方法詳解
- 動態(tài)加載dtree.js樹treeview(示例代碼)
- JS控件ASP.NET的treeview控件全選或者取消(示例代碼)
- js獲取Treeview選中的節(jié)點(C#選中CheckBox項)
- js獲取TreeView控件選中節(jié)點的Text和Value值的方法
- 用js腳本控制asp.net下treeview的NodeCheck的實現(xiàn)代碼
- 選擇TreeView控件的樹狀數(shù)據(jù)節(jié)點的JS方法(jquery)
- Javascript 實現(xiàn)TreeView CheckBox全選效果
- javascript-TreeView父子聯(lián)動效果保持節(jié)點狀態(tài)一致
- js編寫的treeview使用方法
相關文章
js 定時器setTimeout無法調(diào)用局部變量的解決辦法
javascript中定時器setTimeout無法調(diào)用局部變量,只需要將setTimeout的第一個參數(shù)改成函數(shù)對象,而不是字符串,就可以了2013-11-11
javascript數(shù)據(jù)結(jié)構(gòu)之串的概念與用法分析
這篇文章主要介紹了javascript數(shù)據(jù)結(jié)構(gòu)之串的概念與用法,簡單講述了串的概念、功能并結(jié)合實例形式分析了基于javascript實現(xiàn)串的遍歷、比較、查找等相關操作技巧,需要的朋友可以參考下2017-04-04

