欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

asp.net 30分鐘掌握無(wú)刷新 Repeater

 更新時(shí)間：2011年09月16日 22:45:17   作者：  
經(jīng)過(guò)數(shù)個(gè)版本的迭代后, JQueryElement 3.3.0 版本中的 Repeater 基本上已經(jīng)完善, 這里將分功能的總結(jié)講解一下 Repeater 的使用方法.
示例代碼下載: /201109/yuanma/JQueryElementTest.rar
本文中所包含的內(nèi)容如下:
* 準(zhǔn)備
* 主要功能
* 綁定字段
* 綁定屬性
* 基本設(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 插件名>
* 事件
* 客戶(hù)端方法
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://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>

主要功能
綁定字段
在行模板中, 可以使用 #{<字段名>} 的形式來(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>

綁定屬性
在所有的模板中都可以綁定屬性, 語(yǔ)法為 @{<屬性名>}, 比如:
<FooterTemplate>
第 @{pageindex}/@{pagecount} 頁(yè), @{itemcount} 條
</FooterTemplate>
基本設(shè)置
Repeater 的 Selector 屬性是一個(gè) javascript 表達(dá)式, 它將作為一個(gè)選擇器, 寫(xiě)法可以參照 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, 則將在客戶(hù)端生成與 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'].
設(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="<填充方法名稱(chēng)>"
UpdateAsync-Url="<更新方法地址>"
UpdateAsync-MethodName="<更新方法名稱(chēng)>"
InsertAsync-Url="<新建方法地址>"
InsertAsync-MethodName="<新建方法名稱(chēng)>"
RemoveAsync-Url="<刪除方法地址>"
RemoveAsync-MethodName="<刪除方法名稱(chēng)>"
>
/* ... */
</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="<填充方法名稱(chēng)>">
<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á)式將作為選擇器, 選擇器的寫(xiě)法可以參照 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ù)作為搜索條件, 或者接收形式為 <字段名稱(chēng)>_order 的用于排序的字段參數(shù), 排序參數(shù)有三種值, "" 表示沒(méi)有排序, "asc" 升序, "desc" 降序:
[WebMethod ( )]
public static object <方法名稱(chēng)> ( int pageindex, int pagesize
[, <類(lèi)型n, 如: string> <用于搜索的字段或條件名稱(chēng)n>]
[, string <用于排序的字段名稱(chēng)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 可以省略, 但將無(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)型來(lái)返回 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 項(xiàng)由于篇幅原因無(wú)法全部列出, 如有需要請(qǐng)參考: http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc
行狀態(tài)說(shuō)明
在客戶(hù)端的 javascript 腳本中, 行狀態(tài)有 4 種, 分別是 unchanged 未改變, updated 更新過(guò), inserted 新建后的行, removed 刪除后的行.
排序狀態(tài)說(shuō)明
在客戶(hù)端的 javascript 腳本中, 排序狀態(tài)有 4 種, 分別是 none 無(wú)排序或按照默認(rèn)排序, asc 升序, desc 降序.
設(shè)置模板
在 Repeater 的各種模板中, 可以設(shè)置 Repeater 最終顯示的 html 代碼, 這些 html 代碼應(yīng)該是完整的, 合法的, 并且不要直接使用單引號(hào), 可以對(duì)單引號(hào)轉(zhuǎn)義, 否則可能導(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 開(kāi)始編輯, 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".
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)名稱(chēng)來(lái)代替樣式名稱(chēng), 比如: {state,,new-item}, 由于沒(méi)有指定未改變行的樣式, 因此如果行的狀態(tài)為 unchanged, 那么將返回 unchanged. 對(duì)于 {sort} 而言, 如果沒(méi)有指定某種排序的樣式, 將采用排序的狀態(tài)來(lái)代替樣式名稱(chēng).
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>

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.
事件
在 Repeater 所有的事件中都有具有 tag 和 e 兩個(gè)參數(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('請(qǐng)將信息填寫(xiě)完整');
return false;
}
}
" PreInsert="
function(tag, e){
if(e.row.realname == '' || e.row.age == '' || e.row.birthday == ''){
$('#message').text('請(qǐng)將信息填寫(xiě)完整');
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 屬性表示自定義操作的名稱(chēng), 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í)的事件.

客戶(hù)端方法

此項(xiàng)由于篇幅原因無(wú)法全部列出, 如有需要請(qǐng)參考: http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc.

示例代碼下載: http://zsharedcode.googlecode.com/files/JQueryElementTest.rar.

實(shí)際過(guò)程演示: http://www.tudou.com/programs/view/GQeh0ZIJ0RY/, 建議全屏觀看.

歡迎訪問(wèn) panzer 開(kāi)源項(xiàng)目, http://zsharedcode.googlecode.com/ , 其中包含了 IEBrowser 控制 WebBrowser 執(zhí)行各種 js 和 jQuery 腳本以及錄制功能 和 jQueryUI 的 Asp.net 控件 JQueryElement.

相關(guān)文章

最新評(píng)論