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 window.opener的用法分析
Apr 07 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
基于jquery的监控数据是否发生改变
Apr 11 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
常用jQuery选择器总结
Jul 11 Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 Javascript
Angular.js实现注册系统的实例详解
Dec 18 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 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
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
Python ljust rjust center输出
2008/09/06 Python
python实现socket客户端和服务端简单示例
2014/02/24 Python
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
python字符串替换的2种方法
2014/11/30 Python
python实现log日志的示例代码
2018/04/28 Python
django加载本地html的方法
2018/05/27 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
python中setuptools的作用是什么
2020/06/19 Python
python入门教程之基本算术运算符
2020/11/13 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
UML设计模式笔试题
2014/06/07 面试题
新闻编辑求职信
2014/04/09 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
岳麓书院导游词
2015/02/03 职场文书
房产证明范本
2015/06/19 职场文书
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python