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 TextBox自动完成条
Jul 22 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
JS父页面与子页面相互传值方法
Mar 05 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
Prototype 工具函数 学习
2009/07/23 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
js实现图片轮播效果
2015/12/19 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
Python面向对象类的继承实例详解
2018/06/27 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
Pytorch之保存读取模型实例
2019/12/30 Python
在pycharm中实现删除bookmark
2020/02/14 Python
Python 中如何写注释
2020/08/28 Python
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
单位门卫岗位职责
2013/12/20 职场文书
党校培训思想汇报
2013/12/30 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
2015年全国爱耳日活动总结
2015/02/27 职场文书
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫
OpenCV实现常见的四种图像几何变换
2022/04/01 Python