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 相关文章推荐
JS高级笔记
Jul 13 Javascript
基于jquery的拖动布局插件
Nov 25 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
JS中 用户登录系统的解决办法
Apr 15 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
js实现分割上传大文件
Mar 09 Javascript
Bootstrap精简教程中秋大放送
Sep 15 Javascript
package.json文件配置详解
Jun 15 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 06 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
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
ThinkPHP的I方法使用详解
2014/06/18 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
使用jquery获取url及url参数的简单实例
2016/06/14 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
Python高斯消除矩阵
2019/01/02 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
linux面试题参考答案(10)
2016/10/26 面试题
2014全国两会大学生学习心得体会
2014/03/10 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
银行给客户的感谢信
2015/01/23 职场文书
写给老师的保证书
2015/05/09 职场文书
总经理聘用协议书
2015/09/21 职场文书