如何使ASP.NET ListView水平重复分组项？

发布时间：2020-12-16 09:34:54 所属栏目：asp.Net 来源：网络整理

导读：我有一个ASP ListView显示GroupItemCount设置为3的一些项目： A D GB E HC F I 即它将它们垂直分组.如何使其显示,以便它在行中水平分组？ A B CD E FG H I 这是我的ListView代码： asp:ListView ID="ImagesListView" GroupItemCount="4" runat="server" Data

我有一个ASP ListView显示GroupItemCount设置为3的一些项目：

A  D  G
B  E  H
C  F  I

即它将它们垂直分组.如何使其显示,以便它在行中水平分组？

A  B  C
D  E  F
G  H  I

这是我的ListView代码：

<asp:ListView ID="ImagesListView" GroupItemCount="4" runat="server" DataSourceID="EntityDataSource1" GroupPlaceholderID="GroupsGoHere" ItemPlaceholderID="ItemsGoHere" Orientation="Horizontal">
    <LayoutTemplate>
        <div runat="server" id="Main" class="ImagePageMainLayout">
            <div id="ItemsDataPager" runat="server" class="ImagePageHeader">
                <asp:DataPager ID="ImagesDataPager" runat="server" PageSize="16" PagedControlID="ImagesListView">
                    <Fields>
                        <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False" />
                        <asp:NumericPagerField />
                        <asp:NextPreviousPagerField ButtonType="Link" ShowLastPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False" />
                    </Fields>
                </asp:DataPager>
            </div>
            <div runat="server" id="GroupsGoHere">
            </div>
        </div>
    </LayoutTemplate>
    <GroupTemplate>
        <div runat="server" id="Images" class="ImagePageGroup">
            <div runat="server" id="ItemsGoHere">
            </div>
        </div>
    </GroupTemplate>
    <ItemTemplate>
        <div id="Item" align="center" runat="server" class="ImagePageItem">
        </div>
    </ItemTemplate>
    <ItemSeparatorTemplate>
        <br />
    </ItemSeparatorTemplate>
</asp:ListView>

解决方法

这是由您使用< DIV>的方式引起的.在你的模板中.

你这样做的方式,每组3人进入< DIV>由于你的< br />而且每个项目都在该div内的另一个项目之下.在< ItemSeparatorTemplate>中.
然后下一组3在最后一组3旁边.

您应该尝试的解决方案是删除< ItemSeparatorTemplate>并修改您的< GroupTemplate>添加< br />每组之后：

<GroupTemplate>
        <div runat="server" id="Images" class="ImagePageGroup">
            <div runat="server" id="ItemsGoHere">
            </div>
        </div>
        <br />
</GroupTemplate>

另请注意,在microsoft’s exemple中,他们使用< table>格式化列表视图.

更新：
我测试了你的代码,你的问题是一个CSS问题.放宽：250px,得到了很好的结果;在ImagePageGroup类和宽度：50px;向左飘浮;在ImagePageItem类中,但我不知道你的CSS.有了这些风格,你不需要< br />总而言之,这就是我划条的原因.

您可能希望以纯HTML格式测试div布局.当然,最简单的解决方案是切换到表格布局.当您使用表格显示制表数据时,表格并不邪恶,但这是另一回事.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!