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 相关文章推荐
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
js 调用百度分享功能
Feb 27 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
angularjs路由传值$routeParams详解
Sep 05 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
Node.js API详解之 util模块用法实例分析
May 09 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下实现定时执行php脚本
2015/02/13 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
php实现微信支付之退款功能
2018/05/30 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
javascript 打印页面代码
2009/03/24 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
简单的Python2.7编程初学经验总结
2015/04/01 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Python实现的购物车功能示例
2018/02/11 Python
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
设计师珠宝:Ylang 23
2018/05/11 全球购物
恐龙的灭绝教学反思
2014/02/12 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
信息员培训方案
2014/06/12 职场文书
会计系毕业求职信
2014/08/07 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
学前教育见习总结
2015/06/23 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
python图像处理 PIL Image操作实例
2022/04/09 Python