JS控制TreeView的結(jié)點(diǎn)選擇
網(wǎng)上有很多控制TreeView的checkbox選中,但是自己嘗試的時(shí)候,要么報(bào)錯(cuò),要么不可行。以下這種寫(xiě)法是經(jīng)過(guò)驗(yàn)證有效的,僅作參考,思維比較巧妙!
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é)點(diǎn)父節(jié)點(diǎn)選中子節(jié)點(diǎn)全選 function NodeCheck() { var o = window.event.srcElement; if (o.tagName == "INPUT" && o.type == "checkbox") //點(diǎn)擊treeview的checkbox是觸發(fā) { var d = o.id; //獲得當(dāng)前checkbox的id; var e = d.replace("CheckBox", "Nodes"); //通過(guò)查看腳本信息,獲得包含所有子節(jié)點(diǎn)div的id var div = window.document.getElementById(e); //獲得div對(duì)象 if (div != null) //如果不為空則表示,存在自節(jié)點(diǎn) { var check = div.getElementsByTagName("INPUT"); //獲得div中所有的已input開(kāi)始的標(biāo)記 for (i = 0; i < check.length; i++) { if (check[i].type == "checkbox") //如果是checkbox { check[i].checked = o.checked; //字節(jié)點(diǎn)的狀態(tài)和父節(jié)點(diǎn)的狀態(tài)相同,即達(dá)到全選 } } } else //點(diǎn)子節(jié)點(diǎn)的時(shí)候,使父節(jié)點(diǎn)的狀態(tài)改變,即不為全選 { var divid = o.parentElement.parentElement.parentElement.parentElement.parentElement; //子節(jié)點(diǎn)所在的div var id = divid.id.replace("Nodes", "CheckBox"); //獲得根節(jié)點(diǎn)的id var checkbox = divid.getElementsByTagName("INPUT"); //獲取所有子節(jié)點(diǎn)數(shù) var s = 0; for (i = 0; i < checkbox.length; i++) { if (checkbox[i].checked) //判斷有多少子節(jié)點(diǎn)被選中 { s++; } } if (s == checkbox.length) //如果全部選中 或者 選擇的是另外一個(gè)根節(jié)點(diǎn)的子節(jié)點(diǎn) , { // 則開(kāi)始的根節(jié)點(diǎn)的狀態(tài)仍然為選中狀態(tài) window.document.getElementById(id).checked = true; } else { //否則為沒(méi)選中狀態(tài) window.document.getElementById(id).checked = false; } } } } </script>
這個(gè)腳本的寫(xiě)法巧妙運(yùn)用生成的頁(yè)面源文件中checkbox與其子結(jié)點(diǎn)div之間的關(guān)系!
那么,只需要在注冊(cè)一下觸發(fā)事件即可:
protected void Page_Load(object sender, EventArgs e) { this.treeViewDapartment.Attributes.Add("onclick", "NodeCheck();"); }
特別感謝,雷云鋒給予的指導(dǎo)!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Bootstrap樹(shù)形菜單插件TreeView.js使用方法詳解
- 動(dòng)態(tài)加載dtree.js樹(shù)treeview(示例代碼)
- JS控件ASP.NET的treeview控件全選或者取消(示例代碼)
- js獲取Treeview選中的節(jié)點(diǎn)(C#選中CheckBox項(xiàng))
- js獲取TreeView控件選中節(jié)點(diǎn)的Text和Value值的方法
- 用js腳本控制asp.net下treeview的NodeCheck的實(shí)現(xiàn)代碼
- 選擇TreeView控件的樹(shù)狀數(shù)據(jù)節(jié)點(diǎn)的JS方法(jquery)
- Javascript 實(shí)現(xiàn)TreeView CheckBox全選效果
- javascript-TreeView父子聯(lián)動(dòng)效果保持節(jié)點(diǎn)狀態(tài)一致
- js編寫(xiě)的treeview使用方法
相關(guān)文章
微信小程序?qū)崿F(xiàn)計(jì)時(shí)器開(kāi)始和結(jié)束功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)計(jì)時(shí)器開(kāi)始和結(jié)束功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07bootstrap時(shí)間控件daterangepicker使用方法及各種小bug修復(fù)
這篇文章主要介紹了bootstrap時(shí)間控件daterangepicker使用方法,及各種小bug修復(fù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10jQuery檢測(cè)輸入的字符串包含的中英文的數(shù)量
這篇文章主要介紹了jQuery檢測(cè)輸入的字符串包含的中英文的數(shù)量的實(shí)現(xiàn)方法,非常的實(shí)用,這里推薦給小伙伴,有需要的朋友可以參考下。2015-04-04javascript操作元素的常見(jiàn)方法小結(jié)
這篇文章主要介紹了javascript操作元素的常見(jiàn)方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript針對(duì)頁(yè)面元素動(dòng)態(tài)獲取、賦值、動(dòng)態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下2019-11-11Web開(kāi)發(fā)必知Javascript技巧大全
JavaScript是一個(gè)絕冠全球的編程語(yǔ)言,可用于Web開(kāi)發(fā)、移動(dòng)應(yīng)用開(kāi)發(fā)(PhoneGap、Appcelerator)、服務(wù)器端開(kāi)發(fā)(Node.js和Wakanda)等等,通過(guò)本文給大家介紹Web開(kāi)發(fā)必知Javascript技巧大全,需要的朋友參考下吧2016-02-02url特殊字符編碼encodeURI?VS?encodeURIComponent分析
這篇文章主要介紹了url特殊字符編碼encodeURI?VS?encodeURIComponent分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09JavaScript字符串String和Array操作的有趣方法
字符串和數(shù)組在程序編寫(xiě)過(guò)程中是十分常用的類型,因此程序語(yǔ)言都會(huì)將String和Array作為基本類型,并提供許多字符串和數(shù)組的方法來(lái)簡(jiǎn)化對(duì)字符串的操作2012-12-12