js获取TreeView控件选中节点的Text和Value值的方法


Posted in Javascript onNovember 24, 2012

在实际项目中,遇到一个问题,首先弹出一个新窗口,新窗口中放了一个TreeView控件,TreeView控件的数据绑定在我的上一篇随笔(TreeView绑定XML数据源C#代码示例)中有讲到,现在要解决的是,如何单击TreeView中一个节点,返回Text和Value到父页面并关闭该新窗口。
首先,在后台代码中为TreeView添加属性onclick以支持TreeView的客户端事件,代码如下:

if (!IsPostBack) 
{ 
TreeView1.Attributes.Add("onclick", "ReturnValue()");//ReturnValue为javascript函数 
BindTreeView(); 
}

那现在就要解决如何通过js获得TreeView中被选中的那个节点,脚本如下:
function ReturnValue() { 
var objNode = event.srcElement; 
var unitid = event.srcElement.href; 
if (objNode.tagName != "SPAN") { 
return; 
} 
window.opener.document.getElementById("txtUnit").value = objNode.getAttribute("innerHtml"); 
window.opener.document.getElementById("txtUnitID").value = unitid; 
window.close(); 
}

其实这里用了点小花招,因为我实在不知道在哪个属性里能获得绑定给TreeView的ValueField的值,所以,Value值我一并绑给了NavigateUrl,也就是写黄色部分代码的原因,Html代码如下:
<asp:TreeView ID="TreeView1" runat="server" ExpandDepth="1"> 
<DataBindings> 
<asp:TreeNodeBinding TextField="NAME" ValueField="Value" NavigateUrlField="Value" SelectAction="None" /> 
</DataBindings> 
</asp:TreeView>

红色部分代码是用来获取TreeView上显示文字的,因为如果你去查看源文件的话,你会发现,TreeView的Text属性值被放在了SPAN中。
绿色部分代码是用来回填父页面的,但是要注意的是,"txtUnit"必须是客户端控件,因为如果是服务器端控件,弹窗在编译时会报不存在该控件。
这样,我需要的功能就实现了!另外,有人可能会说,父页面中用来装载回填值的是客户端控件,那如果要在服务器事件中使用怎么办?也很简单,C#代码如下:
Request.Form["txtUnit"].ToString();
但是要注意了,这里的"txtUnit"可不是控件ID,而是name属性了!
Javascript 相关文章推荐
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
基于jQuery替换table中的内容并显示进度条的代码
Aug 02 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
Nov 03 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
基于javascript处理nginx请求过程详解
Jul 07 Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 #Javascript
js 如何实现对数据库的增删改查
Nov 23 #Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 #Javascript
IE下使用cloneNode注意事项分享
Nov 22 #Javascript
jquery remove方法应用详解
Nov 22 #Javascript
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 #Javascript
ECMAScript 创建自己的js类库
Nov 22 #Javascript
You might like
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
ASP.NET中的身份验证有那些
2012/07/13 面试题
金融专业个人求职信
2013/09/22 职场文书
英语专业毕业生自荐信范文
2013/12/31 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
《猴子种树》教学反思
2014/02/14 职场文书
爱心活动计划书
2014/04/26 职场文书
班主任个人工作反思
2014/04/28 职场文书
政府采购方案
2014/06/12 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
发布会邀请函
2015/01/31 职场文书
django上传文件的三种方式
2021/04/29 Python
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers