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中delegate和on的用法与区别详细解析
Jan 26 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
纯javascript制作日历控件
Jul 17 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
js实现水平滚动菜单导航
Jul 21 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
详解Puppeteer 入门教程
May 09 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 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
德生PL330的评价与改造
2021/03/02 无线电
PHP实现过滤各种HTML标签
2015/05/17 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
Python 时间处理datetime实例
2008/09/06 Python
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python转换HTML到Text纯文本的方法
2015/01/15 Python
Python创建模块及模块导入的方法
2015/05/27 Python
python中PIL安装简单教程
2016/04/21 Python
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
python实现的自动发送消息功能详解
2019/08/15 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
爱情检讨书大全
2014/01/21 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
安全隐患整改报告
2014/11/06 职场文书
先进班集体事迹材料
2014/12/25 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技