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 isArray 数组类型检测函数
Oct 08 Javascript
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
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中json_decode()和json_encode()的使用方法
2012/06/04 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
python 把列表转化为字符串的方法
2018/10/23 Python
Django REST framework 视图和路由详解
2019/07/19 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
Python 发送邮件方法总结
2020/08/10 Python
详解python metaclass(元类)
2020/08/13 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
问卷调查计划书
2014/01/10 职场文书
请假条的格式
2014/04/11 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
2014年路政工作总结
2014/12/10 职场文书
教师岗位职责范本
2015/04/02 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
SQL Server删除表中的重复数据
2022/05/25 SQL Server