asp.net 30分鐘掌握無刷新 Repeater
更新時間：2011年09月16日 22:45:17 作者：
經(jīng)過數(shù)個版本的迭代后, JQueryElement 3.3.0 版本中的 Repeater 基本上已經(jīng)完善, 這里將分功能的總結(jié)講解一下 Repeater 的使用方法.
示例代碼下載: /201109/yuanma/JQueryElementTest.rar
本文中所包含的內(nèi)容如下:
* 準(zhǔn)備
* 主要功能
* 綁定字段
* 綁定屬性
* 基本設(shè)置
* 設(shè)置分頁
* 設(shè)置字段
* 設(shè)置調(diào)用的服務(wù)端方法
* 請求/返回數(shù)據(jù)的格式
* 填充/搜索
* 更新
* 刪除
* 新建
* 行狀態(tài)說明
* 排序狀態(tài)說明
* 設(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 插件名>
* 事件
* 客戶端方法
Repeater 示例圖片:
<%@ 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>
字段也可以被綁定在標(biāo)簽的屬性中, 比如:
<ItemTemplate>
<span>#{id}</span>
<span title="#{realname}">#{realname}</span>
<span>#{age}</span>
</ItemTemplate>
綁定屬性
在所有的模板中都可以綁定屬性, 語法為 @{<屬性名>}, 比如:
<FooterTemplate>
第 @{pageindex}/@{pagecount} 頁, @{itemcount} 條
</FooterTemplate>
基本設(shè)置
Repeater 的 Selector 屬性是一個 javascript 表達(dá)式, 它將作為一個選擇器, 寫法可以參照 http://jquery.com, 選擇器對應(yīng)的元素將作為頁面上最終的 repeater 來呈現(xiàn), 示例:
<table id="list"></table>
<je:Repeater ID="studentRepeater" runat="server"
Selector="'#list'">
/* ... */
</je:Repeater>
設(shè)置 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 控件并使用內(nèi)嵌語法 [%id:studentRepeater%] 來確保 ClientID 與 ID 不相同的頁面也能訪問 repeater 變量.
設(shè)置分頁
通過 Repeater 的 PageSize 屬性設(shè)置每頁包含多少條數(shù)據(jù), PageIndex 屬性設(shè)置初始的頁碼, PageIndex 默認(rèn)為 1.
設(shè)置字段
Repeater 的 Field 屬性表示參與綁定的字段, 其形式為一個 javascript 字符串?dāng)?shù)組, 比如: ['id', 'realname', 'age'], 如果不設(shè)置 Field 屬性, 則由第一次填充的數(shù)據(jù)來確定, 但這將導(dǎo)致在沒有數(shù)據(jù)的情況下無法新建.
FilterField 表示用于搜索的字段, 也是一個 javascript 字符串?dāng)?shù)組. FilterFieldDefault 為搜索字段的值為 null 或者 '' 時的默認(rèn)值, 示例: ['', '', 0].
SortField 表示參與排序的字段, 比如: ['id'].
設(shè)置調(diào)用的服務(wù)端方法
可以通過 Async 來設(shè)置如何調(diào)用服務(wù)器端方法, 如果是調(diào)用 WebService, 則需要設(shè)置 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>
如果, 你需要為方法傳遞更多的參數(shù), 則可以采用下面的形式:
<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>
通過添加 Parameter, 可以傳遞更多的參數(shù), Name 為參數(shù)名, Type 為 Expression 時, 則 Value 中包含的是一個 javascript 表達(dá)式, 示例中的 Value="website" 表示取 javascript 變量 website 的值, 當(dāng)然也可以設(shè)置為常量, 比如: Value="'www.google.com'" 或者 Value="100", 當(dāng) Type 為 Selector 時, 則 Value 中的 javascript 表達(dá)式將作為選擇器, 選擇器的寫法可以參照 http://jquery.com, 選擇器對應(yīng)的元素的值將作為參數(shù)的值. Default 中是默認(rèn)值的 javascript 表達(dá)式, 當(dāng)參數(shù)的值為 null 或者 '' 時, 將采用 Default 中的值.
請求/返回數(shù)據(jù)的格式
填充/搜索
對于填充或者搜索操作, 以 WebService 為例, 服務(wù)端將接收如下參數(shù), pageindex 頁碼, pagesize 每頁中包含數(shù)據(jù)條數(shù), 還可以接收與字段同名的參數(shù)或者通過 Parameter 增加的參數(shù)作為搜索條件, 或者接收形式為 <字段名稱>_order 的用于排序的字段參數(shù), 排序參數(shù)有三種值, "" 表示沒有排序, "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 )
{
}
服務(wù)器還應(yīng)返回如下格式的 json 數(shù)據(jù)作為填充數(shù)據(jù), 其中 __success 默認(rèn)為 true, itemcount 可以省略, 但將無法計算 pagecount 頁碼.
{
"__success": <表示是否成功的布爾值, 為 true 或者 false>,
"rows": <當(dāng)前頁包含行數(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 中可以使用匿名類型來返回 json, 比如:
[WebMethod ( )]
public static object Fill ( /* 參數(shù) */ )
{
// ...
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
行狀態(tài)說明
在客戶端的 javascript 腳本中, 行狀態(tài)有 4 種, 分別是 unchanged 未改變, updated 更新過, inserted 新建后的行, removed 刪除后的行.
排序狀態(tài)說明
在客戶端的 javascript 腳本中, 排序狀態(tài)有 4 種, 分別是 none 無排序或按照默認(rèn)排序, asc 升序, desc 降序.
設(shè)置模板
在 Repeater 的各種模板中, 可以設(shè)置 Repeater 最終顯示的 html 代碼, 這些 html 代碼應(yīng)該是完整的, 合法的, 并且不要直接使用單引號, 可以對單引號轉(zhuǎn)義, 否則可能導(dǎo)致最終顯示的不正常.
ItemTemplate
ItemTemplate 為行模板中的一種, 可以顯示處于 unchanged 狀態(tài)的行, 如果沒有設(shè)置 UpdatedItemTemplate 或者 InsertedItemTemplate, 那么 updated, inserted 狀態(tài)的行也顯示在 ItemTemplate 中, 示例:
<ItemTemplate>
<tr>
<td>
#{id}
</td>
<td>
#{realname}
</td>
<td>
#{age}
</td>
<td>
/* 編輯和刪除按鈕 */
</td>
</tr>
</ItemTemplate>
UpdatedItemTemplate/InsertedItemTemplate
與 ItemTemplate 不同的是, UpdatedItemTemplate 和 InsertedItemTemplate 分別用于顯示狀態(tài)為 updated 和 inserted 的行, 主要用于采用不同樣式來顯示不同狀態(tài)的行, 但也可以使用更簡便的 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 包含了用于搜索的字段的值, 這些字段應(yīng)該包含在 FilterField 屬性中. 在 NewItemTemplate 中, 指定 je-id 的 input 包含了用于新建的字段的值.
je-<javascript 事件名>
使用 je-<javascript 事件名>="<行為名>" 可以為事件綁定特殊的操作. 可以使用在各個模板中, 常用的行為有: beginedit 開始編輯, endedit 取消編輯, update 保存更新, remove 刪除, toggleselect 切換選中狀態(tài), 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 還需要指定一個參數(shù), 表示切換排序的字段, 這個字段已經(jīng)在 SortField 中設(shè)置, 比如: 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} 表示行狀態(tài), {sort} 表示排序狀態(tài), 示例:
<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} 而言, 如果沒有指定某種狀態(tài)的樣式, 則將使用行的狀態(tài)名稱來代替樣式名稱, 比如: {state,,new-item}, 由于沒有指定未改變行的樣式, 因此如果行的狀態(tài)為 unchanged, 那么將返回 unchanged. 對于 {sort} 而言, 如果沒有指定某種排序的樣式, 將采用排序的狀態(tài)來代替樣式名稱.
je-checked/selected/readonly
在 ItemTemplate 中使用 je-checked="selected" 配合 je-onclick="toggleselect"來表示行是否處于選中的狀態(tài), 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>
屬性的設(shè)置是和 jQueryUI 插件的屬性一致的, 可以參考 http://jqueryui.com.
事件
在 Repeater 所有的事件中都有具有 tag 和 e 兩個參數(shù), tag 是 repeater 所在的元素, e 則包含了事件的相關(guān)數(shù)據(jù).
PreUpdate, Updated 更新前后的事件, PreRemove, Removed 刪除前后的事件, PreInsert, Inserted 新建前后的事件. 這些事件的 e 參數(shù)中包含 row 屬性, 表示當(dāng)前參與相關(guān)操作的行, 而 Updated, Removed, Inserted 的 e 還包含 isSuccess, 表示是否執(zhí)行成功, 示例:
<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 執(zhí)行任何操作前后的事件, PreCustom, Customed 執(zhí)行自定義操作前后的事件, 參數(shù) e 包含 command 屬性表示自定義操作的名稱, PreSubStep, SubStepped 執(zhí)行分布操作前后的事件, 參數(shù) e 包含 count 屬性表示總的條數(shù), completed 屬性表示已經(jīng)處理完成的行數(shù).
Navigable 當(dāng)導(dǎo)航可用性變化時, 參數(shù) e 包含 prev 屬性表示是否有上一頁, next 屬性表示是否有下一頁. Blocked 當(dāng)有操作被阻塞時的事件.
本文中所包含的內(nèi)容如下:
* 準(zhǔn)備
* 主要功能
* 綁定字段
* 綁定屬性
* 基本設(shè)置
* 設(shè)置分頁
* 設(shè)置字段
* 設(shè)置調(diào)用的服務(wù)端方法
* 請求/返回數(shù)據(jù)的格式
* 填充/搜索
* 更新
* 刪除
* 新建
* 行狀態(tài)說明
* 排序狀態(tài)說明
* 設(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 插件名>
* 事件
* 客戶端方法
Repeater 示例圖片:
準(zhǔn)備
請確保已經(jīng)在 http://code.google.com/p/zsharedcode/wiki/Download 中下載 JQueryElement 最新的版本.
請使用指令引用如下的命名空間:
復(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://jqueryui.com 下載, 例如:
復(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>
主要功能
綁定字段
在行模板中, 可以使用 #{<字段名>} 的形式來綁定字段, 比如:
復(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>
綁定屬性
在所有的模板中都可以綁定屬性, 語法為 @{<屬性名>}, 比如:
<FooterTemplate>
第 @{pageindex}/@{pagecount} 頁, @{itemcount} 條
</FooterTemplate>
基本設(shè)置
Repeater 的 Selector 屬性是一個 javascript 表達(dá)式, 它將作為一個選擇器, 寫法可以參照 http://jquery.com, 選擇器對應(yīng)的元素將作為頁面上最終的 repeater 來呈現(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>
由于在此頁面中 ClientID 與 ID 相同, 因此通過 studentRepeater 就可以訪問 repeater. 此外, 也可以通過 JQueryScript 控件并使用內(nèi)嵌語法 [%id:studentRepeater%] 來確保 ClientID 與 ID 不相同的頁面也能訪問 repeater 變量.
設(shè)置分頁
通過 Repeater 的 PageSize 屬性設(shè)置每頁包含多少條數(shù)據(jù), PageIndex 屬性設(shè)置初始的頁碼, PageIndex 默認(rèn)為 1.
設(shè)置字段
Repeater 的 Field 屬性表示參與綁定的字段, 其形式為一個 javascript 字符串?dāng)?shù)組, 比如: ['id', 'realname', 'age'], 如果不設(shè)置 Field 屬性, 則由第一次填充的數(shù)據(jù)來確定, 但這將導(dǎo)致在沒有數(shù)據(jù)的情況下無法新建.
FilterField 表示用于搜索的字段, 也是一個 javascript 字符串?dāng)?shù)組. FilterFieldDefault 為搜索字段的值為 null 或者 '' 時的默認(rèn)值, 示例: ['', '', 0].
SortField 表示參與排序的字段, 比如: ['id'].
設(shè)置調(diào)用的服務(wù)端方法
可以通過 Async 來設(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>
通過添加 Parameter, 可以傳遞更多的參數(shù), Name 為參數(shù)名, Type 為 Expression 時, 則 Value 中包含的是一個 javascript 表達(dá)式, 示例中的 Value="website" 表示取 javascript 變量 website 的值, 當(dāng)然也可以設(shè)置為常量, 比如: Value="'www.google.com'" 或者 Value="100", 當(dāng) Type 為 Selector 時, 則 Value 中的 javascript 表達(dá)式將作為選擇器, 選擇器的寫法可以參照 http://jquery.com, 選擇器對應(yīng)的元素的值將作為參數(shù)的值. Default 中是默認(rèn)值的 javascript 表達(dá)式, 當(dāng)參數(shù)的值為 null 或者 '' 時, 將采用 Default 中的值.
請求/返回數(shù)據(jù)的格式
填充/搜索
對于填充或者搜索操作, 以 WebService 為例, 服務(wù)端將接收如下參數(shù), pageindex 頁碼, pagesize 每頁中包含數(shù)據(jù)條數(shù), 還可以接收與字段同名的參數(shù)或者通過 Parameter 增加的參數(shù)作為搜索條件, 或者接收形式為 <字段名稱>_order 的用于排序的字段參數(shù), 排序參數(shù)有三種值, "" 表示沒有排序, "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 )
{
}
服務(wù)器還應(yīng)返回如下格式的 json 數(shù)據(jù)作為填充數(shù)據(jù), 其中 __success 默認(rèn)為 true, itemcount 可以省略, 但將無法計算 pagecount 頁碼.
復(fù)制代碼 代碼如下:
{
"__success": <表示是否成功的布爾值, 為 true 或者 false>,
"rows": <當(dāng)前頁包含行數(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 中可以使用匿名類型來返回 json, 比如:
復(fù)制代碼 代碼如下:
[WebMethod ( )]
public static object Fill ( /* 參數(shù) */ )
{
// ...
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
行狀態(tài)說明
在客戶端的 javascript 腳本中, 行狀態(tài)有 4 種, 分別是 unchanged 未改變, updated 更新過, inserted 新建后的行, removed 刪除后的行.
排序狀態(tài)說明
在客戶端的 javascript 腳本中, 排序狀態(tài)有 4 種, 分別是 none 無排序或按照默認(rèn)排序, asc 升序, desc 降序.
設(shè)置模板
在 Repeater 的各種模板中, 可以設(shè)置 Repeater 最終顯示的 html 代碼, 這些 html 代碼應(yīng)該是完整的, 合法的, 并且不要直接使用單引號, 可以對單引號轉(zhuǎn)義, 否則可能導(dǎo)致最終顯示的不正常.
ItemTemplate
ItemTemplate 為行模板中的一種, 可以顯示處于 unchanged 狀態(tà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 的行, 主要用于采用不同樣式來顯示不同狀態(tài)的行, 但也可以使用更簡便的 je-class 來完成同樣的效果, 示例:
復(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 項由于篇幅原因無法全部列出, 如有需要請參考: 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 事件名>="<行為名>" 可以為事件綁定特殊的操作. 可以使用在各個模板中, 常用的行為有: 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>
需要說明的是, togglesort 還需要指定一個參數(shù), 表示切換排序的字段, 這個字段已經(jīng)在 SortField 中設(shè)置, 比如: 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} 表示行狀態(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>
序號
</td>
/* ... */
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr je-class="{state}-item">
/* ... */
</tr>
</ItemTemplate>
這里需要說明 {state} 和 {sort} 的語法, 分別為 {state[,<未改變行樣式>[,<新建行樣式>[,<修改行樣式>[,<刪除行樣式>]]]]}, {sort,<排序字段>[,<無排序樣式>[,<升序樣式>[,<降序樣式>]]]}. 對于 {state} 而言, 如果沒有指定某種狀態(tài)的樣式, 則將使用行的狀態(tài)名稱來代替樣式名稱, 比如: {state,,new-item}, 由于沒有指定未改變行的樣式, 因此如果行的狀態(tài)為 unchanged, 那么將返回 unchanged. 對于 {sort} 而言, 如果沒有指定某種排序的樣式, 將采用排序的狀態(tài)來代替樣式名稱.
je-checked/selected/readonly
在 ItemTemplate 中使用 je-checked="selected" 配合 je-onclick="toggleselect"來表示行是否處于選中的狀態(tài), je-selected 則可用于 EditItemTemplate 中的 select 元素, 示例:
復(fù)制代碼 代碼如下:
<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, 示例:
復(fù)制代碼 代碼如下:
<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>
屬性的設(shè)置是和 jQueryUI 插件的屬性一致的, 可以參考 http://jqueryui.com.
事件
在 Repeater 所有的事件中都有具有 tag 和 e 兩個參數(shù), tag 是 repeater 所在的元素, e 則包含了事件的相關(guān)數(shù)據(jù).
PreUpdate, Updated 更新前后的事件, PreRemove, Removed 刪除前后的事件, PreInsert, Inserted 新建前后的事件. 這些事件的 e 參數(shù)中包含 row 屬性, 表示當(dāng)前參與相關(guān)操作的行, 而 Updated, Removed, Inserted 的 e 還包含 isSuccess, 表示是否執(zhí)行成功, 示例:
復(fù)制代碼 代碼如下:
<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 執(zhí)行任何操作前后的事件, PreCustom, Customed 執(zhí)行自定義操作前后的事件, 參數(shù) e 包含 command 屬性表示自定義操作的名稱, PreSubStep, SubStepped 執(zhí)行分布操作前后的事件, 參數(shù) e 包含 count 屬性表示總的條數(shù), completed 屬性表示已經(jīng)處理完成的行數(shù).
Navigable 當(dāng)導(dǎo)航可用性變化時, 參數(shù) e 包含 prev 屬性表示是否有上一頁, next 屬性表示是否有下一頁. Blocked 當(dāng)有操作被阻塞時的事件.
客戶端方法
此項由于篇幅原因無法全部列出, 如有需要請參考: http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc.
示例代碼下載: http://zsharedcode.googlecode.com/files/JQueryElementTest.rar.
實(shí)際過程演示: http://www.tudou.com/programs/view/GQeh0ZIJ0RY/, 建議全屏觀看.
歡迎訪問 panzer 開源項目, http://zsharedcode.googlecode.com/ , 其中包含了 IEBrowser 控制 WebBrowser 執(zhí)行各種 js 和 jQuery 腳本以及錄制功能 和 jQueryUI 的 Asp.net 控件 JQueryElement.
您可能感興趣的文章:
- asp.net中MVC借助Iframe實(shí)現(xiàn)無刷新上傳文件實(shí)例
- asp.net使用AJAX實(shí)現(xiàn)無刷新分頁
- asp.net中Timer無刷新定時器的實(shí)現(xiàn)方法
- asp.net中利用Jquery+Ajax+Json實(shí)現(xiàn)無刷新分頁的實(shí)例代碼
- Asp.Net 無刷新文件上傳并顯示進(jìn)度條的實(shí)現(xiàn)方法及思路
- asp.net+jquery ajax無刷新登錄的實(shí)現(xiàn)方法
- Asp.net 2.0 無刷新圖片上傳 顯示縮略圖 具體實(shí)現(xiàn)
- asp.net jquery無刷新分頁插件(jquery.pagination.js)
- asp.net Ajax之無刷新評論介紹
- asp.net點(diǎn)擊 查看更多 實(shí)現(xiàn)無刷新加載的實(shí)現(xiàn)代碼
- asp.net 簡便無刷新文件上傳系統(tǒng)
- asp.net ajax實(shí)現(xiàn)無刷新驗(yàn)證碼
- asp.net下使用jquery 的ajax+WebService+json 實(shí)現(xiàn)無刷新取后臺值的實(shí)現(xiàn)代碼
- Asp.net實(shí)現(xiàn)無刷新調(diào)用后臺實(shí)體類數(shù)據(jù)并以Json格式返回
相關(guān)文章
jQuery+PHP實(shí)現(xiàn)微信轉(zhuǎn)盤抽獎功能的方法
這篇文章主要介紹了jQuery+PHP實(shí)現(xiàn)微信轉(zhuǎn)盤抽獎功能的方法,詳細(xì)分析了抽獎程序界面設(shè)計、前臺jQuery交互、后臺概率算法等抽獎功能相關(guān)技巧,需要的朋友可以參考下2016-05-05
jquery getScript動態(tài)加載JS方法改進(jìn)詳解
有許多朋友需要使用getScript方法動態(tài)加載JS,本文將詳細(xì)介紹此功能的實(shí)現(xiàn)方法2012-11-11
jquery.qrcode是一個強(qiáng)大的jquery的插件,可以用來二維碼圖形的渲染,用于生成二維碼,非常的實(shí)用，需要的朋友參考下。2015-04-04
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格展開與折疊的方法,涉及jQuery中toggleClass方法與鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-05-05
jquery基礎(chǔ)教程之?dāng)?shù)組使用詳解
jQuery的數(shù)組處理、便捷、功能齊全。一步到位的封裝了很多原生JavaScript數(shù)組不能企及的功能。下面是jquery數(shù)組的使用詳解,需要的朋友可以參考下2014-03-03
jQuery插件Flexslider實(shí)現(xiàn)圖片輪播、圖文結(jié)合滑動切換效果
這篇文章主要介紹了jQuery插件Flexslider實(shí)現(xiàn)圖片輪播、圖文結(jié)合滑動切換效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
本篇文章主要是對JSON對象與字符串之間的相互轉(zhuǎn)換進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要為大家詳細(xì)介紹了使用jQuery實(shí)現(xiàn)圖片輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
jquery實(shí)現(xiàn)仿JqueryUi可拖動的DIV實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)仿JqueryUi可拖動的DIV,實(shí)例分析了jquery模擬jqueryUI實(shí)現(xiàn)div拖動的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
動態(tài)加載js和css的jquery，可用于在生成頁面時通過js函數(shù)加載一些共通的js和css文件,需要的朋友可以參考下2014-09-09