示例代碼下載: http://zsharedcode.googlecode.com/files/JQueryElementDemo.rar
2011-9-22 更新部分內(nèi)容
2011-10-9 更新的部分內(nèi)容, 詳情請(qǐng)參考 http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc
2011-10-17 更新部分內(nèi)容
本文中所包含的內(nèi)容如下:
* 準(zhǔn)備
* 主要功能
* 綁定字段
* 字段表達(dá)式
* 綁定屬性
* 屬性表達(dá)式
* 基本設(shè)置
* 設(shè)置分頁(yè)
* 設(shè)置字段
* 設(shè)置調(diào)用的服務(wù)端方法
* 請(qǐng)求/返回?cái)?shù)據(jù)的格式
* 填充/搜索
* 更新
* 刪除
* 新建
* 行狀態(tài)說(shuō)明
* 排序狀態(tài)說(shuō)明
* 設(shè)置模板
* ItemTemplate
* UpdatedItemTemplate/InsertedItemTemplate
* RemovedItemTemplate
* EditItemTemplate
* FilterTemplate/NewItemTemplate
* HeaderTemplate/FooterTemplate/EmptyTemplate
* 特殊綁定
* je-id
* je-javascript 事件名>
* je-class
* je-checked/selected/readonly
* je-value
* je-jQueryUI 插件名>
* je-template
* 子視圖
* 數(shù)據(jù)分組
* 事件
* 客戶端方法
Repeater 示例圖片:
準(zhǔn)備
請(qǐng)確保已經(jīng)在 http://code.google.com/p/zsharedcode/wiki/Download 中下載 JQueryElement 最新的版本.
請(qǐng)使用指令引用如下的命名空間:
復(fù)制代碼 代碼如下:
%@ 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://code.google.com/p/zsharedcode/wiki/Download 下載的壓縮包中包含了一個(gè)自定義樣式的 jQueryUI, 如果需要更多樣式, 可以在 http://jqueryui.com/download 下載:
復(fù)制代碼 代碼如下:
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>
主要功能
綁定字段
在行模板中, 可以使用 #{字段名>} 的形式來(lái)綁定字段, 比如:
復(fù)制代碼 代碼如下:
ItemTemplate>
span>#{id}/span>
span>#{realname}/span>
span>#{age}/span>
/ItemTemplate>
字段也可以被綁定在標(biāo)簽的屬性中, 比如:
復(fù)制代碼 代碼如下:
ItemTemplate>
span>#{id}/span>
span title="#{realname}">#{realname}/span>
span>#{age}/span>
/ItemTemplate>
字段表達(dá)式
當(dāng)需要根據(jù)字段的值顯示不同內(nèi)容時(shí), 可以使用字段表達(dá)式, 在表達(dá)式中 # 將表示字段本身, 示例:
復(fù)制代碼 代碼如下:
script type="text/javascript">
function convertAge(age) {
if(age 0) return age.toString() + '-未出世';
else if (age 4) return age.toString() + '-幼兒';
else if (age 10) return age.toString() + '-兒童';
else if (age 18) return age.toString() + '-少年';
else if (age 30) return age.toString() + '-青年';
else if (age 50) return age.toString() + '-中年';
else return age.toString() + '-老年';
}
/script>
td>
#{age,convertAge(#)}
/td>
在上面的例子中, #{age,convertAge(#)} 并不會(huì)直接輸出 age 字段的值, 而是將 age 字段傳遞給 convertAge 函數(shù), 然后將函數(shù)執(zhí)行的結(jié)果輸出.
除了調(diào)用函數(shù)外, 也可以直接書寫 javascript 代碼, 比如: #{age,# = 0 ? '不可能吧' : #.toString()}.
綁定屬性
在所有的模板中都可以綁定屬性, 語(yǔ)法為 @{屬性名>}, 比如:
復(fù)制代碼 代碼如下:
FooterTemplate>
第 @{pageindex}/@{pagecount} 頁(yè), @{itemcount} 條
/FooterTemplate>
屬性表達(dá)式
屬性表達(dá)式和上面的字段表達(dá)式是類似的, 可以輸出轉(zhuǎn)換后的屬性, 示例:
復(fù)制代碼 代碼如下:
td colspan="5">
第 @{pageindex}/@{pagecount,@ = 0 ? '-' : @} 頁(yè), @{itemcount,@ = 0 ? '-' : @} 條
/td>
我們判斷屬性 pagecount 和 itemcount 如果小于等于 0, 則顯示連接線.
基本設(shè)置
Repeater 的 Selector 屬性是一個(gè) javascript 表達(dá)式, 它將作為一個(gè)選擇器, 寫法可以參照 http://jquery.com, 選擇器對(duì)應(yīng)的元素將作為頁(yè)面上最終的 repeater 來(lái)呈現(xiàn), 示例:
復(fù)制代碼 代碼如下:
table id="list">/table>
je:Repeater ID="studentRepeater" runat="server"
Selector="'#list'">
/* ... */
/je:Repeater>
設(shè)置 IsVariable 屬性為 True, 則將在客戶端生成與 ClientID 同名的 javascript 變量, 示例:
復(fù)制代碼 代碼如下:
je:Repeater ID="studentRepeater" runat="server"
IsVariable="true">
/je:Repeater>
script type="text/javascript">
$(function () {
studentRepeater.__repeater('fill');
});
/script>
由于在此頁(yè)面中 ClientID 與 ID 相同, 因此通過(guò) studentRepeater 就可以訪問(wèn) repeater. 此外, 也可以通過(guò) JQueryScript 控件并使用內(nèi)嵌語(yǔ)法 [%id:studentRepeater%] 來(lái)確保 ClientID 與 ID 不相同的頁(yè)面也能訪問(wèn) repeater 變量.
設(shè)置分頁(yè)
通過(guò) Repeater 的 PageSize 屬性設(shè)置每頁(yè)包含多少條數(shù)據(jù), PageIndex 屬性設(shè)置初始的頁(yè)碼, PageIndex 默認(rèn)為 1.
設(shè)置字段
Repeater 的 Field 屬性表示參與綁定的字段, 其形式為一個(gè) javascript 字符串?dāng)?shù)組, 比如: ['id', 'realname', 'age'], 如果不設(shè)置 Field 屬性, 則由第一次填充的數(shù)據(jù)來(lái)確定, 但這將導(dǎo)致在沒(méi)有數(shù)據(jù)的情況下無(wú)法新建.
FilterField 表示用于搜索的字段, 也是一個(gè) javascript 字符串?dāng)?shù)組. FilterFieldDefault 為搜索字段的值為 null 或者 '' 時(shí)的默認(rèn)值, 示例: ['', '', 0].
SortField 表示參與排序的字段, 比如: ['id'].
FieldMask 表示用于驗(yàn)證字段的正則表達(dá)式, 在更新或新建時(shí)起效, 格式為: {字段名>: { reg: 正則表達(dá)式>, tip: '錯(cuò)誤提示信息>', type: '字段類型, 可以是 number, boolean, date>'} }.
設(shè)置調(diào)用的服務(wù)端方法
可以通過(guò) Async 來(lái)設(shè)置如何調(diào)用服務(wù)器端方法, 如果是調(diào)用 WebService, 則需要設(shè)置 MethodName, 如果是普通的 ashx 這樣的一般處理程序, 則忽略 MethodName, 示例:
復(fù)制代碼 代碼如下:
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>
如果, 你需要為方法傳遞更多的參數(shù), 則可以采用下面的形式:
復(fù)制代碼 代碼如下:
je:Repeater ID="studentRepeater" runat="server">
FillAsync Url="填充方法地址>" MethodName="填充方法名稱>">
ParameterList>
je:Parameter Name="參數(shù)名1>"
Type="Expression"
Value="值1>"
Default="默認(rèn)值1>" />
je:Parameter Name="參數(shù)名2>"
Type="Selector"
Value="選擇器2>"
Default="默認(rèn)值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>
通過(guò)添加 Parameter, 可以傳遞更多的參數(shù), Name 為參數(shù)名, Type 為 Expression 時(shí), 則 Value 中包含的是一個(gè) javascript 表達(dá)式, 示例中的 Value="website" 表示取 javascript 變量 website 的值, 當(dāng)然也可以設(shè)置為常量, 比如: Value="'www.google.com'" 或者 Value="100", 當(dāng) Type 為 Selector 時(shí), 則 Value 中的 javascript 表達(dá)式將作為選擇器, 選擇器的寫法可以參照 http://jquery.com, 選擇器對(duì)應(yīng)的元素的值將作為參數(shù)的值. Default 中是默認(rèn)值的 javascript 表達(dá)式, 當(dāng)參數(shù)的值為 null 或者 '' 時(shí), 將采用 Default 中的值.
請(qǐng)求/返回?cái)?shù)據(jù)的格式
填充/搜索
對(duì)于填充或者搜索操作, 以 WebService 為例, 服務(wù)端將接收如下參數(shù), pageindex 頁(yè)碼, pagesize 每頁(yè)中包含數(shù)據(jù)條數(shù), 還可以接收與字段同名的參數(shù)或者通過(guò) Parameter 增加的參數(shù)作為搜索條件, 或者接收形式為 __order 的用于排序的參數(shù), 參數(shù)的值類似于 name asc, age desc, __group 形式的參數(shù)則用于接收分組的條件:
復(fù)制代碼 代碼如下:
[WebMethod ( )]
public static object 方法名稱> ( int pageindex, int pagesize
[, 類型n, 如: string> 用于搜索的字段或條件名稱n>]
[, string __order][, string __group] )
{
}
[WebMethod ( )]
public static object Fill ( int pageindex, int pagesize
, string realname, int age
, string __order )
{
}
服務(wù)器還應(yīng)返回如下格式的 json 數(shù)據(jù)作為填充數(shù)據(jù), 其中 __success 默認(rèn)為 true, itemcount 可以省略, 但將無(wú)法計(jì)算 pagecount 頁(yè)碼.
復(fù)制代碼 代碼如下:
{
"__success": 表示是否成功的布爾值, 為 true 或者 false>,
"rows": 當(dāng)前頁(yè)包含行數(shù)據(jù)的 javascript 數(shù)組>,
"itemcount": 總行數(shù)>
}
{
"__success": true,
"rows":
[
{ "id": 1, "realname": "jack", "age": 20 },
{ "id": 2, "realname": "tom", "age": 21 }
],
"itemcount": 120
}
在 .NET 4.0 中可以使用匿名類型來(lái)返回 json, 比如:
復(fù)制代碼 代碼如下:
[WebMethod ( )]
public static object Fill ( /* 參數(shù) */ )
{
// ...
Listobject> students = new Listobject> ( );
students.Add ( new {
id = 1,
realname = "jack",
age = 20
} );
// ...
return new { __success = true, rows = students.ToArray ( ), itemcount = 120 };
}
更新
刪除
新建
以上 3 項(xiàng)由于篇幅原因無(wú)法全部列出, 如有需要請(qǐng)參考: http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc
行狀態(tài)說(shuō)明
在客戶端的 javascript 腳本中, 行狀態(tài)有 4 種, 分別是 unchanged 未改變, updated 更新過(guò), inserted 新建后的行, removed 刪除后的行.
排序狀態(tài)說(shuō)明
在客戶端的 javascript 腳本中, 排序狀態(tài)有 4 種, 分別是 none 無(wú)排序或按照默認(rèn)排序, asc 升序, desc 降序.
設(shè)置模板
在 Repeater 的各種模板中, 可以設(shè)置 Repeater 最終顯示的 html 代碼, 這些 html 代碼應(yīng)該是完整的, 合法的, 否則可能導(dǎo)致最終顯示的不正常.
ItemTemplate
ItemTemplate 為行模板中的一種, 可以顯示處于 unchanged 狀態(tài)的行, 如果沒(méi)有設(shè)置 UpdatedItemTemplate 或者 InsertedItemTemplate, 那么 updated, inserted 狀態(tài)的行也顯示在 ItemTemplate 中, 示例:
復(fù)制代碼 代碼如下:
ItemTemplate>
tr>
td>
#{id}
/td>
td>
#{realname}
/td>
td>
#{age}
/td>
td>
/* 編輯和刪除按鈕 */
/td>
/tr>
/ItemTemplate>
UpdatedItemTemplate/InsertedItemTemplate
與 ItemTemplate 不同的是, UpdatedItemTemplate 和 InsertedItemTemplate 分別用于顯示狀態(tài)為 updated 和 inserted 的行, 主要用于采用不同樣式來(lái)顯示不同狀態(tài)的行, 但也可以使用更簡(jiǎn)便的 je-class 來(lái)完成同樣的效果, 示例:
復(fù)制代碼 代碼如下:
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 項(xiàng)由于篇幅原因無(wú)法全部列出, 如有需要請(qǐng)參考: http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc
特殊綁定
je-id
使用 je-id="字段名>" 可以綁定特殊的 id, 可以使用在行模板或者 FilterTemplate, NewItemTemplate 中的 input 元素中. 在 EditItemTemplate 中, 被指定 je-id 的 input 將包含此字段的新值. 在 FilterTemplate 中, 指定 je-id 的 input 包含了用于搜索的字段的值, 這些字段應(yīng)該包含在 FilterField 屬性中. 在 NewItemTemplate 中, 指定 je-id 的 input 包含了用于新建的字段的值.
je-javascript 事件名>
使用 je-javascript 事件名>="行為名>" 可以為事件綁定特殊的操作. 可以使用在各個(gè)模板中, 常用的行為有: beginedit 開始編輯, endedit 取消編輯, update 保存更新, remove 刪除, toggleselect 切換選中狀態(tài), insert 新建, filter 搜索, togglesort 切換排序. 其中, 前 5 者只能用在行模板中, insert 可用在 NewItemTemplate 中, filter 可用在 FilterTemplate 中, togglesort 可用在 HeaderTemplate 中, 示例:
復(fù)制代碼 代碼如下:
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>
需要說(shuō)明的是, togglesort 還需要指定一個(gè)參數(shù), 表示切換排序的字段, 這個(gè)字段已經(jīng)在 SortField 中設(shè)置, 比如: je-onclick="togglesort,'realname'".
如果綁定多個(gè)行為則, 可以使用 ; 號(hào)分隔, 比如 je-onclick="setgroup,'realname';fill".
je-class
使用 je-class="樣式>" 可以為事件綁定特殊的樣式. 可以在各個(gè)模板中使用 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} 表示行狀態(tài), {sort} 表示排序狀態(tài), 示例:
復(fù)制代碼 代碼如下:
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>
序號(hào)
/td>
/* ... */
/tr>
/thead>
/HeaderTemplate>
ItemTemplate>
tr je-class="{state}-item">
/* ... */
/tr>
/ItemTemplate>
這里需要說(shuō)明 {state} 和 {sort} 的語(yǔ)法, 分別為 {state[,未改變行樣式>[,新建行樣式>[,修改行樣式>[,刪除行樣式>]]]]}, {sort,排序字段>[,無(wú)排序樣式>[,升序樣式>[,降序樣式>]]]}. 對(duì)于 {state} 而言, 如果沒(méi)有指定某種狀態(tài)的樣式, 則將使用行的狀態(tài)名稱來(lái)代替樣式名稱, 比如: {state,,new-item}, 由于沒(méi)有指定未改變行的樣式, 因此如果行的狀態(tài)為 unchanged, 那么將返回 unchanged. 對(duì)于 {sort} 而言, 如果沒(méi)有指定某種排序的樣式, 將采用排序的狀態(tài)來(lái)代替樣式名稱.
je-checked/selected/readonly
在 ItemTemplate 中使用 je-checked="selected" 配合 je-onclick="toggleselect"來(lái)表示行是否處于選中的狀態(tài), je-selected 則可用于 EditItemTemplate 中的 select 元素, 示例:
復(fù)制代碼 代碼如下:
ItemTemplate>
tr>
td>
input type="checkbox"
je-checked="selected"
je-onclick="toggleselect"
/>nbsp;#{id}
/td>
/tr>
/ItemTemplate>
在 FilterTemplate 中可以使用 je-selected="搜索字段名>[,匹配值>]" 來(lái)初始化處于選中狀態(tài)的 option, 示例:
復(fù)制代碼 代碼如下:
FilterTemplate>
tr>
td>
select je-id="type">
option je-selected="type,'normal'">正常/option>
option je-selected="type,'high'">高/option>
option je-selected="type,'low'">低/option>
/select>
/td>
/tr>
/FilterTemplate>
je-value
在 FilterTemplate 中使用 je-value="搜索字段名>" 來(lái)綁定初始化的搜索條件.
je-jQueryUI 插件名>
可以在任何模板中使用 je-jQueryUI 插件名>="屬性名n>=屬性值n>;", 來(lái)生成一個(gè) jQueryUI 的插件, 但目前僅支持 je-button 和 je-datepicker, 示例:
復(fù)制代碼 代碼如下:
EditItemTemplate>
tr je-class="{state}-item">
td>
input type="checkbox" je-checked="selected" je-onclick="toggleselect" />nbsp;#{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>
屬性的設(shè)置是和 jQueryUI 插件的屬性一致的, 可以參考 http://jqueryui.com.
je-template
使用 je-template="模板名>" 可以標(biāo)記將作為模板的元素, 除了可以通過(guò)上面所講的各種 Template, 也可以使用這種方法來(lái)設(shè)置模板, 示例:
復(fù)制代碼 代碼如下:
table id="list">
thead je-template="my-header">
/thead>
/table>
je:Repeater ID="studentRepeater" runat="server"
Selector="'#list'" Header="[je-template=my-header]">
/je:Repeater>
子視圖
在 Repeater 中, 可以通過(guò) shiftview, collapseview, expandview 三個(gè)函數(shù)來(lái)切換, 關(guān)閉, 打開子視圖, 比如:
復(fù)制代碼 代碼如下:
1 je:Repeater ID="子視圖 ID>" runat="server"
2 FilterField="子視圖搜索字段>">
3
4 /je:Repeater>
5
6 je:Repeater ID="googleRepeater" runat="server">
7 ItemTemplate>
8 div je-onclick="shiftview,'子視圖 ID>'[,子視圖搜索字段值n>]">
9 切換子視圖
10 /div>
11 div je-id="子視圖 ID>">
12 /div>
13 /ItemTemplate>
14 /je:Repeater>
15
16 je:Repeater ID="pictureRepeater" runat="server"
17 FilterField="['url']">
18 ItemTemplate>
19 div>
20 span class="url">#{url}/span>
21 br />
22 br />
23 #{picture}
24 /div>
25 /ItemTemplate>
26 /je:Repeater>
27
28 div id="list">
29 je:Repeater ID="googleRepeater" runat="server" Selector="'#list'">
30 ItemTemplate>
31 div
32 je-button="label='更多';"
33 je-onclick="shiftview,'pictureRepeater','#{url}'">
34 /div>
35 div je-id="pictureRepeater" style="display: none;">
36 /div>
37 /ItemTemplate>
38 /je:Repeater>
39 /div>
更多使用方法和說(shuō)明請(qǐng)參考 jquery repeater 模仿 Google 展開頁(yè)面預(yù)覽子視圖 .
數(shù)據(jù)分組
可以通過(guò) Repeater 的 GroupField 或者 setgroup 函數(shù)來(lái)設(shè)置分組的字段, 通過(guò) GroupTemplate 來(lái)設(shè)置分組的模板, 在設(shè)置分組后調(diào)用 fill 函數(shù)重新獲取數(shù)據(jù)即可:
復(fù)制代碼 代碼如下:
1 je:Repeater ID="mailRepeater" runat="server"
2 GroupField="分組字段>"
3 FillAsync-Url="webservice.asmx"
4 FillAsync-MethodName="FillMailList">
5 HeaderTemplate>
6
7 td
8 je-onclick="setgroup,'分組字段>';togglesort,'排序字段>'">
9 發(fā)送人
10 /td>
11
12 /HeaderTemplate>
13 GroupTemplate>
14
15 td>
16 @{groupfield}: @{groupname}
17 /td>
18
19 /GroupTemplate>
20 ItemTemplate>
21
22 td class="sender">
23 #{sender} #{displaydate}
24 /td>
25
26 /ItemTemplate>
27 /je:Repeater>
更多使用方法和說(shuō)明請(qǐng)參考 jquery repeater 完成 QQ 郵箱郵件分組顯示功能.
事件
在 Repeater 所有的事件中都有具有 pe 和 e 兩個(gè)參數(shù), pe.option 中包含了 repeater 中的選項(xiàng), pe.jquery 表示當(dāng)前 repeater, e 則包含了事件的相關(guān)數(shù)據(jù).
PreUpdate, Updated 更新前后的事件, PreRemove, Removed 刪除前后的事件, PreInsert, Inserted 新建前后的事件. e.row 表示當(dāng)前參與相關(guān)操作的行, e.index 表示行的索引, 而 Updated, Removed, Inserted 中 e.isSuccess, 表示是否執(zhí)行成功, 示例:
復(fù)制代碼 代碼如下:
je:Repeater ID="studentRepeater" runat="server"
PreUpdate="
function(pe, e){
if(e.row.realname == '' || e.row.age == '' || e.row.birthday == ''){
$('#message').text('請(qǐng)將信息填寫完整');
return false;
}
}
" PreInsert="
function(pe, e){
if(e.row.realname == '' || e.row.age == '' || e.row.birthday == ''){
$('#message').text('請(qǐng)將信息填寫完整');
return false;
}
}
" PreRemove="
function(pe, e){
if(!confirm('是否刪除 ' + e.row.realname)){
return false;
}
}
" Updated="
function(pe, e){
$('#message').text('更新 ' + e.row.realname + (e.isSuccess ? ' 成功' : ' 失敗'));
}
" Inserted="
function(pe, e){
$('#message').text('新建 ' + e.row.realname + (e.isSuccess ? ' 成功' : ' 失敗'));
}
" Removed="
function(pe, e){
$('#message').text('刪除 ' + e.row.realname + (e.isSuccess ? ' 成功' : ' 失敗'));
}
">
/je:Repeater>
PreFill, Filled 填充前后的事件, PreExecute, Executed 執(zhí)行任何操作前后的事件, PreCustom, Customed 執(zhí)行自定義操作前后的事件, 參數(shù) e 包含 command 屬性表示自定義操作的名稱, PreSubStep, SubStepped 執(zhí)行分布操作前后的事件, 參數(shù) e 包含 count 屬性表示總的條數(shù), completed 屬性表示已經(jīng)處理完成的行數(shù).
Navigable 當(dāng)導(dǎo)航可用性變化時(shí), 參數(shù) e 包含 prev 屬性表示是否有上一頁(yè), next 屬性表示是否有下一頁(yè). Blocked 當(dāng)有操作被阻塞時(shí)的事件.
客戶端方法
此項(xiàng)由于篇幅原因無(wú)法全部列出, 如有需要請(qǐng)參考: http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc.
JQueryElement 是開源共享的代碼, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 頁(yè)面下載 dll 或者是源代碼.
實(shí)際過(guò)程演示: http://www.tudou.com/programs/view/GQeh0ZIJ0RY/, 建議全屏觀看.
歡迎訪問(wèn) panzer 開源項(xiàng)目, http://zsharedcode.googlecode.com/ , 其中包含了 IEBrowser 控制 WebBrowser 執(zhí)行各種 js 和 jQuery 腳本以及錄制功能 和 jQueryUI 的 Asp.net 控件 JQueryElement.
