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 相关文章推荐
js查找父节点的简单方法
Jun 28 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 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
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
Javascript与flash交互通信基础教程
2008/08/07 Javascript
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
python实现报表自动化详解
2017/11/16 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
python中的decimal类型转换实例详解
2019/06/26 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
物流管理毕业生自荐信
2013/10/24 职场文书
工作失误检讨书范文大全
2014/01/13 职场文书
房地产项目建议书
2014/03/12 职场文书
取保候审保证书
2014/04/30 职场文书
2014年共青团工作总结
2014/12/10 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers
Python制作动态字符画的源码
2021/08/04 Python