Home >Web Front-end >JS Tutorial >JS controls the node selection of TreeView

JS controls the node selection of TreeView

高洛峰
高洛峰Original
2016-12-07 10:40:221405browse

There are many checkbox selections for controlling TreeView on the Internet, but when I try it myself, I either get an error or it is not feasible. The following writing method is proven and effective. It is for reference only. The thinking is more clever!

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:

<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>

The writing method of this script cleverly uses the relationship between the checkbox and the sub-node div in the generated page source file!

Then, just register the trigger event:

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



Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn