asp.net 30分鐘掌握無重新整理 Repeater

範例程式碼下載: /201109/yuanma/JQueryElementTest.rar
本文中所包含的內容如下:
* 準備
* 主要功能
* 綁定欄位
* 綁定屬性
* 基本設定
* 設定分頁
* 設定欄位
* 設定調用的服務端方法
* 請求/返回資料的格式
* 填充/搜尋
* 更新
* 刪除
* 建立
* 行狀態說明
* 排序狀態說明
* 設定模板
* ItemTemplate
* UpdatedItemTemplate/InsertedItemTemplate
* RemovedItemTemplate
* EditItemTemplate
* FilterTemplate/NewItemTemplate
* HeaderTemplate/FooterTemplate/EmptyTemplate
* 特殊綁定
* je-id
* je-<javascript 事件名>
* je-class
* je-checked/selected/readonly
* je-value
* je-<jQueryUI 外掛程式名>
* 事件
* 用戶端方法
Repeater 樣本圖片:

準備
請確保已經在 http://code.google.com/p/zsharedcode/wiki/Download 中下載 JQueryElement 最新的版本.
請使用指令引用如下的命名空間:

複製代碼 代碼如下:<%@ 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" %>

除了命名空間, 還需要引用 jQueryUI 的指令碼和樣式, 可以在 http://jqueryui.com 下載, 例如: 複製代碼 代碼如下:<link type="text/css" rel="stylesheet" href="[樣式路徑]/jquery-ui-1.8.15.custom.css" />
<script type="text/javascript" src="[指令碼路徑]/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="[指令碼路徑]/jquery-ui-1.8.15.custom.min.js"></script>
<script type="text/javascript" src="[指令碼路徑]/jquery.ui.datepicker-zh-CN.js"></script>

主要功能
綁定欄位
在行模板中, 可以使用 #{<欄位名>} 的形式來綁定欄位, 比如: 複製代碼 代碼如下:<ItemTemplate>
<span>#{id}</span>
<span>#{realname}</span>
<span>#{age}</span>
</ItemTemplate>

欄位也可以被綁定在標籤的屬性中, 比如: 複製代碼 代碼如下:<ItemTemplate>
<span>#{id}</span>
<span title="#{realname}">#{realname}</span>
<span>#{age}</span>
</ItemTemplate>

綁定屬性
在所有的模板中都可以綁定屬性, 文法為 @{<屬性名稱>}, 比如:
<FooterTemplate>
第 @{pageindex}/@{pagecount} 頁, @{itemcount} 條
</FooterTemplate>
基本設定
Repeater 的 Selector 屬性是一個 javascript 運算式, 它將作為一個選取器, 寫法可以參照 http://jquery.com, 選取器對應的元素將作為頁面上最終的 repeater 來呈現, 樣本: 複製代碼 代碼如下:<table id="list"></table>
<je:Repeater ID="studentRepeater" runat="server"
Selector="'#list'">
/* ... */
</je:Repeater>

設定 IsVariable 屬性為 True, 則將在用戶端產生與 ClientID 同名的 javascript 變數, 樣本: 複製代碼 代碼如下:<je:Repeater ID="studentRepeater" runat="server"
IsVariable="true">
</je:Repeater>
<script type="text/javascript">
$(function () {
studentRepeater.__repeater('fill');
});
</script>

