手風琴與列表視圖

我正在使用listview來填充1000行的表格。數據庫表格是關於問題和答案的。我想使用accordion控制listview。我應該把accordion控制在listview itemtemplate裏面嗎？手風琴與列表視圖

我想要的是點擊第1個問題打開第1個答案並點擊第2個問題關閉第1個答案並打開第2個答案。

UPDATE：

我想是這樣

<asp:ListView ID="lvQuestions" runat="server" 
    DataKeyNames="QueryID" 
     DataSourceID="SqlDataSourceQueries"> 
    <LayoutTemplate> 

     <asp:PlaceHolder ID="itemPlaceholder" runat="server" /> 

    </LayoutTemplate> 
    <ItemTemplate> 
    <div id="products"> 
     <h3><a href="#"><asp:Label ID="Label1" runat="server" Text='<%# Eval("Query") %>' ></asp:Label></a></h3> 
     <div><asp:Label ID="ReplyLabel" runat="server" Text='<%# Eval("Reply") %>'></asp:Label></div> 
    </div> 
    </ItemTemplate> 
</asp:ListView>

但它不工作。

來源

2012-04-06 user1150440

你可以使用Jquery Accordion

像文檔中，你會令你的行成以下結構：

<div id="accordion"> 
    <h3><a href="#">First header</a></h3> 
    <div>First content</div> 
    <h3><a href="#">Second header</a></h3> 
    <div>Second content</div> 
</div>

你的ListView看起來是這樣的：

<asp:ListView ID="lvQuestions" runat="server" 
    onitemdatabound="lvQuestions_ItemDataBound"> 
    <LayoutTemplate> 
     <div id="accordion"> 
     <asp:PlaceHolder ID="itemPlaceholder" runat="server" /> 
     </div> 
    </LayoutTemplate> 
    <ItemTemplate> 
     <h3><a href="#"><asp:Literal ID="litQuestion" runat="server" /></a></h3> 
     <div><asp:Literal ID="litAnswer" runat="server" /></div> 
    </ItemTemplate> 
</asp:ListView>

Cod ebehind（抱歉，這是在C＃中，但你應該能夠翻譯）

protected void lvQuestions_ItemDataBound(object sender, ListViewItemEventArgs e) 
{ 
    if (e.Item.ItemType == ListViewItemType.DataItem) 
    { 
     Literal litQuestion = (Literal)e.Item.FindControl("litQuestion"); 
     Literal litAnswer = (Literal)e.Item.FindControl("litAnswer"); 


     YourClass item = e.Item.DataItem as YourClass; 
     litQuestion.Text = item.Question; 
     litAnswer.Text = item.Answer; 
    } 
}

使用的ItemDataBound-事件可能如下unneccesary開銷一些球員，但根據您的情況，您可能希望有更多的控制文本將根據您的自定義類中的值進行呈現。

來源

2012-04-06 07:20:01 citronas

我已更新與您的解決方案的問題...請檢查它..我想我失去了一些東西..它不工作。 – user1150440 2012-04-06 08:21:48

對不起...你的代碼工作得很好......我搞砸了。再次感謝，並且非常感謝。 – user1150440 2012-04-06 08:27:59

我很高興我能幫上忙。 – citronas 2012-04-06 09:50:01

我還沒有嘗試過，但我會建議在您的listview模板中使用手風琴。然後您可以在itemtemplate中使用accordionitem。這將使類似：

<ListView> 
    <ListView.Template> 
    <ControlTemplate TargetType="ListView"> 
     <Accordion IsItemsHost="True"/> 
    </ControlTemplate> 
    </ListView.Template> 
    <ListView.ItemTemplate> 
    <DataTemplate> 
     <AccordionItem .../> 
    </ControlTemplate> 
    </ListView.ItemTemplate> 
</ListView>

來源

2012-04-06 07:16:14

手風琴與列表視圖

回答

相關問題