jquery实现点击TreeView文本父节点展开/折叠子节点


Posted in Javascript onJanuary 10, 2013

以前一个现在不用的帐号发布的随笔,现在人肉搬过来吧。
注册用户有一段时间了,一直很忙,到现在还没有写一篇,忽然觉的一定要花点时间记录和总结一些东西。好吧,就从这里开始了。

今天客户提出要点击菜单(TreeView实现的)的父级节点时,展开节点。心想这个应该是很常见的功能吧,特意google了一下,发现大部分是将的不是js实现的,有些js实现的写的麻烦,干脆自己写一个吧,应该不难的。

首先思路是,jquery实现点击TreeView文本父节点展开/折叠子节点,让文本点击的时候执行左边‘+'号的事件,查看源码看到,‘+'号的事件是:
javascript:TreeView_ToggleNode(ctl00_body__menuTree_Data,0,document.getElementById('ctl00_body__menuTreen0'),' ',document.getElementById('ctl00_body__menuTreen0Nodes'))
Ok,接下来就是筛选出所有的父级节点,加上处理事件就ok了,下面是完整代码:

<script type="text/javascript"> 
$().ready(function() 
{ 
$("img[src$=tv_NoExpend.jpg]").each(function()//筛选出所有的父级node 
{ 
//ctl00_body__menuTreet4i//父级node的id是这样的规则: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); //给'文本节点'绑定事件 }); 
}); 
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>
Javascript 相关文章推荐
实现连缀调用的map方法(prototype)
Aug 05 Javascript
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
常用jQuery选择器总结
Jul 11 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
使用node.js搭建服务器
May 20 Javascript
浅谈react+es6+webpack的基础配置
Aug 09 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 #Javascript
防止文件缓存的js代码
Jan 10 #Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 #Javascript
js修改table中Td的值(定义td的双击事件)
Jan 10 #Javascript
javascript之Partial Application学习
Jan 10 #Javascript
javascript之典型高阶函数应用介绍二
Jan 10 #Javascript
javascript之典型高阶函数应用介绍
Jan 10 #Javascript
You might like
php设计模式 Command(命令模式)
2011/06/26 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
javascript语言结构小记(一)
2011/09/10 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
js时间控件只显示年月
2017/01/08 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
python基础教程之自定义函数介绍
2014/08/29 Python
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
简介Django框架中可使用的各类缓存
2015/07/23 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
大三自我鉴定范文
2013/10/05 职场文书
党员思想汇报范文
2013/12/30 职场文书
追悼会子女答谢词
2014/01/28 职场文书
护士进修自我鉴定
2014/02/07 职场文书
个人工作总结范文2014
2014/11/07 职场文书
Python+Appium新手教程
2021/04/17 Python