由於在此頁面中 ClientID 與 ID 相同, 因此通過 studentRepeater 就可以訪問 repeater. 此外, 也可以通過 JQueryScript 控制項並使用內嵌文法 [%id:studentRepeater%] 來確保 ClientID 與 ID 不相同的頁面也能訪問 repeater 變數.
設定分頁
通過 Repeater 的 PageSize 屬性設定每頁包含多少條資料, PageIndex 屬性設定初始的頁碼, PageIndex 預設為 1.
設定欄位
Repeater 的 Field 屬性工作表示參與綁定的欄位, 其形式為一個 javascript 字串數組, 比如: ['id', 'realname', 'age'], 如果不設定 Field 屬性, 則由第一次填充的資料來確定, 但這將導致在沒有資料的情況下無法建立.
FilterField 表示用於搜尋的欄位, 也是一個 javascript 字串數組. FilterFieldDefault 為搜尋欄位的值為 null 或者 '' 時的預設值, 樣本: ['', '', 0].
SortField 表示參與排序的欄位, 比如: ['id'].
設定調用的服務端方法
可以通過 Async 來設定如何調用伺服器端方法, 如果是調用 WebService, 則需要設定 MethodName, 如果是普通的 ashx 這樣的一般處理常式, 則忽略 MethodName, 樣本: 複製代碼 代碼如下:<je:Repeater ID="studentRepeater" runat="server"
FillAsync-Url="<填充方法地址>"
FillAsync-MethodName="<填充方法名稱>"
UpdateAsync-Url="<更新方法地址>"
UpdateAsync-MethodName="<更新方法名稱>"
InsertAsync-Url="<建立方法地址>"
InsertAsync-MethodName="<建立方法名稱>"
RemoveAsync-Url="<刪除方法地址>"
RemoveAsync-MethodName="<刪除方法名稱>"
>
/* ... */
</je:Repeater>
<je:Repeater ID="studentRepeater" runat="server"
FillAsync-Url="Student.aspx"
FillAsync-MethodName="Fill"
UpdateAsync-Url="Student.aspx"
UpdateAsync-MethodName="Update"
InsertAsync-Url="Student.aspx"
InsertAsync-MethodName="Insert"
RemoveAsync-Url="Student.aspx"
RemoveAsync-MethodName="Remove"
>
/* ... */
</je:Repeater>

如果, 你需要為方法傳遞更多的參數, 則可以採用下面的形式: 複製代碼 代碼如下:<je:Repeater ID="studentRepeater" runat="server">
<FillAsync Url="<填充方法地址>" MethodName="<填充方法名稱>">
<ParameterList>
<je:Parameter Name="<參數名1>"
Type="Expression"
Value="<值1>"
Default="<預設值1>" />
<je:Parameter Name="<參數名2>"
Type="Selector"
Value="<選取器2>"
Default="<預設值2>" />
/* ... */
</ParameterList>
</FillAsync>
</je:Repeater>
<je:Repeater ID="studentRepeater" runat="server">
<FillAsync Url="Student.aspx" MethodName="Fill">
<ParameterList>
<je:Parameter Name="ws"
Type="Expression"
Value="website"
Default="'-'" />
<je:Parameter Name="year"
Type="Selector"
Value="'#year'"
Default="2011" />
/* ... */
</ParameterList>
</FillAsync>
</je:Repeater>

通過添加 Parameter, 可以傳遞更多的參數, Name 為參數名, Type 為 Expression 時, 則 Value 中包含的是一個 javascript 運算式, 樣本中的 Value="website" 表示取 javascript 變數 website 的值, 當然也可以設定為常量, 比如: Value="'www.google.com'" 或者 Value="100", 當 Type 為 Selector 時, 則 Value 中的 javascript 運算式將作為選取器, 選取器的寫法可以參照 http://jquery.com, 選取器對應的元素的值將作為參數的值. Default 中是預設值的 javascript 運算式, 當參數的值為 null 或者 '' 時, 將採用 Default 中的值.
請求/返回資料的格式
填充/搜尋
對於填充或者搜尋操作, 以 WebService 為例, 服務端將接收如下參數, pageindex 頁碼, pagesize 每頁中包含資料條數, 還可以接收與欄位同名的參數或者通過 Parameter 增加的參數作為搜尋條件, 或者接收形式為 <欄位名稱>_order 的用於排序的欄位參數, 排序參數有三種值, "" 表示沒有排序, "asc" 升序, "desc" 降序:
[WebMethod ( )]
public static object <方法名稱> ( int pageindex, int pagesize
[, <類型n, 如: string> <用於搜尋的欄位或條件名稱n>]
[, string <用於排序的欄位名稱m>_order] )
{
}
[WebMethod ( )]
public static object Fill ( int pageindex, int pagesize
, string realname, int age
, string id_order )
{
}
伺服器還應返回如下格式的 json 資料作為填充資料, 其中 __success 預設為 true, itemcount 可以省略, 但將無法計算 pagecount 頁碼. 複製代碼 代碼如下:{
"__success": <表示是否成功的布爾值, 為 true 或者 false>,
"rows": <當前頁包含行資料的 javascript 數組>,
"itemcount": <總行數>
}
{
"__success": true,
"rows":
[
{ "id": 1, "realname": "jack", "age": 20 },
{ "id": 2, "realname": "tom", "age": 21 }
],
"itemcount": 120
}

