datalist嵌套

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();
        }
    }
}

转载于:https://www.cnblogs.com/tiantangwater/archive/2008/12/24/1361642.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值