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 CSS 修改学习第四章 透明度设置
Feb 19 Javascript
js 窗口抖动示例
Sep 04 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
PHP实现文件安全下载
2006/10/09 PHP
php调用mysql存储过程
2007/02/14 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
javascript基本算法汇总
2016/03/09 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
JS验证码实现代码
2017/09/14 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
Python操作列表的常用方法分享
2014/02/13 Python
python实现多线程抓取知乎用户
2016/12/12 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
python中的数据结构比较
2019/05/13 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
pandas 对group进行聚合的例子
2019/12/27 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
python复合条件下的字典排序
2020/12/18 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
平面设计的岗位职责
2013/11/08 职场文书
给同学的道歉信
2014/01/16 职场文书
医学生个人求职信范文
2014/02/07 职场文书
财务总监管理职责范文
2014/03/09 职场文书
医师定期考核实施方案
2014/05/07 职场文书
上班迟到检讨书
2014/09/15 职场文书
关于国庆节的广播稿
2015/08/19 职场文书