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 动态添加表格行
Jun 22 Javascript
use jscript Create a SQL Server database
Jun 16 Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 Javascript
JavaScript中CreateTextFile函数
Aug 30 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
PHP判断远程图片是否存在的几种方法
2014/05/04 PHP
深入理解PHP内核(一)
2015/11/10 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
一个简单的javascript类定义例子
2009/09/12 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
React Component存在的几种形式详解
2018/11/06 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
python中spy++的使用超详细教程
2021/01/29 Python
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
营业经理岗位职责
2013/11/10 职场文书
专业销售业务员求职信
2013/11/18 职场文书
大学生工作求职信
2014/06/23 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
四风自我剖析材料
2014/09/30 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
医院病假条怎么写
2015/08/17 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis