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插件之自动添加删除行功能介绍
Oct 14 Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
浅谈vue首屏加载优化
Jun 28 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
笑谈配置,使用Smarty技术
2007/01/04 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
分享php分页的功能模块
2015/06/16 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python使用webbrowser浏览指定url的方法
2015/04/04 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
python对象与json相互转换的方法
2019/05/07 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
Oracle的内存结构(Memory structures)
2015/06/10 面试题
中式面点餐厅创业计划书
2014/01/29 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
事业单位年度考核评语
2014/12/31 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
教你用python实现12306余票查询
2021/06/30 Python