選擇TreeView控件的樹狀數(shù)據(jù)節(jié)點(diǎn)的JS方法(jquery)
更新時(shí)間:2010年02月06日 16:13:23 作者:
前些日子為了提高人性化選擇樹狀權(quán)限的功能,根據(jù)樹的結(jié)構(gòu)用jquery寫了個(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í),來決定其祖先節(jié)點(diǎn)的選中狀態(tài)?!?
說明:樹是用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;
}
}
}
);
});
});
說明:樹是用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樹形控件(二)之?dāng)?shù)據(jù)支持json字符串、list集合
- 基于MVC5和Bootstrap的jQuery TreeView樹形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合
- jquery實(shí)現(xiàn)點(diǎn)擊TreeView文本父節(jié)點(diǎn)展開/折疊子節(jié)點(diǎn)
- ASP.NET中基于JQUERY的高性能的TreeView補(bǔ)充
- 打造基于jQuery的高性能TreeView(asp.net)
- 為jQuery.Treeview添加右鍵菜單的實(shí)現(xiàn)代碼
- Jquery.TreeView結(jié)合ASP.Net和數(shù)據(jù)庫生成菜單導(dǎo)航條
- jQuery 學(xué)習(xí)第六課 實(shí)現(xiàn)一個(gè)Ajax的TreeView
- jQuery 樹形結(jié)構(gòu)的選擇器
- jQuery treeview樹形結(jié)構(gòu)應(yīng)用
相關(guān)文章
easyUI 實(shí)現(xiàn)的后臺(tái)分頁與前臺(tái)顯示功能示例
這篇文章主要介紹了easyUI 實(shí)現(xiàn)的后臺(tái)分頁與前臺(tái)顯示功能,結(jié)合實(shí)例形式分析了easyUI 后臺(tái)數(shù)據(jù)交互、分頁與前臺(tái)顯示相關(guān)操作技巧及注意事項(xiàng),需要的朋友可以參考下2020-06-06jquery ajax,ashx,json的用法總結(jié)
本篇文章主要是對(duì)jquery ajax,ashx,json的用法進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02jQuery動(dòng)態(tài)移除和添加背景圖片的方法詳解
這篇文章主要介紹了jQuery動(dòng)態(tài)移除和添加背景圖片的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁面元素樣式及事件響應(yīng)的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2017-03-03jquery html添加元素/刪除元素操作實(shí)例詳解
這篇文章主要介紹了jquery html添加元素/刪除元素操作,結(jié)合實(shí)例形式詳細(xì)分析了jquery html添加元素/刪除元素相關(guān)函數(shù)功能、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-05-05JQuery插件iScroll實(shí)現(xiàn)下拉刷新,滾動(dòng)翻頁特效
下拉自動(dòng)加載進(jìn)行分頁的運(yùn)用越來越多,比起傳統(tǒng)的分頁該方法分頁用戶體驗(yàn)更好,布局也更簡單了。目前正在使用和學(xué)習(xí)中……2014-06-06使用jquery判斷一個(gè)元素是否含有一個(gè)指定的類(class)實(shí)例
下面小編就為大家?guī)硪黄褂胘query判斷一個(gè)元素是否含有一個(gè)指定的類(class)實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02巧用jquery解決下拉菜單被Div遮擋的相關(guān)問題
本篇文章主要是對(duì)巧用jquery解決下拉菜單被Div遮擋的相關(guān)問題進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02