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 相关文章推荐
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
浅谈javascript中的闭包
May 13 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
Jun 05 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
微信小程序实现吸顶特效
Jan 08 Javascript
jquery实现简单每周轮换的日历
Sep 10 jQuery
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
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
用JS实现的一个include函数
2007/07/21 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
JS常用知识点整理
2017/01/21 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
python实现telnet客户端的方法
2015/04/15 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
python中强大的format函数实例详解
2018/12/05 Python
python版本五子棋的实现代码
2018/12/11 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
公关关系专员的自我评价分享
2013/11/20 职场文书
编辑硕士自荐信范文
2013/11/27 职场文书
女方婚礼新郎答谢词
2014/01/11 职场文书
文字自荐书范文
2014/02/10 职场文书
会计核算科岗位职责
2014/03/19 职场文书
党建工作先进材料
2014/05/02 职场文书
天猫活动策划方案
2014/08/21 职场文书
作风建设年度心得体会
2014/10/29 职场文书
人事局接收函
2015/01/31 职场文书
风之谷观后感
2015/06/11 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python