使用 jQuery Repeater 展开页面预览，类似 Google

原始帖子可以在 这里 找到。

简介/目录

由于时间有限，不能保证在多个博客文章中同步。在以下地址，您可以查看最新的内容，希望您能理解

• http://zoyobar.blogspot.com/2011/11/using-jquery-repeater-to-expand-page.html

下载示例：JQueryElementDemo-en.zip，目录为 /repeater/Default.aspx。

本文将详细解释如何在 Repeater 控件中使用子视图，目录如下

• 准备
• 定义子视图示例
• 切换子视图
• 定义一个容器

准备

请查看30 分钟掌握 ASP.NET jQuery Repeater中的准备部分。

定义子视图示例

在 Repeater 中显示的 Repeater 被称为子视图，子视图是子视图示例的副本，并根据条件显示不同的数据。定义子视图示例没有特殊之处，例如

<je:Repeater ID="<child view ID>" runat="server"
 FilterField="<child view search field>">

</je:Repeater>

<je:Repeater ID="pictureRepeater" runat="server"
 FilterField="['url']"
 FillAsync-Url="webservice.asmx"
 FillAsync-MethodName="GetGooglePicture">
 <ItemTemplate>
  <div>
   <span class="url">#{url}</span>
   <br />
   <br />
   #{picture}
  </div>
 </ItemTemplate>
</je:Repeater>

在大多数情况下，您需要为子视图示例定义属性 FilterField，即用于搜索子视图数据的条件，在上面的代码中，我们添加了一个 URL 作为条件，那么服务器端的方法可以写成

[WebMethod]
public SortedDictionary<string, object> GetGooglePicture ( string url )
{
 // Return JSON
}

因为这里我们只返回一行，所以您不必添加 pageindex 和 pagesize 参数。

关于如何返回 JSON，请参考 在不同的 .NET 版本中返回 JSON。此示例的所有代码都是使用 .NET 4.0 编写的。

切换子视图

如果需要在 Repeater 控件中切换、关闭、打开子视图，可以使用 shiftview、collapseview、expandview 三个方法，例如

// je-<javascript event name>="shiftview,'<child view ID>'[,<search field value n>]"

<div id="list">
 <je:Repeater ID="googleRepeater" runat="server"
  Selector="'#list'" PageSize="2" IsVariable="true"
  FillAsync-Url="webservice.asmx"
  FillAsync-MethodName="SearchGoogle">
  <ItemTemplate>

   <div class="picture">
    <div
     je-button="label='More';"
     je-onclick="shiftview,'pictureRepeater','#{url}'">
    </div>
    <div je-id="pictureRepeater" style="display: none;">
    </div>
   </div>
  
  </ItemTemplate>

 </je:Repeater>
</div>

以 shiftview 为例，第一个参数是子视图的 ID，后面的参数是用于搜索子视图数据的条件，在示例中，字段 URL 是一个条件，对应于子视图示例的 FilterField 属性中的 URL。如果存在更多条件，您可以继续添加，但条件的顺序必须与子视图示例的 FilterField 属性相同。

expandview 方法与 shiftview 类似，expandview 将打开子视图，而 shiftview 将切换子视图的打开状态。

collapseview 方法将关闭子视图，它不需要传递条件。

默认情况下，当首次打开子视图时，它将自动调用 fill 方法来获取数据，然后 open 操作将不再刷新数据。

定义一个容器

除了定义子视图之外，您还需要在行模板中定义子视图的容器

// je-id="<child view ID>"
<ItemTemplate>
 <div class="picture">
  <div je-id="pictureRepeater" style="display: none;">
  </div>
 </div>
</ItemTemplate>

将 je-id 设置为子视图的 ID，该元素可以绑定为子视图的容器，子视图将出现在目标容器中。

我们通过 style="display: none;" 使容器在开始时处于隐藏状态，因为默认情况下子视图是关闭的。