zoukankan      html  css  js  c++  java

  • DataList里面嵌套DataList的折叠菜单的实现

    点击后效果图如下：

    具体实现代码如下：

    Javascript脚本

    代码
    <script type="text/javascript">
    function showmenu(id)
    {
    smallimg     = eval("smallimg"+id);
    img     =eval("img"+id);

    if(smallimg.style.display =="none")
    {
    eval(    "smallimg"+id+".style.display=\"\";");//全部显示
     img.src="Image/tree_folder3.gif";//显示为-
     }
    else
    {
    eval(    "smallimg"+id+".style.display=\"none\";"); //全部隐藏
     img.src="Image/tree_folder4.gif";//显示为+
     }
    }
    </script>

    HTML代码如下：

    代码
    <body>

    <form id="Form1" method="post" runat="server">

    <font face="宋体"></font>

    <table width="679" height="100%" border="0" cellpadding="0" cellspacing="0" align="center">

    <tr>

    <td align="center" valign="top">

    <strong>版块&nbsp;设 置</strong>

    <br />

    <br />

    管理选项：    <asp:Button ID="btnAdd" runat="server"

    OnClick    ="btnAdd_Click" Text="添加一级版块"/><br />

    <br />

    <asp:DataList ID="DataList1" runat="server" CellSpacing="0" CellPadding="0" Width="679"

    OnItemDataBound    ="DataList1_ItemDataBound">

    <HeaderTemplate>

    <table width="679" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000" class="border">

    <tr bgcolor="#a4b6d7" class="title">

    <td height="25" align="center">

    <strong>版块名称</strong></td>

    <td height="20" align="center">

    <strong>操作选项</strong></td>

    </tr>

    </HeaderTemplate>

    <ItemTemplate>

    <tr bgcolor="ECF5FF" class="tdbg">

    <td height="22" width="50%">

    <img id="img<%#Eval("BigClassID")%>" src="Image/tree_folder4.gif" width="15" height="15" onclick="showmenu(<%#Eval("BigClassID")%>)"><%#Eval("BigClassName")%></td>

    <td align="center" width="50%">

    <a href='SmallClassAdd.aspx?BigClassID=<%#Eval("BigClassID")%>'>

    添加二级版块    </a> | <a href='BigClassModify.aspx?BigClassID=<%#Eval("BigClassID")%>'>

    修改一级版块    </a> | <a href='BigClassDelete.aspx?BigClassID=<%#Eval("BigClassID")%>'

    onclick="return confirm('确定删除吗,下级版块及相关帖子都将被删除,且不可恢复!!!')">删除一级版块    </a></td>

    </tr>

    <tr bgcolor="ECF5FF" class="tdbg" width="100%">

    <td colspan="2" width="100%">

    <asp:DataList ID='dlstSmallClass' EnableViewState='false' runat='server'>

    <HeaderTemplate>

    <table width="679" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000" class="border">

    </HeaderTemplate>

    <ItemTemplate>

    <tr id="smallimg<%#Eval("BigClassID")%>" style="display:none" bgcolor="#E3E3E3" class="tdbg">

    <td height="22" width="50%" colspan="3">

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <img src="Image/tree_folder3.gif" width="15" height="15"><%#Eval("SmallClassName")%></td>

    <td align="center" width="50%" colspan="3">

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <a href='SmallClassModify.aspx?SmallClassID=<%#Eval("SmallClassID")%>'>

    修改二级版块    </a> | <a href='SmallClassDelete.aspx?SmallClassID=<%#Eval("SmallClassID")%>'

    onclick="return confirm('确定删除吗,相关帖子都将被删除,且不可恢复!!!')">删除二级版块    </a></td>

    </tr>

    </ItemTemplate>

    <FooterTemplate>

    </table>

    </FooterTemplate>

    </asp:DataList>

    </td>

    </tr>

    </ItemTemplate>

    <FooterTemplate>

    </table>

    </FooterTemplate>

    </asp:DataList>

    </td>

    </tr>

    </table>

    </form>

    </body>

    上面的功能有点缺陷（ques1:多行时候不能折叠，默认只折叠第一行；ques2:不支持IE），现在改善如下：

    Javascript
    <script type="text/javascript">
    function showmenu(id)
    {
    var smallimg = document.getElementById("smallimg"+id);
    var img = document.getElementById("img"+id);
    if(smallimg.style.display =="none")
    {

    smallimg.style.display    ="";
    img.src    ="Image/tree_folder3.gif";//显示为-
     }
    else
    {
    smallimg.style.display     ="none";
    img.src    ="Image/tree_folder4.gif";//显示为+
     }
    }
    </script>
    html
    <body>
    <form id="Form1" method="post" runat="server">
    <font face="宋体"></font>
    <table width="679" height="100%" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
    <td align="center" valign="top">
    <strong>版 块&nbsp;设 置</strong>
    <br />
    <br />
    管理选项：    <asp:Button ID="btnAdd" runat="server" OnClick="btnAdd_Click" Text="添加一级版块"/><br />
    <br />
    <asp:DataList ID="DataList1" runat="server" CellSpacing="0" CellPadding="0" Width="679"
    OnItemDataBound    ="DataList1_ItemDataBound">
    <HeaderTemplate>
    <table width="679" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"class="border">
    <tr bgcolor="#a4b6d7"class="title">
    <td height="25" align="center">
    <strong>版块名称</strong>
    </td>
    <td height="20" align="center">
    <strong>操作选项</strong>
    </td>
    </tr>
    </HeaderTemplate>
    <ItemTemplate>
    <tr bgcolor="ECF5FF"class="tdbg">
    <td height="22" width="50%">
    <img id="img<%#Eval("BigClassID")%>" src="Image/tree_folder4.gif" width="15" height="15"
    onclick    ="showmenu(<%#Eval("BigClassID")%>)"><%#Eval("BigC <td align="center" width="50%" colspan="3">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href='SmallClassModify.aspx?SmallClassID=<%#Eval("SmallClassID")%>'>
    修改二级版块    </a>|<a href='SmallClassDelete.aspx?SmallClassID=<%#Eval("SmallClassID")%>'
    onclick    ="return confirm('确定删除吗,相关帖子都将被删除,且不可恢复!!!')">删除二级版块</a>
    </td>
    </tr>
    </ItemTemplate>
    <FooterTemplate>
    </table>
    </FooterTemplate>
    </asp:DataList>
    </td>
    </tr>
    </ItemTemplate>
    <FooterTemplate>
    </table>
    </FooterTemplate>
    </asp:DataList>
    </td>
    </tr>
    </table>
    </form>
    </body>
  • 相关阅读:
    maven生命周期
    snsapi_base和snsapi_userinfo
    MySQL大小写问题
    高德地图JSApi
    方向
    看源码和写demo是一种比较容易提升的方式
    前后端分离，接口API，契约
    java文档操作
    String.getBytes()，源码之下，了无秘密
    myeclipse快捷键（转载）
  • 原文地址：https://www.cnblogs.com/lhws/p/1950312.html
Copyright © 2011-2022 走看看