1.当然有一个TreeView咯,这里ID名为 treeViewType
- <asp:TreeView ID="treeViewType" runat="server" ExpandDepth="1"></asp:TreeView>
2.然后需要两个按钮,其中 TreeviewExpandCollapseAll 为JS方法,后面介绍
- <input type="button" value="展开" class="but1" onclick="TreeviewExpandCollapseAll('<%=treeViewType.ClientID%>', true)" />
- <input type="button" value="收缩" class="but1" onclick="TreeviewExpandCollapseAll('<%=treeViewType.ClientID%>', false)" />
3.最关键的JS方法来了,嘿嘿
- /*
- * 树展开收缩方法 2010-03-23 PM By WQY
- * treeViewId: 树对象
- * expandAll: 展开或收缩
- */
- function TreeviewExpandCollapseAll(treeViewId, expandAll) {
- var displayState = (expandAll == true ? "none" : "block");
- var treeView = document.getElementById(treeViewId);
- if (treeView) {
- var treeLinks = treeView.getElementsByTagName("a");
- var nodeCount = treeLinks.length;
- for (i = 0; i < nodeCount; i++) {
- if (treeLinks[i].firstChild.tagName) {
- if (treeLinks[i].firstChild.tagName.toLowerCase() == "img") {
- var currentToggleLink = treeLinks[i];
- var childContainer = GetParentByTagName("table", currentToggleLink).nextSibling;
- if (childContainer.style.display == displayState) {
- eval(currentToggleLink.href);
- }
- }
- }
- }
- }
- }
- function GetParentByTagName(parentTagName, childElementObj) {
- var parent = childElementObj.parentNode;
- while (parent.tagName.toLowerCase() != parentTagName.toLowerCase()) {
- parent = parent.parentNode;
- }
- return parent;
- }