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实战_读书笔记1—选择jQuery
Jan 22 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
jquery默认校验规则整理
Mar 24 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
jQuery选择器基础入门教程
May 10 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
JS实现的文字间歇循环滚动效果完整示例
Feb 13 Javascript
vue+eslint+vscode配置教程
Aug 09 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
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
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
2014年学校教学工作总结
2014/12/06 职场文书
2014年稽查工作总结
2014/12/20 职场文书
个人简历求职信范文
2015/03/20 职场文书
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL