C#实现DataList里面嵌套DataList的折叠菜单
程序员文章站
2022-09-05 07:50:42
本文实例讲述了c#实现datalist里面嵌套datalist的折叠菜单。分享给大家供大家参考,具体如下:
点击前效果图如下:
点击后效果图如下:
具体实现代...
本文实例讲述了c#实现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>版块 设 置</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"> <img src="image/tree_folder3.gif" width="15" height="15"><%#eval("smallclassname")%></td> <td align="center" width="50%" colspan="3"> <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),现在改善如下:
<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>
<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>版 块 设 置</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"> <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>
希望本文所述对大家c#程序设计有所帮助。
上一篇: .NET Core中本地化机制的深入讲解
下一篇: C#编程中设置程序只可被运行一次的方法