有没有可能用javascript捕获treeview的展开/折叠事件？

mimouzao 2012-03-14 08:01:44

如题，小子先谢过大侠！

...全文

113 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

mimouzao 2012-03-16

打赏
举报



 <asp:TreeNode Text="parent2" Value="P2">

                <asp:TreeNode Text="child51" Value="child51"></asp:TreeNode>

                <asp:TreeNode Text="child52" Value="child52"></asp:TreeNode>

                <asp:TreeNode Text="child53" Value="child53"></asp:TreeNode>

                <asp:TreeNode Text="child54" Value="child54"></asp:TreeNode>

                <asp:TreeNode Text="child55" Value="child55"></asp:TreeNode>

                <asp:TreeNode Text="child56" Value="child56"></asp:TreeNode>

                <asp:TreeNode Text="child57" Value="child57"></asp:TreeNode>

                <asp:TreeNode Text="child58" Value="child58"></asp:TreeNode>

                <asp:TreeNode Text="child59" Value="child59"></asp:TreeNode>

                <asp:TreeNode Text="child60" Value="child60"></asp:TreeNode>

                <asp:TreeNode Text="child61" Value="child61"></asp:TreeNode>

                <asp:TreeNode Text="child62" Value="child62"></asp:TreeNode>

                <asp:TreeNode Text="child63" Value="child63"></asp:TreeNode>

                <asp:TreeNode Text="child64" Value="child64"></asp:TreeNode>

                <asp:TreeNode Text="child65" Value="child65"></asp:TreeNode>

                <asp:TreeNode Text="child66" Value="child66"></asp:TreeNode>

                <asp:TreeNode Text="child67" Value="child67"></asp:TreeNode>

                <asp:TreeNode Text="child68" Value="child68"></asp:TreeNode>

                <asp:TreeNode Text="child69" Value="child69"></asp:TreeNode>

                <asp:TreeNode Text="child70" Value="child70"></asp:TreeNode>

                <asp:TreeNode Text="child71" Value="child71"></asp:TreeNode>

                <asp:TreeNode Text="child72" Value="child72"></asp:TreeNode>

                <asp:TreeNode Text="child73" Value="child73"></asp:TreeNode>

                <asp:TreeNode Text="child74" Value="child74"></asp:TreeNode>

                <asp:TreeNode Text="child75" Value="child75"></asp:TreeNode>

                <asp:TreeNode Text="child76" Value="child76"></asp:TreeNode>

                <asp:TreeNode Text="child77" Value="child77"></asp:TreeNode>

                <asp:TreeNode Text="child78" Value="child78"></asp:TreeNode>

                <asp:TreeNode Text="child79" Value="child79"></asp:TreeNode>

                <asp:TreeNode Text="child80" Value="child80"></asp:TreeNode>

                <asp:TreeNode Text="child81" Value="child81"></asp:TreeNode>

                <asp:TreeNode Text="child82" Value="child82"></asp:TreeNode>

                <asp:TreeNode Text="child83" Value="child83"></asp:TreeNode>

                <asp:TreeNode Text="child84" Value="child84"></asp:TreeNode>

                <asp:TreeNode Text="child85" Value="child85"></asp:TreeNode>

                <asp:TreeNode Text="child86" Value="child86"></asp:TreeNode>

                <asp:TreeNode Text="child87" Value="child87"></asp:TreeNode>

                <asp:TreeNode Text="child88" Value="child88"></asp:TreeNode>

                <asp:TreeNode Text="child89" Value="child89"></asp:TreeNode>

                <asp:TreeNode Text="child90" Value="child90"></asp:TreeNode>

                <asp:TreeNode Text="child91" Value="child91"></asp:TreeNode>

                <asp:TreeNode Text="child92" Value="child92"></asp:TreeNode>

                <asp:TreeNode Text="child93" Value="child93"></asp:TreeNode>

                <asp:TreeNode Text="child94" Value="child94"></asp:TreeNode>

                <asp:TreeNode Text="child95" Value="child95"></asp:TreeNode>

                <asp:TreeNode Text="child96" Value="child96"></asp:TreeNode>

                <asp:TreeNode Text="child97" Value="child97"></asp:TreeNode>

                <asp:TreeNode Text="child98" Value="child98"></asp:TreeNode>

                <asp:TreeNode Text="child99" Value="child99"></asp:TreeNode>

                <asp:TreeNode Text="child100" Value="child100"></asp:TreeNode>

            </asp:TreeNode>

        </Nodes>

        <NodeStyle Font-Names="Tahoma" Font-Size="12pt" ForeColor="Black" 

            HorizontalPadding="2px" NodeSpacing="0px" VerticalPadding="5px" />

        <ParentNodeStyle Font-Bold="False" />

        <SelectedNodeStyle BackColor="#B5B5B5" Font-Underline="False" 

            HorizontalPadding="2px" VerticalPadding="5px" />

    

    </asp:TreeView>

