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列表框操作函数集合汇总
Nov 28 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
JavaScript实现省份城市的三级联动
Feb 11 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 实用代码收集
2010/01/22 PHP
smarty中js的调用方法示例
2014/10/27 PHP
10个php函数实用却不常见
2015/10/13 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
python对html过滤处理的方法
2018/10/21 Python
python批量创建指定名称的文件夹
2019/03/21 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
普天C++笔试题
2016/03/20 面试题
实习生个人找工作的自我评价
2013/10/30 职场文书
小学新学期寄语
2014/04/02 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
部队个人年终总结
2015/03/02 职场文书
党员承诺书格式范文
2015/04/28 职场文书
学校运动会加油词
2015/07/18 职场文书
《花钟》教学反思
2016/02/17 职场文书
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技