JS控制TreeView的结点选择


Posted in Javascript onNovember 11, 2016

网上有很多控制TreeView的checkbox选中,但是自己尝试的时候,要么报错,要么不可行。以下这种写法是经过验证有效的,仅作参考,思维比较巧妙!

Tree:

<asp:TreeView ID="treeViewDapartment" runat="server" SelectedNodeStyle-BackColor="GrayText" onclick="javascript:NodeCheck();" 
     Font-Size="13px" ShowCheckBoxes="All" ShowLines="true" AutoGenerateDataBindings="false" ShowExpandCollapse="true" >
</asp:TreeView>

脚本:

<script language="javascript" type="text/javascript">
   //节点父节点选中子节点全选
   function NodeCheck() {  
      var o = window.event.srcElement;
      if (o.tagName == "INPUT" && o.type == "checkbox") //点击treeview的checkbox是触发 
      {
        var d = o.id; //获得当前checkbox的id; 
        var e = d.replace("CheckBox", "Nodes"); //通过查看脚本信息,获得包含所有子节点div的id 
        var div = window.document.getElementById(e); //获得div对象 
        if (div != null) //如果不为空则表示,存在自节点 
        {
          var check = div.getElementsByTagName("INPUT"); //获得div中所有的已input开始的标记 
          for (i = 0; i < check.length; i++) {
            if (check[i].type == "checkbox") //如果是checkbox 
            {
              check[i].checked = o.checked; //字节点的状态和父节点的状态相同,即达到全选 
            }
          }
        }
        else //点子节点的时候,使父节点的状态改变,即不为全选
        {
          var divid = o.parentElement.parentElement.parentElement.parentElement.parentElement; //子节点所在的div   
          var id = divid.id.replace("Nodes", "CheckBox"); //获得根节点的id 

          var checkbox = divid.getElementsByTagName("INPUT"); //获取所有子节点数
          var s = 0;
          for (i = 0; i < checkbox.length; i++) {
            if (checkbox[i].checked) //判断有多少子节点被选中 
            {
              s++;
            }
          }
          if (s == checkbox.length) //如果全部选中 或者 选择的是另外一个根节点的子节点 , 
          {                //  则开始的根节点的状态仍然为选中状态 
            window.document.getElementById(id).checked = true;
          }
          else {                //否则为没选中状态 
            window.document.getElementById(id).checked = false;
          }
        }

      }
  }
</script>

这个脚本的写法巧妙运用生成的页面源文件中checkbox与其子结点div之间的关系!

那么,只需要在注册一下触发事件即可:

protected void Page_Load(object sender, EventArgs e)
{  
    this.treeViewDapartment.Attributes.Add("onclick", "NodeCheck();"); 

}

特别感谢,雷云锋给予的指导!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
慎用 somefunction.prototype 分析
Jun 02 Javascript
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
Jun 21 Javascript
详解Puppeteer 入门教程
May 09 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
H5实现手机拍照和选择上传功能
Dec 18 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 Javascript
node+express制作爬虫教程
Nov 11 #Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 #Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 #Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 #Javascript
通过扫描二维码打开app的实现代码
Nov 10 #Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 #Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 #Javascript
You might like
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
一个多文件上传的例子(原创)
2006/10/09 PHP
php中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
python if not in 多条件判断代码
2016/09/21 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
opencv实现图像平移效果
2021/03/24 Python
中学生爱国演讲稿
2013/12/31 职场文书
单位实习证明怎么写
2014/01/17 职场文书
玲玲的画教学反思
2014/02/04 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
nginx服务器的下载安装与使用详解
2021/08/02 Servers