</div> 



<div id='div2' class="div" style="position:absolute;overflow:auto; width:50%; height:500px; left:31%; top:40px" onscroll="showScroll2(this)">

<table border="0" style="width:100%;  position:absolute ">

<tr><td style="height:25px"></td></tr>

<%  For i = 1 To 100%>

<%  If i = 51 Then%>

<tr><td style="height:25px"></td></tr>

<%End If%>

<tr <%if i<=50 then%>id="P1_<%=i%>"<%else%>id="P2_<%=i%>"<%end if%>>

    <td style="height:25px">

    <ul id="nav<%=i%>" >

        <li><a href="#">test<%=i%></a></li>

        <%If i mod 4=1 then%>

        <li><a href="#">testScroll</a>

            <ul>

                <li><a href="#">History</a></li>

                <li><a href="#">Team</a></li>

                <li><a href="#">Offices</a></li>

            </ul>

        </li>

        <li><a href="#">検査</a>

            <ul>

                <li><a href="#">検査</a></li>

                <li><a href="#">検査</a></li>

                <li><a href="#">検査</a></li>

            </ul>

        </li>

        <li style="border-right: 1px solid #ccc;"><a href="#">Contact Us</a>

            <ul>

                <li><a href="#">United</a></li>

                <li><a href="#">France</a></li>

                <li><a href="#">USA</a></li>

                <li><a href="#">Australia</a></li>

            </ul>

        </li>

        <%end if%>

    </ul>

    </td>

</tr>

<%Next%>

    </table>

</div>



</form>



</body>

</html>

后台



Public Class test2

    Inherits System.Web.UI.Page





    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load



        hidText.Value = "parent1,parent2"

        hidValue.Value = "P1,P2"

    End Sub



End Class

hehao19880322 2012-03-16

打赏
举报

不错啊

mimouzao 2012-03-16

打赏
举报

自己解决！把代码贴出来，主要实现：
1.JS菜单。
2.treeview和div滚动条联动
3.JS实现treeview折叠/展开时，div也部分隐藏/显示
注：回发时，div的折叠效果会消失。。ORZ。。
前台



<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test2.aspx.vb" Inherits="JSddlTest.test2" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>scrollTest</title>

<style type="text/css">

.div {	

	border-right: #00ffff 1px solid;

	border-top: #00ffff 1px solid;

	border-left: #00ffff 1px solid;

	border-bottom: #00ffff 1px solid;

}

 <!--

  

ul {

  margin: 0;

  padding: 0;

  list-style: none;

  border-right: 1px solid #ccc;

   font: normal 12px verdana;

  }

  

ul li ul {

  margin: 0;

  padding: 0;

  list-style: none;

  border-bottom: 1px solid #ccc;

  }

  

ul li {

  position: relative;

  float:left;

  width: 80px;

  text-align:center;

  }

  

