显示 3 列的网格视图

Question

我有一个画廊，里面有大量缩略图，我想一次显示 6 个。

我使用下面的代码进行了这项工作，但我无法将图像显示为 2 行，每行 3 - 它显示为 6 行，每行 1。

我可以通过使用数据列表获得所需的结果，但这会阻止 pageindex 函数工作。

我确信有一个简单的解决方案，但我无法弄清楚。

<asp:GridView id="GridView1" runat="server" AutoGenerateColumns="False" AllowPaging="True" PageSize="6" onpageindexchanging="PageIndexChanged" PagerSettings-Mode="NextPrevious" PagerSettings-NextPageText="Next"  PagerSettings-PreviousPageText="Previous">
    <Columns>
        <asp:TemplateField>
            <itemtemplate>
                <asp:Image ID="Image2" runat="server" ImageUrl='<%# Eval("userID", "/imageUpload/Handler.ashx?userID={0}&image=2")%>' ></asp:Image>
            </itemtemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Answer 1

您想使用 ListView.. 请查看 MSDN：http://msdn.microsoft.com/en-us/library/bb398790.aspx 最特别的是“分组”选项。

Answer 2

您可能需要考虑使用简单的 asp.net 转发器控件，并将项目呈现为 DIV。 您可以使用 CSS“float”指令使 DIV 在其容器内自动“换行”，以有效地适应空间（与文本到达行尾时在文本框中“换行”的方式非常相似）。

因为它们是动态换行的，所以浮动 DIV 可能对用户更加友好：如果您的用户拥有宽阔的高分辨率屏幕，则图像可能会呈现为 1x6 行。 如果您的用户缩小浏览器窗口，DIV 将自动重新排列成 3x2 网格。

您不会免费获得数据分页行为，但它自己实现并不困难。

Answer 3

您可能会更喜欢使用不同的控件（中继器等）...Gridview 的局限性在于它们与您的数据源逐行匹配。

如果您出于某种原因有在网格视图中执行此操作，一种选择是修改数据源中的 SELECT ，以便将图像放入 3 列。 您也许可以使用数据透视表和 rownumber() 函数或其他方式来做到这一点。 完成此操作后，您将修改网格视图（再复制模板列两次）。