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 相关文章推荐
jQuery 技巧小结
Apr 02 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
再探JavaScript作用域
Sep 24 Javascript
jquery获取当前日期的方法
Jan 14 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 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
我的论坛源代码(三)
2006/10/09 PHP
php include的妙用,实现路径加密
2008/07/29 PHP
PHP 简单日历实现代码
2009/10/28 PHP
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
JavaScript 常用函数
2009/12/30 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
javascript实现放大镜功能
2020/12/09 Javascript
给Python初学者的一些编程技巧
2015/04/03 Python
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
python 容器总结整理
2017/04/04 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
python中的协程深入理解
2019/06/10 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
研发工程师的岗位职责
2013/11/18 职场文书
单位实习证明怎么写
2014/01/17 职场文书
红旗方阵解说词
2014/02/12 职场文书
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
网站推广策划方案
2014/06/04 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server