如何使ASP.NET ListView水平重複分組項目？

我有一個ASP ListView中顯示一些項目與GroupItemCount設置爲3：如何使ASP.NET ListView水平重複分組項目？

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>

來源

2011-04-25 Simon

這是通過使用在您的模板<DIV>的方式造成。

您做到這一點的方式中，每組3人都在<DIV>之內，因爲<br />在<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問題。我將width:250px;放在ImagePageGroup類中，width:50px; float: left;放在ImagePageItem類中，但我不知道你的CSS。隨着這些風格，你根本不需要<br />，這就是爲什麼我把它分開。

你可能想測試你的div佈局在純HTML。當然，最簡單的解決方案是切換到表格佈局。 當你使用它們來顯示Tabulated Data時，表格並不是邪惡的，但它是另一回事。

來源

2011-04-25 19:36:15 DavRob60

@Simon我做了一個編輯，因爲'
'超出了Images div。 – DavRob60 2011-04-25 19:48:07

感謝您的回覆。這種標記有點奇怪，每一列在類似的步驟中從前一列向下移動一行。刪除
修復此問題，但項目仍然是垂直分組。 – Simon 2011-04-25 21:13:46

@Simon你的問題是一個CSS問題，我編輯了答案來解釋它。 – DavRob60 2011-04-26 13:34:35

如何使ASP.NET ListView水平重複分組項目？

回答

相關問題