JQueryElement Repeater 子視圖實作：打造 Google 風格展開預覽效果

JQueryElement Repeater 控制項提供強大的子視圖功能，能輕鬆實現類似 Google 搜尋結果「展開預覽」的互動體驗。本文將逐步解說如何定義子視圖樣本、切換顯示狀態、綁定資料容器，並附上完整程式碼範例。

前置準備

請先參考 官方文件 完成基礎環境建置，包含 JQueryElement 套件安裝、命名空間註冊、jQuery UI 腳本與樣式引用等。

步驟一：定義子視圖樣本

子視圖本質上是另一個 Repeater 控制項，作為樣本被複製並根據條件顯示不同資料。關鍵在於設定 FilterField 屬性指定查詢條件欄位：

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

後端 WebMethod 對應接收 url 參數：

[WebMethod]
public SortedDictionary<string, object> GetGooglePicture(string url)
{
    // 根據 url 查詢並回傳 JSON 資料
    // 因只回傳單筆資料，無需 pageindex、pagesize 參數
}

步驟二：切換子視圖狀態

在主 Repeater 的 ItemTemplate 中，透過 je-onclick 綁定 shiftview、expandview、collapseview 三種客戶端方法控制子視圖開合：

<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='更多';" 
                     je-onclick="shiftview,'pictureRepeater','#{url}'">
                </div>
                <div je-id="pictureRepeater" style="display: none;"></div>
            </div>
        </ItemTemplate>
    </je:Repeater>
</div>

三種控制方法差異：

• shiftview：切換開合狀態（開→關、關→開），需傳遞子視圖 ID 及查詢條件值
• expandview：強制展開子視圖，參數同 shiftview
• collapseview：強制關閉子視圖，僅需子視圖 ID

預設首次展開時自動呼叫 fill 載入資料，後續展開則直接顯示現有資料不再重新請求。

步驟三：定義子視圖容器

在列項模板中，必須放置一個容器元素並設定 je-id 屬性綁定子視圖 ID，子視圖內容將渲染於此容器內：

<ItemTemplate>
    <div class="picture">
        <!-- 觸發按鈕 -->
        <div je-button="label='更多';" je-onclick="shiftview,'pictureRepeater','#{url}'"></div>
        <!-- 子視圖容器，初始隱藏 -->
        <div je-id="pictureRepeater" style="display: none;"></div>
    </div>
</ItemTemplate>

完整運作流程

1. 使用者點擊「更多」按鈕觸發 shiftview
2. 框架尋找 je-id="pictureRepeater" 的容器元素
3. 若容器隱藏，則顯示並呼叫子視圖 Repeater 的 fill 方法
4. 子視圖 Repeater 依 FilterField 送出查詢條件（此例為 url）
5. 後端 WebMethod 回傳 JSON 資料
6. 子視圖依 ItemTemplate 渲染顯示於容器中

效果展示與資源下載

完整範例程式碼：JQueryElementDemo.rar
線上演示影片：土豆網全螢幕觀看