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 removeChild 障眼法 可能出现的错误
Oct 06 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
JS通用方法触发点击事件代码实例
Feb 17 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 新手入门
php最简单的删除目录与文件实现方法
2014/11/28 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
可输入的下拉框
2006/06/19 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
python写的一个squid访问日志分析的小程序
2014/09/17 Python
python实现简单ftp客户端的方法
2015/06/28 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
Python 面试中 8 个必考问题
2018/11/16 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
经理助理岗位职责
2014/03/05 职场文书
群众路线党课主持词
2014/04/01 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
干部鉴定材料
2014/05/18 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
谢师宴答谢词
2015/01/05 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python