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

最新推荐文章于 2015-10-09 19:13:30 发布

weixin_33701294

最新推荐文章于 2015-10-09 19:13:30 发布

阅读量212

点赞数

文章标签： javascript ViewUI

点击后效果图如下：

具体实现代码如下：

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" ο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" >

        

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

ο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