在 .NET 4.0 中可以使用匿名型別來返回 json, 比如: 複製代碼 代碼如下:[WebMethod ( )]
public static object Fill ( /* 參數 */ )
{
// ...
List<object> students = new List<object> ( );
students.Add ( new {
id = 1,
realname = "jack",
age = 20
} );
// ...
return new { __success = true, rows = students.ToArray ( ), itemcount = 120 };
}

更新
刪除
建立
以上 3 項由於篇幅原因無法全部列出, 如有需要請參考: http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc
行狀態說明
在用戶端的 javascript 指令碼中, 行狀態有 4 種, 分別是 unchanged 未改變, updated 更新過, inserted 建立後的行, removed 刪除後的行.
排序狀態說明
在用戶端的 javascript 指令碼中, 排序狀態有 4 種, 分別是 none 無排序或按照預設排序, asc 升序, desc 降序.
設定模板
在 Repeater 的各種模板中, 可以設定 Repeater 最終顯示的 html 代碼, 這些 html 代碼應該是完整的, 合法的, 並且不要直接使用單引號, 可以對單引號轉義, 否則可能導致最終顯示的不正常.
ItemTemplate
ItemTemplate 為行模板中的一種, 可以顯示處於 unchanged 狀態的行, 如果沒有設定 UpdatedItemTemplate 或者 InsertedItemTemplate, 那麼 updated, inserted 狀態的行也顯示在 ItemTemplate 中, 樣本: 複製代碼 代碼如下:<ItemTemplate>
<tr>
<td>
#{id}
</td>
<td>
#{realname}
</td>
<td>
#{age}
</td>
<td>
/* 編輯和刪除按鈕 */
</td>
</tr>
</ItemTemplate>

UpdatedItemTemplate/InsertedItemTemplate
與 ItemTemplate 不同的是, UpdatedItemTemplate 和 InsertedItemTemplate 分別用於顯示狀態為 updated 和 inserted 的行, 主要用於採用不同樣式來顯示不同狀態的行, 但也可以使用更簡便的 je-class 來完成同樣的效果, 樣本: 複製代碼 代碼如下:<UpdatedItemTemplate>
<tr style="font-weight: bold;">
<td>
#{id}
</td>
<td>
#{realname}
</td>
<td>
#{age}
</td>
</tr>
</UpdatedItemTemplate>
<InsertedItemTemplate>
<tr style="color: green;">
<td>
#{id}
</td>
<td>
#{realname}
</td>
<td>
#{age}
</td>
</tr>
</InsertedItemTemplate>