ul li ul li {

  position: relative;

  float:inherit;

  }

  

li ul {

  position: absolute ;

  left: 0px; 

  top: 23px;

  display: none;



  }

/* Styles for Menu Items */

li a:hover{

    background: #146C9C;

    color: #fff;

  }



ul li a {

  display: block;

  text-decoration: none;

  color: #777;

  background: #fff; /* IE6 Bug */

  padding: 5px;

  border: 1px solid #ccc; /* IE6 Bug */

  border-right:0;

  height:12px;

  }

  

ul li ul li a {

  display: block;

  text-decoration: none;

  color: #777;

  background: #fff; /* IE6 Bug */

  padding: 5px;

  border: 1px solid #ccc; /* IE6 Bug */

  border-bottom:0;

  border-right:0;

  }

  

/* Holly Hack. IE Requirement \*/

* html ul li { float: left; height: 1%; }

* html ul li a { height: 1%; }

/* End */

li:hover ul, li.over ul { display: block; } /* The magic */

-->

</style>



<script type="text/javascript" language="javascript">



    function showScroll(obj) {

        document.all.div2.scrollTop= obj.scrollTop;

    }

    function showScroll2(obj) {

        document.all.tv1.scrollTop = obj.scrollTop;

    }



    // JavaScript Document

    startList = function () {

        if (document.all && document.getElementById) {

            navRoot = document.getElementById("nav1");

            for (i = 0; i < navRoot.childNodes.length; i++) {

                node = navRoot.childNodes[i];

                if (node.nodeName == "LI") {

                    node.onmouseover = function () {

                        this.className += " over";

                    }

                    node.onmouseout = function () {

                        this.className = this.className.replace(" over", "");

                    }

                }

            }

        }

    }

    window.onload = startList;



    function NodeCollapsed() {

        var nodeText = document.all.hidText.value.split(",");

        var nodeValue = document.all.hidValue.value.split(",");

        var currentEvent = event.srcElement.alt;

        if (currentEvent != undefined) {



            var currentText = currentEvent.split("_")[0];

            var currentStatus = currentEvent.split("_")[1];



            for (i = 0; i < nodeText.length; i++) {

                if (nodeText[i] == currentText) {

                    var currentValue = nodeValue[i];

                    var objTR = div2.getElementsByTagName('tr');

                    for (j = 0; j < objTR.length; j++) {

                        if (objTR(j).id.substr(0, 2) == currentValue) {

                            if (currentStatus == "expand") {

                                objTR(j).style.display = '';

                            } else {

                                objTR(j).style.display = 'none';

                            }

                        }

                    }

                }

            }

        }

    }



</script>



 



</head>



<body >

<form id="frm1" runat="server">

<asp:Button ID="Button1" runat="server" Text="hide" />

<asp:Button ID="Button2" runat="server" Text="show" />

<input type="hidden" runat="server" id="hidText" />

<input type="hidden" runat="server" id="hidValue" />

