datalist提供有RepeatColumns="5" RepeatDirection="Horizontal",可以设置内容排列方向为横向。并可以实现每行内容个数。
目标:需要实现如下
大类1
——————————————————————
产品1 产品2 产品3
大类2
——————————————————————
产品4 产品5 产品6
实现方法:一个datalist绑定类别,再内嵌套一个datalist显示该类别的产品资料
<asp:DataList ID="cateandpro" runat="server" DataKeyField="cateid" OnItemDataBound="cateandpro_ItemDataBound">
<ItemTemplate>
<table width="942" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20" style="line-height:30px;height:30px;vertical-align:middle"><img src="images/1.gif"></td>
<td width="920" style="font-weight:bold;text-align:left;line-height:30px;height:30px"><%#Eval("catename") %></td>
</tr>
<tr>
<td colspan="2" style="background:#9DCF4A;height:2px "><img src="images/blank.gif" width="2" height="2"></td>
</tr>
</table>
<table width="949" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="height:0 "><img src="images/productlist_01.gif" alt=""></td>
</tr>
<tr>
<td style="background:url(images/productlist_02.gif) repeat-y;height:130px;width:900">
<asp:DataList ID="dl_pro" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >
<HeaderTemplate>
<table width="900" border="0" cellspacing="0" cellpadding="0" </HeaderTemplate>
<ItemTemplate>
<td>
<table height="130" width="100%">
<tr>
<td width="20%" style="word-break:break-all">
<a href="detail.aspx?proid=<%#Eval("proid") %>" target="_blank"><img onMouseOver="Show('<%#Eval("proid") %>')" onMouseOut="Hide('<%#Eval("proid") %>')" src="images/pro/<%#Eval("showpic") %>" width="105" height="100"></a>
<div id="<%#Eval("proid") %>" 浏览次数:"+Eval("hits") %></div>
</td>
</tr>
<tr>
<td><%#Eval("proname").ToString().Length>10?Eval("proname").ToString().Substring(0,10)+"...":Eval("proname") %></td>
</tr>
</table>
<hr />
</td>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:DataList>
</td>
</tr>
<tr>
<td style="height:0 "><img src="images/productlist_03.gif" alt=""></td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
程序页为:
public partial class products : System.Web.UI.Page
{
Products pro = new Products();
protected void Page_Load(object sender, EventArgs e)
{
DataSet ds_cate = pro.GetCate2();
cateandpro.DataSource = ds_cate;
cateandpro.DataBind();
}
protected void cateandpro_ItemDataBound(object sender, DataListItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
int CateID = Convert.ToInt32(cateandpro.DataKeys[e.Item.ItemIndex].ToString());
DataSet ds_pro = pro.GetForCate2(CateID);//方法GetForCate2为根据类别ID取出产品
DataList dlpro = (DataList)e.Item.FindControl("dl_pro");
dlpro.DataSource = ds_pro;
dlpro.DataBind();
}
}
}