2

我正在使用 alistview填充 1000 行的表。DB表是关于问题和答案的。

我想将accordion控制与 listview. 我应该把accordion控件放在里面listview itemtemplate吗？

我想要的是点击第一个问题打开第一个答案，点击第二个问题关闭第一个答案并打开第二个答案。

更新：

我正在尝试这种方式

<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>

但它不起作用。

4

2 回答 2

3

你可以使用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>

Codebehind（对不起，它在 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-Event 可能看起来是不必要的开销，但根据您的情况，您可能希望根据自定义类中的值对正在呈现的文本进行更多控制。

于 2012-04-06T07:20:01.800 回答
0

我还没有尝试过，但我建议在列表视图的模板中使用手风琴。然后您可以在 itemtemplate 中使用手风琴项。那会给出类似的东西：

<ListView>
  <ListView.Template>
    <ControlTemplate TargetType="ListView">
      <Accordion IsItemsHost="True"/>
    </ControlTemplate>
  </ListView.Template>
  <ListView.ItemTemplate>
    <DataTemplate>
      <AccordionItem .../>
    </ControlTemplate>
  </ListView.ItemTemplate>
</ListView>
于 2012-04-06T07:16:14.780 回答