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 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
JQuery datepicker 使用方法
May 20 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
ionic实现底部分享功能
May 11 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
JS如何生成随机验证码
Mar 02 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 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
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
PHP memcache扩展的三种安装方法
2009/04/26 PHP
用PHP实现递归循环每一个目录
2010/08/08 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
PHP自定义错误用法示例
2016/09/28 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
javascript this用法小结
2008/12/19 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
JS跨域请求的问题解析
2018/12/03 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
Python3.6简单反射操作示例
2018/06/14 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
Python 控制终端输出文字的实例
2019/07/12 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
关于VPN
2012/06/10 面试题
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
业务员管理制度范本
2015/08/06 职场文书
五年级作文之成长
2019/09/16 职场文书