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 相关文章推荐
JavaScript Event学习第十章 一些可替换的事件对
Feb 10 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
php中判断数组是一维,二维,还是多维的解决方法
2013/05/04 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
详解Python中的__new__()方法的使用
2015/04/09 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
附答案的Java面试题
2012/11/19 面试题
关于Java finally的面试题
2016/04/27 面试题
给老师的道歉信
2014/01/11 职场文书
初中政治教学反思
2014/01/17 职场文书
2014元旦晚会策划方案
2014/02/19 职场文书
服务标兵事迹材料
2014/05/04 职场文书
村委会贫困证明范本
2014/09/17 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
飞屋环游记观后感
2015/06/08 职场文书