RemovedItemTemplate
EditItemTemplate
FilterTemplate/NewItemTemplate
HeaderTemplate/FooterTemplate/EmptyTemplate
以上 4 項由於篇幅原因無法全部列出, 如有需要請參考: http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc
特殊綁定
je-id
使用 je-id="<欄位名>" 可以綁定特殊的 id, 可以使用在行模板或者 FilterTemplate, NewItemTemplate 中的 input 元素中. 在 EditItemTemplate 中, 被指定 je-id 的 input 將包含此欄位的新值. 在 FilterTemplate 中, 指定 je-id 的 input 包含了用於搜尋的欄位的值, 這些欄位應該包含在 FilterField 屬性中. 在 NewItemTemplate 中, 指定 je-id 的 input 包含了用於建立的欄位的值.
je-<javascript 事件名>
使用 je-<javascript 事件名>="<行為名>" 可以為事件綁定特殊的操作. 可以使用在各個模板中, 常用的行為有: beginedit 開始編輯, endedit 取消編輯, update 儲存更新, remove 刪除, toggleselect 切換選中狀態, insert 建立, filter 搜尋, togglesort 切換排序. 其中, 前 5 者只能用在行模板中, insert 可用在 NewItemTemplate 中, filter 可用在 FilterTemplate 中, togglesort 可用在 HeaderTemplate 中, 樣本: 複製代碼 代碼如下:<ItemTemplate>
<tr>
<td>
#{id}
</td>
<td>
#{realname}
</td>
<td>
#{age}
</td>
<td>
<span je-onclick="beginedit">編輯</span>
<span je-onclick="remove">刪除</span>
</td>
</tr>
</ItemTemplate>
<EditItemTemplate>
<tr>
<td>
#{id}
</td>
<td>
<input type="text" je-id="realname" value="#{realname}" class="textbox" />
</td>
<td>
<input type="text" je-id="age" value="#{age}" class="textbox" />
</td>
<td>
<span je-onclick="endedit">取消</span>
<span je-onclick="update">儲存</span>
</td>
</tr>
</EditItemTemplate>

需要說明的是, togglesort 還需要指定一個參數, 表示切換排序的欄位, 這個欄位已經在 SortField 中設定, 比如: je-onclick="togglesort,realname".
je-class
使用 je-class="<樣式>" 可以為事件綁定特殊的樣式. 可以在各個模板中使用 je-class, 常用的樣式有: {header} 表示 ui-widget-header, {active} 表示 ui-state-active, {highlight} 表示 ui-state-highlight, {disabled} 表示 ui-state-disabled, {error} 表示 ui-state-error, {default} 表示 ui-state-default, {state} 表示行狀態, {sort} 表示排序狀態, 樣本: 複製代碼 代碼如下:<HeaderTemplate>
<thead je-class="{header}">
<tr>
<td je-onclick="togglesort,id">
<span je-class="{sort,id,,ui-icon ui-icon-arrow-1-n icon,ui-icon ui-icon-arrow-1-s icon}">
</span>
序號
</td>
/* ... */
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr je-class="{state}-item">
/* ... */
</tr>
</ItemTemplate>

這裡需要說明 {state} 和 {sort} 的文法, 分別為 {state[,<未改變行樣式>[,<建立行樣式>[,<修改行樣式>[,<刪除行樣式>]]]]}, {sort,<排序欄位>[,<無排序樣式>[,<升序樣式>[,<降序樣式>]]]}. 對於 {state} 而言, 如果沒有指定某種狀態的樣式, 則將使用行的狀態名稱來代替樣式名稱, 比如: {state,,new-item}, 由於沒有指定未改變行的樣式, 因此如果行的狀態為 unchanged, 那麼將返回 unchanged. 對於 {sort} 而言, 如果沒有指定某種排序的樣式, 將採用排序的狀態來代替樣式名稱.
je-checked/selected/readonly
在 ItemTemplate 中使用 je-checked="selected" 配合 je-onclick="toggleselect"來表示行是否處於選中的狀態, je-selected 則可用於 EditItemTemplate 中的 select 元素, 樣本: 複製代碼 代碼如下:<ItemTemplate>
<tr>
<td>
<input type="checkbox"
je-checked="selected"
je-onclick="toggleselect"
/> #{id}
</td>
</tr>
</ItemTemplate>

