在项目中经常会用到TreeView,为了增加用户体验度,子节点选中时,父节点也要同步选中;父节点选中时,子节点也全部选中,在此分享一下ASP.NET中,TreeView的这一功能。
一、添加TreeView的OnClick事件
m_Tree.Attributes.Add("onclick", "TreeNodeChecked();");
function TreeNodeChecked() { var objNode = window.event.srcElement; if(objNode.tagName!="INPUT" || objNode.type !="checkbox") return; if(window.lastCheckNode != null) window.lastCheckNode.checked = false; window.lastCheckNode = objNode; }
二、选中所有子节点
function OnTreeNodeChecked() { var ele = window.event.srcElement; if(ele.type=='checkbox') { var childrenDivID = ele.id.replace('CheckBox','Nodes'); var div = document.getElementByIdx_x(childrenDivID); if(div==null)return; var checkBoxs = div.getElementsByTagName_r('INPUT'); for(var i=0;i<checkBoxs.length;i++) { if(checkBoxs[i].type=='checkbox') checkBoxs[i].checked=ele.checked; } } }
三、选中子节点时,父节点选中
function setChildCheckedState(div,state) { var objchild = div.childNodes; var count = objchild.length; for(var i=0;i<objchild.length;i++) { var tempObj = objchild[i]; if(tempObj.tagName=="INPUT" && tempObj.type == "checkbox") { tempObj.checked = state; } setChildCheckedState(tempObj,state); } } function TreeNodeChecked() { var objNode = window.event.srcElement; if(objNode.tagName!="INPUT" || objNode.type!="checkbox") return; if(objNode.checked == true) { setParentChecked(objNode); } var objID = objNode.getAttribute("ID"); var objParentDiv = document.getElementByIdx_x(objID.replace("CheckBox","Nodes")); if(objParentDiv==null || typeof(objParentDiv) == "undefined") return; setChildCheckedState(objParentDiv,objNode.checked); }
做项目也就是一个积累的过程,建立自己的代码库,才能更加高效的工作和学习。