视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JS控制TreeView的结点选择
2020-11-27 20:28:54 责编:小采
文档


网上有很多控制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();");
 
}

下载本文
显示全文
专题