je-value
在 FilterTemplate 中使用 je-value="<搜尋欄位名>" 來綁定初始化的搜尋條件.
je-<jQueryUI 外掛程式名>
可以在任何模板中使用 je-<jQueryUI 外掛程式名>="<屬性名稱n>=<屬性值n>;", 來產生一個 jQueryUI 的外掛程式, 但目前僅支援 je-button 和 je-datepicker, 樣本: 複製代碼 代碼如下:<EditItemTemplate>
<tr je-class="{state}-item">
<td>
<input type="checkbox" je-checked="selected" je-onclick="toggleselect" /> #{id}
</td>
<td>
<input type="text" je-id="realname" value="#{realname}" />
</td>
<td>
<input type="text" je-id="age" value="#{age}" />
</td>
<td>
<input type="text" je-id="birthday"
je-datepicker="dateFormat='yy-mm-dd';"
value="#{birthday}" />
</td>
<td>
<span
je-button="label='編輯';icons={ primary: 'ui-icon-pencil' };"
je-onclick="beginedit">
</span>
<span
je-button="label='刪除';icons={ primary: 'ui-icon-trash' };"
je-onclick="remove">
</span>
</td>
</tr>
</EditItemTemplate>

屬性的設定是和 jQueryUI 外掛程式的屬性一致的, 可以參考 http://jqueryui.com.
事件
在 Repeater 所有的事件中都有具有 tag 和 e 兩個參數, tag 是 repeater 所在的元素, e 則包含了事件的相關資料.
PreUpdate, Updated 更新前後的事件, PreRemove, Removed 刪除前後的事件, PreInsert, Inserted 建立前後的事件. 這些事件的 e 參數中包含 row 屬性, 表示當前參與相關操作的行, 而 Updated, Removed, Inserted 的 e 還包含 isSuccess, 表示是否執行成功, 樣本: 複製代碼 代碼如下:<je:Repeater ID="studentRepeater" runat="server"
/* ... */
PreUpdate="
function(tag, e){
if(e.row.realname == '' || e.row.age == '' || e.row.birthday == ''){
$('#message').text('請將資訊填寫完整');
return false;
}
}
" PreInsert="
function(tag, e){
if(e.row.realname == '' || e.row.age == '' || e.row.birthday == ''){
$('#message').text('請將資訊填寫完整');
return false;
}
}
" PreRemove="
function(tag, e){
if(!confirm('是否刪除 ' + e.row.realname)){
return false;
}
}
" Updated="
function(tag, e){
$('#message').text('更新 ' + e.row.realname + (e.isSuccess ? ' 成功' : ' 失敗'));
}
" Inserted="
function(tag, e){
$('#message').text('建立 ' + e.row.realname + (e.isSuccess ? ' 成功' : ' 失敗'));
}
" Removed="
function(tag, e){
$('#message').text('刪除 ' + e.row.realname + (e.isSuccess ? ' 成功' : ' 失敗'));
}
">
/* ... */
</je:Repeater>

PreFill, Filled 填充前後的事件, PreExecute, Executed 執行任何操作前後的事件, PreCustom, Customed 執行自訂動作前後的事件, 參數 e 包含 command 屬性工作表示自訂動作的名稱, PreSubStep, SubStepped 執行分布操作前後的事件, 參數 e 包含 count 屬性工作表示總的條數, completed 屬性工作表示已經處理完成的行數.
Navigable 當導航可用性變化時, 參數 e 包含 prev 屬性工作表示是否有上一頁, next 屬性工作表示是否有下一頁. Blocked 當有操作被阻塞時的事件.

用戶端方法

此項由於篇幅原因無法全部列出, 如有需要請參考: http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc.

範例程式碼下載: http://zsharedcode.googlecode.com/files/JQueryElementTest.rar.

實際過程示範: http://www.tudou.com/programs/view/GQeh0ZIJ0RY/, 建議全屏觀看.

歡迎訪問 panzer 開源項目, http://zsharedcode.googlecode.com/ , 其中包含了 IEBrowser 控制 WebBrowser 執行各種 js 和 jQuery 指令碼以及錄製功能 和 jQueryUI 的 Asp.net 控制項 JQueryElement.