JQueryElement Repeater 是一款強大的 ASP.NET 伺服器端控制項，結合 jQuery UI 實現豐富的無刷新資料操作體驗。本文系統整理其核心功能、設定技巧、模板系統、特殊綁定語法與進階特性，助您快速上手開發高互動性 Web 應用。
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement"
Namespace="zoyobar.shared.panzer.ui.jqueryui" TagPrefix="je" %>
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement"
Namespace="zoyobar.shared.panzer.web.jqueryui" TagPrefix="je" %>
需引用 jQuery UI 腳本與樣式（含中文化日期選擇器）：
<link type="text/css" rel="stylesheet" href="jquery-ui-1.8.15.custom.css" />
<script src="jquery-1.6.2.min.js"></script>
<script src="jquery-ui-1.8.15.custom.min.js"></script>
<script src="jquery.ui.datepicker-zh-CN.js"></script>
#{fieldName} 於 ItemTemplate 中輸出欄位值，亦可用於標籤屬性如 title="#{realname}"#{age, convertAge(#)} 傳遞欄位值給 JS 函數處理，或直接撰寫 #{age, # <= 0 ? '不可能吧' : #.toString()}@{propertyName} 於 FooterTemplate 等處輸出分頁資訊如 第 @{pageindex}/@{pagecount} 頁@{pagecount, @ <= 0 ? '-' : @} 條件式輸出| 屬性 | 說明 |
|---|---|
| Selector | jQuery 選擇器字串，指定頁面容器元素，如 '#list' |
| IsVariable | true 時產生同名 JS 變數，便於客戶端程式存取 |
| PageSize / PageIndex | 分頁筆數與初始頁碼 |
| Field | 參與綁定的欄位陣列，如 ['id','realname','age'] |
| FilterField / FilterFieldDefault | 搜尋條件欄位與預設值 |
| SortField | 排序欄位陣列 |
| FieldMask | 欄位驗證正則，格式 {field: {reg: '', tip: '', type: ''}} |
支援 WebService (.asmx) 與一般處理常式，可單獨指定各操作端點：
<je:Repeater ID="studentRepeater" runat="server"
FillAsync-Url="webservice.asmx" FillAsync-MethodName="Fill"
UpdateAsync-Url="webservice.asmx" UpdateAsync-MethodName="Update"
InsertAsync-Url="webservice.asmx" InsertAsync-MethodName="Insert"
RemoveAsync-Url="webservice.asmx" RemoveAsync-MethodName="Remove">
</je:Repeater>
進階參數傳遞可使用巢狀 <FillAsync> 區塊搭配 <ParameterList> 定義 Expression 或 Selector 類型參數。
填充/搜尋請求參數： pageindex, pagesize, [搜尋欄位], __order, __group
回應 JSON 結構：
{
"__success": true,
"rows": [ {"id":1,"realname":"jack","age":20}, {"id":2,"realname":"tom","age":21} ],
"itemcount": 120
}
.NET 4.0 可使用匿名型別直接回傳：return new { __success = true, rows = students.ToArray(), itemcount = 120 };
| 模板 | 用途 | 備註 |
|---|---|---|
| ItemTemplate | 顯示未變更狀態列項 | 預設也用於 updated/inserted 狀態 |
| UpdatedItemTemplate | 顯示更新狀態列項 | 可搭配 je-class 區分樣式 |
| InsertedItemTemplate | 顯示新增狀態列項 | 同上 |
| EditItemTemplate | 編輯模式列項 | 含輸入控制項與儲存/取消按鈕 |
| FilterTemplate | 搜尋列模板 | 配合 je-id 綁定搜尋欄位 |
| NewItemTemplate | 新增列模板 | 配合 je-id 綁定新增欄位 |
| HeaderTemplate / FooterTemplate / EmptyTemplate | 表頭/表尾/無資料模板 | Footer 適合放分頁資訊 |
| GroupTemplate | 分組標題列 | 搭配 GroupField 使用 |
| RemovedItemTemplate | 刪除動畫模板 | 可設計淡出效果 |
| 屬性 | 語法範例 | 功能說明 |
|---|---|---|
| je-id | je-id="realname" | 綁定特殊 ID，用於編輯/搜尋/新增模板的輸入元素 |
| je-onclick | je-onclick="beginedit" | 綁定行為：beginedit/endedit/update/remove/toggleselect/insert/filter/togglesort |
| je-class | je-class="{state}-item" | 動態套用類別：{header}/{active}/{highlight}/{state}/{sort} 等 |
| je-checked | je-checked="selected" | 配合 toggleselect 實現列選中狀態 |
| je-value | je-value="keyword" | FilterTemplate 中綁定初始搜尋值 |
| je-button | je-button="label='編輯';icons={primary:'ui-icon-pencil'};" | 產生 jQuery UI Button |
| je-datepicker | je-datepicker="dateFormat='yy-mm-dd';" | 產生 jQuery UI Datepicker |
| je-template | je-template="my-header" | 標記現有元素作為模板來源 |
透過 shiftview/expandview/collapseview 實現主從資料展開，詳見專文。
設定 GroupField 或呼叫 setgroup，搭配 GroupTemplate 顯示分組標題：
<je:Repeater GroupField="category" ...>
<GroupTemplate><td>@{groupfield}: @{groupname}</td></GroupTemplate>
</je:Repeater>
所有事件接收 pe (控制項選項與 jQuery 物件) 與 e (事件資料) 參數。主要事件：
PreUpdate/Updated, PreRemove/Removed, PreInsert/Inserted, PreFill/Filled, PreExecute/Executed, Navigable, Blocked 等。
可在事件中驗證資料、確認刪除、顯示訊息等。
透過 IsVariable="true" 產生的 JS 物件可呼叫：fill(), update(), remove(), insert(), sort(), filter(), nextPage(), prevPage() 等。
