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 22 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
基于Layer+jQuery的自定义弹框
May 26 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
深入理解Vuex 模块化(module)
Sep 26 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
JavaScript解析JSON数据示例
Jul 16 Javascript
使用JS实现简易计算器
Jun 14 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
linux下 C语言对 php 扩展
2008/12/14 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
VUE长按事件需求详解
2017/10/18 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
SQL语言面试题
2013/08/27 面试题
超市促销活动方案
2014/03/05 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA