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代码(站点及虚拟目录)
Oct 20 Javascript
functional继承模式 摘自javascript:the good parts
Jun 20 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 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 获取可变函数参数的函数
2009/08/26 PHP
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
Web开发之JavaScript
2012/03/29 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
python 从远程服务器下载东西的代码
2013/02/10 Python
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
Python迭代和迭代器详解
2016/11/10 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
查看python下OpenCV版本的方法
2018/08/03 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
推荐信怎么写
2014/05/09 职场文书
离婚协议书标准格式
2014/10/04 职场文书
黄石寨导游词
2015/02/05 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书