Question

我正在制作一个广告网站，在其中一个页面上显示其商品。我想在列表视图中显示商品但我希望我的列表视图以矩阵形式显示其商品。例如，我的listview读取商品的名称，描述和图像等数据，并显示第一行中的前四个和第二行中的后四个，依此类推。你能帮帮我怎么做？我想使用div ins Listview的Itemtemplate 这个合适的代码是我的共鸣吗？

<asp:DataList ID="datalist_Data" runat="server">
<HeaderTemplate>
    <table>
        <tr style="background-color: #6699FF; color: #FFFFFF; font-size: large;">
            <td width="150">Column 1</td>
            <td width="150">Column 2</td>
            <td width="150">Column 3</td>
            <td width="150">Column 4</td>
        </tr>
    </table>
</HeaderTemplate>
<ItemTemplate>
    <table>
        <tr>
            <td width="150"><%# Eval("c1") %></td>
            <td width="150"><%# Eval("c2") %></td>
            <td width="150"><%# Eval("c3") %></td>
            <td width="150"><%# Eval("c4") %></td>
        </tr>
    </table>
</ItemTemplate>

Answer 1

DataList有一组处理您问题的属性：RepeatColumns，RepeatDirection和RepeatLayout

在MSDN

上阅读有关DataList控件的更多信息

以下是您需要的代码（其中Foo是您的商品类型）：

<asp:DataList runat="server" ID="datalist" RepeatColumns="4" RepeatDirection="Horizontal" RepeatLayout="Table">
    <HeaderTemplate>
        <table>
            <tr style="background-color: #6699FF; color: #FFFFFF; font-size: large;">
                <td width="150">Column 1</td>
                <td width="150">Column 2</td>
                <td width="150">Column 3</td>
                <td width="150">Column 4</td>
            </tr>
        </table>
    </HeaderTemplate>
    <ItemStyle Width="150" Wrap="true" />
    <ItemTemplate>

        <%# (Container.DataItem as Foo).Name %><br />
        <%# (Container.DataItem as Foo).Description %><br />
        <%# (Container.DataItem as Foo).ImageUrl %>

    </ItemTemplate>
</asp:DataList>

请注意，这种写法避免使用Eval，因为它需要反射，效果很差。

编辑：以下是C＃代码：

protected void Page_Load(object sender, EventArgs e)
{
    List<Foo> list = GetGoods();

    datalist.DataSource = list;
    datalist.DataBind();
}

在listview中显示类似数据的矩阵

1 个答案: