JS控制TreeView的结点选择

 更新时间:2016年11月11日 09:07:07   作者:Lerry.Zhao  
这篇文章主要为大家详细介绍了JS控制TreeView的结点选择,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

网上有很多控制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数组的使用

    浅谈Javascript数组的使用

    这篇文章主要介绍了浅谈Javascript数组的使用的相关资料,包括数组的大小,数组的遍历以及数组的一些方法,非常细致,需要的朋友可以参考下
    2015-07-07
  • 微信小程序实现计时器开始和结束功能

    微信小程序实现计时器开始和结束功能

    这篇文章主要为大家详细介绍了微信小程序实现计时器开始和结束功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • Echart中国地图更换背景图的方法示例

    Echart中国地图更换背景图的方法示例

    本文主要介绍了Echart中国地图更换背景图的方法示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • bootstrap时间控件daterangepicker使用方法及各种小bug修复

    bootstrap时间控件daterangepicker使用方法及各种小bug修复

    这篇文章主要介绍了bootstrap时间控件daterangepicker使用方法,及各种小bug修复,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • jQuery检测输入的字符串包含的中英文的数量

    jQuery检测输入的字符串包含的中英文的数量

    这篇文章主要介绍了jQuery检测输入的字符串包含的中英文的数量的实现方法,非常的实用,这里推荐给小伙伴,有需要的朋友可以参考下。
    2015-04-04
  • javascript操作元素的常见方法小结

    javascript操作元素的常见方法小结

    这篇文章主要介绍了javascript操作元素的常见方法,结合实例形式总结分析了JavaScript针对页面元素动态获取、赋值、动态操作相关使用技巧,需要的朋友可以参考下
    2019-11-11
  • Web开发必知Javascript技巧大全

    Web开发必知Javascript技巧大全

     JavaScript是一个绝冠全球的编程语言,可用于Web开发、移动应用开发(PhoneGap、Appcelerator)、服务器端开发(Node.js和Wakanda)等等,通过本文给大家介绍Web开发必知Javascript技巧大全,需要的朋友参考下吧
    2016-02-02
  • JSONP原理及应用实例详解

    JSONP原理及应用实例详解

    这篇文章主要介绍了JSONP原理及应用实例详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • url特殊字符编码encodeURI VS encodeURIComponent分析

    url特殊字符编码encodeURI VS encodeURIComponent分析

    这篇文章主要介绍了url特殊字符编码encodeURI VS encodeURIComponent分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • JavaScript字符串String和Array操作的有趣方法

    JavaScript字符串String和Array操作的有趣方法

    字符串和数组在程序编写过程中是十分常用的类型,因此程序语言都会将String和Array作为基本类型,并提供许多字符串和数组的方法来简化对字符串的操作
    2012-12-12

最新评论