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 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
JavaScript的parseInt 进制问题
May 07 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
Javascript变量函数浅析
Sep 02 Javascript
jQuery.extend 函数详解
Feb 03 Javascript
JS打印gridview实现原理及代码
Feb 05 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
JavaScript闭包和回调详解
Aug 09 Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
JavaScript工具库MyTools详解
Jan 01 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
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
php header函数的常用http头设置
2015/06/25 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
很好用的js日历算法详细代码
2013/03/07 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
JavaScript DOM基础
2015/04/13 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
vue中监听返回键问题
2019/08/28 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
python发送伪造的arp请求
2014/01/09 Python
举例讲解Python中的算数运算符的用法
2015/05/13 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
全陪导游欢迎词
2014/01/17 职场文书
银行给客户的感谢信
2015/01/23 职场文书
上课说话检讨书
2015/01/27 职场文书
推广普通话的宣传语
2015/07/13 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
MySQL 慢查询日志深入理解
2021/04/22 MySQL
深入理解redis中multi与pipeline
2021/06/02 Redis