<div id='div1' class="div" style="position:absolute; width:10%; height:500px; left:20%; top:40px">

    <asp:TreeView ID="tv1" runat="server" SelectAction="Expand" 

        ImageSet="XPFileExplorer" NodeIndent="15" 

        Width="100%" Height="500px" onscroll="showScroll(this)" 

        onclick="NodeCollapsed()"  style="overflow:auto" 

        CollapseImageToolTip="{0}_collapse" ExpandImageToolTip="{0}_expand">

        <HoverNodeStyle Font-Underline="True" ForeColor="#6666AA" />

        <Nodes>

            <asp:TreeNode Text="parent1" Value="P1">

                <asp:TreeNode Text="child1" Value="child1"></asp:TreeNode>

                <asp:TreeNode Text="child2" Value="child2"></asp:TreeNode>

                <asp:TreeNode Text="child3" Value="child3"></asp:TreeNode>

                <asp:TreeNode Text="child4" Value="child4"></asp:TreeNode>

                <asp:TreeNode Text="child5" Value="child5"></asp:TreeNode>

                <asp:TreeNode Text="child6" Value="child6"></asp:TreeNode>

                <asp:TreeNode Text="child7" Value="child7"></asp:TreeNode>

                <asp:TreeNode Text="child8" Value="child8"></asp:TreeNode>

                <asp:TreeNode Text="child9" Value="child9"></asp:TreeNode>

                <asp:TreeNode Text="child10" Value="child10"></asp:TreeNode>

                <asp:TreeNode Text="child11" Value="child11"></asp:TreeNode>

                <asp:TreeNode Text="child12" Value="child12"></asp:TreeNode>

                <asp:TreeNode Text="child13" Value="child13"></asp:TreeNode>

                <asp:TreeNode Text="child14" Value="child14"></asp:TreeNode>

                <asp:TreeNode Text="child15" Value="child15"></asp:TreeNode>

                <asp:TreeNode Text="child16" Value="child16"></asp:TreeNode>

                <asp:TreeNode Text="child17" Value="child17"></asp:TreeNode>

                <asp:TreeNode Text="child18" Value="child18"></asp:TreeNode>

                <asp:TreeNode Text="child19" Value="child19"></asp:TreeNode>

                <asp:TreeNode Text="child20" Value="child20"></asp:TreeNode>

                <asp:TreeNode Text="child21" Value="child21"></asp:TreeNode>

                <asp:TreeNode Text="child22" Value="child22"></asp:TreeNode>

                <asp:TreeNode Text="child23" Value="child23"></asp:TreeNode>

                <asp:TreeNode Text="child24" Value="child24"></asp:TreeNode>

                <asp:TreeNode Text="child25" Value="child25"></asp:TreeNode>

                <asp:TreeNode Text="child26" Value="child26"></asp:TreeNode>

                <asp:TreeNode Text="child27" Value="child27"></asp:TreeNode>

                <asp:TreeNode Text="child28" Value="child28"></asp:TreeNode>

                <asp:TreeNode Text="child29" Value="child29"></asp:TreeNode>

                <asp:TreeNode Text="child30" Value="child30"></asp:TreeNode>

                <asp:TreeNode Text="child31" Value="child31"></asp:TreeNode>

                <asp:TreeNode Text="child32" Value="child32"></asp:TreeNode>

                <asp:TreeNode Text="child33" Value="child33"></asp:TreeNode>

                <asp:TreeNode Text="child34" Value="child34"></asp:TreeNode>

                <asp:TreeNode Text="child35" Value="child35"></asp:TreeNode>

                <asp:TreeNode Text="child36" Value="child36"></asp:TreeNode>

                <asp:TreeNode Text="child37" Value="child37"></asp:TreeNode>

                <asp:TreeNode Text="child38" Value="child38"></asp:TreeNode>

                <asp:TreeNode Text="child39" Value="child39"></asp:TreeNode>

                <asp:TreeNode Text="child40" Value="child40"></asp:TreeNode>

                <asp:TreeNode Text="child41" Value="child41"></asp:TreeNode>

                <asp:TreeNode Text="child42" Value="child42"></asp:TreeNode>

                <asp:TreeNode Text="child43" Value="child43"></asp:TreeNode>

                <asp:TreeNode Text="child44" Value="child44"></asp:TreeNode>

                <asp:TreeNode Text="child45" Value="child45"></asp:TreeNode>

                <asp:TreeNode Text="child46" Value="child46"></asp:TreeNode>

                <asp:TreeNode Text="child47" Value="child47"></asp:TreeNode>

                <asp:TreeNode Text="child48" Value="child48"></asp:TreeNode>

                <asp:TreeNode Text="child49" Value="child49"></asp:TreeNode>

                <asp:TreeNode Text="child50" Value="child50"></asp:TreeNode>

            </asp:TreeNode>