交替項目樣式

Question

我真的很喜歡在GridView上有一個AlternatingItemTemplate，但它提供的是一個AlternatingItemStyle。在我的網格中，每兩列行（表格佈局）在第一列中都有一個圖像，第二列中有一個描述。我希望圖像和說明的位置交替排列。

我該怎麼做？

Answer 1

您可以考慮AlternatingItemStyle的樂趣管理這一點。

使用1列或中繼器：

項模板：

<div class="MyImage"><img src="" /></div> 
<div class="MyDescription">Blah...Blah...</div> 

CSS：

.MyItemStyle .MyImage {width:49%; float:left;} 
.MyItemStyle .MyDescription {width:49%; float:right;} 

.MyAltItemStyle .MyImage {width:49%; float:right;} 
.MyAltItemStyle .MyDescription {width:49%; float:left;} 

應用到的GridView /中繼器：

ItemStyle = "MyItemStyle" 
AlternatingItemStyle = "MyAltItemStyle" 

這將讓你改變你[R頭腦，而無需重新編寫的事件處理程序等

Answer 2

您將需要處理數據綁定事件以嘗試確定它是項目還是交替項目，或者切換到使用支持Item和AlternatingItem模板的控件。

Answer 3

這裏有一種方法：

ASP.NET：

<asp:Repeater runat="server" ID="Repeater1" OnItemDataBound="Repeater1_ItemDataBound" /> 

ItemDataBound事件：

public void Repeater1_ItemDataBound(Object sender, RepeaterItemEventArgs e) 
{ 
    if (e.Item.ItemType == ListItemType.AlternatingItem) 
    { 
     // e.Item is an alternating item 
    } 
    else 
    { 
    } 
} 

Answer 4

我認爲這會工作：

<asp:GridView> 
    <Columns> 
     <asp:TemplateColumn> 
      <%# Container.DataItemIndex % 2 == 0 ? Eval("Image") : Eval("Desc") %> 
     </asp:TemplateColumn> 
     <asp:TemplateColumn> 
      <%# Container.DataItemIndex % 2 == 0 ? Eval("Desc") : Eval("Image") %> 
     </asp:TemplateColumn> 
    </Columns> 
</asp:GridView> 

顯然，評估和演示圖像將真正需要的是一個img標籤，或者你可以代替部分用戶控件，等等。重要的是Container.DataItemIndex％2.你甚至可以用它作爲可見的數據綁定。

<asp:GridView> 
    <Columns> 
     <asp:TemplateColumn> 
      <uc:Image Data='<%# Eval("Image") %>' 
       Visible='<%# Container.DataItemIndex % 2 == 0 %>' /> 
      <uc:Description Data='<%# Eval("Description") %>' 
       Visible='<%# Container.DataItemIndex % 2 != 0 %>' /> 
     </asp:TemplateColumn> 
     <asp:TemplateColumn> 
      <uc:Image Data='<%# Eval("Image") %>' 
       Visible='<%# Container.DataItemIndex % 2 != 0 %>' /> 
      <uc:Description Data='<%# Eval("Description") %>' 
       Visible='<%# Container.DataItemIndex % 2 == 0 %>' /> 
     </asp:TemplateColumn> 
    </Columns> 
</asp:GridView>