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 相关文章推荐
JavaScript中的Document文档对象
Jan 16 Javascript
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
Javascript将string类型转换int类型
Dec 09 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
vue-cli2.9.3 详细教程
Apr 23 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 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
php网站被挂木马后的修复方法总结
2014/11/06 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
Python验证码识别的方法
2015/07/10 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
python实现简单的购物程序代码实例
2020/03/03 Python
Python如何获取文件指定行的内容
2020/05/27 Python
python从PDF中提取数据的示例
2020/10/30 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
纺织工程专业个人求职信范文
2014/01/27 职场文书
鼓励运动员的广播稿
2014/02/08 职场文书
领导接待方案
2014/03/13 职场文书
网络信息安全承诺书
2014/03/26 职场文书
企业人事任命书
2014/06/05 职场文书
交通工程专业推荐信
2014/09/06 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
2015年中个人总结范文
2015/03/10 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang