選擇TreeView控件的樹(shù)狀數(shù)據(jù)節(jié)點(diǎn)的JS方法(jquery)
更新時(shí)間:2010年02月06日 16:13:23 作者:
前些日子為了提高人性化選擇樹(shù)狀權(quán)限的功能,根據(jù)樹(shù)的結(jié)構(gòu)用jquery寫(xiě)了個(gè)方法。
方法要達(dá)到的效果是:“ 改變一節(jié)點(diǎn)的選中狀態(tài)時(shí),其后代節(jié)點(diǎn)選中狀態(tài)也要跟隨當(dāng)前節(jié)點(diǎn)的選中狀態(tài)改變而改變。當(dāng)前節(jié)點(diǎn)選中時(shí),其所有祖先節(jié)點(diǎn)也要跟著選中;如取消時(shí),要根據(jù)其同級(jí)節(jié)點(diǎn)是否有選中時(shí),來(lái)決定其祖先節(jié)點(diǎn)的選中狀態(tài)?!?
說(shuō)明:樹(shù)是用vs的TreeView控件生成的。
如圖:

代碼如下:
jQuery(function(){
jQuery(":checkbox").click(function(){
var objNode = this;
var objNodeId=objNode.id;
var divObjId= objNodeId.substring(0,objNodeId.indexOf("CheckBox")) < /span>+ "Nodes";
jQuery('#'+divObjId+' input[type="checkbox"]').each(function(){
this.checked=objNode.checked;
}
);
jQuery("#"+objNodeId).parents("div[id]").each(function(){
var divId=this.id;
var cbId=divId.substring(0,divId.indexOf("Nodes")) + "CheckBox";
var cbCount=jQuery('#'+divId+' input:checked');
if(objNode.checked||cbCount.length==0)
{
var sId=document.getElementById(cbId);
if (sId)
{
sId.checked=objNode.checked;
}
}
}
);
});
});
說(shuō)明:樹(shù)是用vs的TreeView控件生成的。
如圖:

代碼如下:
復(fù)制代碼 代碼如下:
jQuery(function(){
jQuery(":checkbox").click(function(){
var objNode = this;
var objNodeId=objNode.id;
var divObjId= objNodeId.substring(0,objNodeId.indexOf("CheckBox")) < /span>+ "Nodes";
jQuery('#'+divObjId+' input[type="checkbox"]').each(function(){
this.checked=objNode.checked;
}
);
jQuery("#"+objNodeId).parents("div[id]").each(function(){
var divId=this.id;
var cbId=divId.substring(0,divId.indexOf("Nodes")) + "CheckBox";
var cbCount=jQuery('#'+divId+' input:checked');
if(objNode.checked||cbCount.length==0)
{
var sId=document.getElementById(cbId);
if (sId)
{
sId.checked=objNode.checked;
}
}
}
);
});
});
您可能感興趣的文章:
- 基于MVC5和Bootstrap的jQuery TreeView樹(shù)形控件(二)之?dāng)?shù)據(jù)支持json字符串、list集合
- 基于MVC5和Bootstrap的jQuery TreeView樹(shù)形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合
- jquery實(shí)現(xiàn)點(diǎn)擊TreeView文本父節(jié)點(diǎn)展開(kāi)/折疊子節(jié)點(diǎn)
- ASP.NET中基于JQUERY的高性能的TreeView補(bǔ)充
- 打造基于jQuery的高性能TreeView(asp.net)
- 為jQuery.Treeview添加右鍵菜單的實(shí)現(xiàn)代碼
- Jquery.TreeView結(jié)合ASP.Net和數(shù)據(jù)庫(kù)生成菜單導(dǎo)航條
- jQuery 學(xué)習(xí)第六課 實(shí)現(xiàn)一個(gè)Ajax的TreeView
- jQuery 樹(shù)形結(jié)構(gòu)的選擇器
- jQuery treeview樹(shù)形結(jié)構(gòu)應(yīng)用
相關(guān)文章
jquery中的mouseleave和mouseout的區(qū)別 模仿下拉框效果
不論鼠標(biāo)指針離開(kāi)被選元素還是任何子元素,都會(huì)觸發(fā) mouseout 事件,只有在鼠標(biāo)指針離開(kāi)被選元素時(shí),才會(huì)觸發(fā) mouseleave 事件2012-02-02
JQuery使用$.ajax和checkbox實(shí)現(xiàn)下次不在通知功能
這篇文章主要介紹了JQuery使用$.ajax和checkbox實(shí)現(xiàn)下次不在通知功能,本文給出HTML代碼、JS代碼、和后端JAVA代碼完整示例,需要的朋友可以參考下2015-04-04
jQuery實(shí)現(xiàn)的超鏈接提示效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的超鏈接提示效果,結(jié)合實(shí)例形式對(duì)比分析了jQuery實(shí)現(xiàn)的帶有l(wèi)oading動(dòng)態(tài)圖效果的提示文字以及默認(rèn)提示文字顯示效果,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
BootStrap glyphicon圖標(biāo)無(wú)法顯示的解決方法
如果不注意bootstrap引入css和fonts的規(guī)范,則可能會(huì)導(dǎo)致bootstrap 在顯示glyphicon圖標(biāo)時(shí)無(wú)法正常顯示,顯示為方框。該怎么解決呢?下面小編給大家解答下2016-09-09
Jquery Uploadify上傳帶進(jìn)度條的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)Jquery Uploadify上傳帶進(jìn)度條的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02
使用jquery實(shí)現(xiàn)的一個(gè)圖片延遲加載插件(含圖片延遲加載原理)
這篇文章主要介紹了使用jquery實(shí)現(xiàn)的一個(gè)圖片延遲加載插件,同時(shí)講解了圖片延遲加載的原理,還有無(wú)阻塞加載廣告的功能哦,需要的朋友可以參考下2014-06-06
同域jQuery(跨)iframe操作DOM(實(shí)例講解)
本篇文章主要是對(duì)同域jQuery(跨)iframe操作DOM進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12
Javascript中的異步編程規(guī)范Promises/A詳細(xì)介紹
這篇文章主要介紹了Javascript中的異步編程規(guī)范Promises/A詳細(xì)介紹,同時(shí)介紹了jQuery 中的 Deferred 和 Promises,需要的朋友可以參考下2014-06-06

