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" οnclick="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")% > '

οnclick="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")% > '

οnclick="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 >
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页