jquery實現(xiàn)點擊TreeView文本父節(jié)點展開/折疊子節(jié)點
更新時間:2013年01月10日 15:52:06 作者:
今天客戶提出要點擊菜單(TreeView實現(xiàn)的)的父級節(jié)點時,展開節(jié)點,很多新手朋友可能對此會很陌生,接下來介紹解決方法,感興趣的朋友可以了解下
以前一個現(xiàn)在不用的帳號發(fā)布的隨筆,現(xiàn)在人肉搬過來吧。
注冊用戶有一段時間了,一直很忙,到現(xiàn)在還沒有寫一篇,忽然覺的一定要花點時間記錄和總結(jié)一些東西。好吧,就從這里開始了。
今天客戶提出要點擊菜單(TreeView實現(xiàn)的)的父級節(jié)點時,展開節(jié)點。心想這個應(yīng)該是很常見的功能吧,特意google了一下,發(fā)現(xiàn)大部分是將的不是js實現(xiàn)的,有些js實現(xiàn)的寫的麻煩,干脆自己寫一個吧,應(yīng)該不難的。
首先思路是,
,讓文本點擊的時候執(zhí)行左邊‘+'號的事件,查看源碼看到,‘+'號的事件是:
javascript:TreeView_ToggleNode(ctl00_body__menuTree_Data,0,document.getElementById('ctl00_body__menuTreen0'),' ',document.getElementById('ctl00_body__menuTreen0Nodes'))
Ok,接下來就是篩選出所有的父級節(jié)點,加上處理事件就ok了,下面是完整代碼:
<script type="text/javascript">
$().ready(function()
{
$("img[src$=tv_NoExpend.jpg]").each(function()//篩選出所有的父級node
{
//ctl00_body__menuTreet4i//父級node的id是這樣的規(guī)則:ctl00_body__menuTreet加id加i
var id = $(this).parent().attr("id").replace("ctl00_body__menuTreet","").replace("i","");
var nId = 'ctl00_body__menuTreen'+id;
BindExpandJs($("#ctl00_body__menuTreet"+id+"i"),nId);//給‘文件夾'圖片綁定事件
BindExpandJs($("#ctl00_body__menuTreet"+id),nId); //給'文本節(jié)點'綁定事件 });
});
function BindExpandJs(obj,nId)
{
$(obj)
.css("cursor","pointer")
.removeAttr("href")
.click(function()
{
TreeView_ToggleNode(ctl00_body__menuTree_Data,0,document.getElementById(nId),' ',document.getElementById(nId+'Nodes'));
});
}
</script>
注冊用戶有一段時間了,一直很忙,到現(xiàn)在還沒有寫一篇,忽然覺的一定要花點時間記錄和總結(jié)一些東西。好吧,就從這里開始了。
今天客戶提出要點擊菜單(TreeView實現(xiàn)的)的父級節(jié)點時,展開節(jié)點。心想這個應(yīng)該是很常見的功能吧,特意google了一下,發(fā)現(xiàn)大部分是將的不是js實現(xiàn)的,有些js實現(xiàn)的寫的麻煩,干脆自己寫一個吧,應(yīng)該不難的。
首先思路是,

javascript:TreeView_ToggleNode(ctl00_body__menuTree_Data,0,document.getElementById('ctl00_body__menuTreen0'),' ',document.getElementById('ctl00_body__menuTreen0Nodes'))
Ok,接下來就是篩選出所有的父級節(jié)點,加上處理事件就ok了,下面是完整代碼:
復制代碼 代碼如下:
<script type="text/javascript">
$().ready(function()
{
$("img[src$=tv_NoExpend.jpg]").each(function()//篩選出所有的父級node
{
//ctl00_body__menuTreet4i//父級node的id是這樣的規(guī)則:ctl00_body__menuTreet加id加i
var id = $(this).parent().attr("id").replace("ctl00_body__menuTreet","").replace("i","");
var nId = 'ctl00_body__menuTreen'+id;
BindExpandJs($("#ctl00_body__menuTreet"+id+"i"),nId);//給‘文件夾'圖片綁定事件
BindExpandJs($("#ctl00_body__menuTreet"+id),nId); //給'文本節(jié)點'綁定事件 });
});
function BindExpandJs(obj,nId)
{
$(obj)
.css("cursor","pointer")
.removeAttr("href")
.click(function()
{
TreeView_ToggleNode(ctl00_body__menuTree_Data,0,document.getElementById(nId),' ',document.getElementById(nId+'Nodes'));
});
}
</script>
您可能感興趣的文章:
- 基于MVC5和Bootstrap的jQuery TreeView樹形控件(二)之數(shù)據(jù)支持json字符串、list集合
- 基于MVC5和Bootstrap的jQuery TreeView樹形控件(一)之數(shù)據(jù)支持json字符串、list集合
- ASP.NET中基于JQUERY的高性能的TreeView補充
- 打造基于jQuery的高性能TreeView(asp.net)
- 為jQuery.Treeview添加右鍵菜單的實現(xiàn)代碼
- Jquery.TreeView結(jié)合ASP.Net和數(shù)據(jù)庫生成菜單導航條
- jQuery 學習第六課 實現(xiàn)一個Ajax的TreeView
- 選擇TreeView控件的樹狀數(shù)據(jù)節(jié)點的JS方法(jquery)
- jQuery 樹形結(jié)構(gòu)的選擇器
- jQuery treeview樹形結(jié)構(gòu)應(yīng)用
相關(guān)文章
jquery實現(xiàn)上傳文件大小類型的驗證例子(推薦)
下面小編就為大家?guī)硪黄猨query實現(xiàn)上傳文件大小類型的驗證例子(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨想過來看看吧2016-06-06html5以及jQuery實現(xiàn)本地圖片上傳前的預(yù)覽代碼實例講解
這篇文章主要介紹了html5以及jQuery實現(xiàn)本地圖片上傳前的預(yù)覽代碼實例講解,圖文代碼實例講解的很清晰,有感興趣的同學可以研究下2021-03-03自定義一個jquery插件[鼠標懸浮時候 出現(xiàn)說明label]
自定義一個jquery插件,一個簡單的jquery.js,入門的jquery插件,jquery入門實例,jquery helloworld。2011-06-06jquery easyui validatebox remote的使用詳解
下面小編就為大家?guī)硪黄猨query easyui validatebox remote的使用詳解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11Jquery 獲取指定標簽的對象及屬性的設(shè)置與移除
這篇文章主要介紹了Jquery如何獲取指定標簽的對象及屬性的設(shè)置與移除,需要的朋友可以參考下2014-05-05