久久999,日韩欧美中文,成人日韩av

示例代碼下載: http://zsharedcode.googlecode.com/files/JQueryElementDemo.rar
2011-9-22 更新部分內容
2011-10-9 更新的部分內容, 詳情請參考 http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc
2011-10-17 更新部分內容
本文中所包含的內容如下:
* 準備
* 主要功能
* 綁定字段
* 字段表達式
* 綁定屬性
* 屬性表達式
* 基本設置
* 設置分頁
* 設置字段
* 設置調用的服務端方法
* 請求/返回數據的格式
* 填充/搜索
* 更新
* 刪除
* 新建
* 行狀態說明
* 排序狀態說明
* 設置模板
* 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
* 子視圖
* 數據分組
* 事件
* 客戶端方法
Repeater 示例圖片:

30 分鐘掌握無刷新 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://code.google.com/p/zsharedcode/wiki/Download 下載的壓縮包中包含了一個自定義樣式的 jQueryUI, 如果需要更多樣式, 可以在 http://jqueryui.com/download 下載:

復制代碼代碼如下:

主要功能

綁定字段

在行模板中, 可以使用 #{<字段名>} 的形式來綁定字段, 比如:

復制代碼代碼如下:

<ItemTemplate>
<span>#{id}</span>
<span>#{realname}</span>
<span>#{age}</span>
</ItemTemplate>

字段也可以被綁定在標簽的屬性中, 比如:

復制代碼代碼如下:

<ItemTemplate>
<span>#{id}</span>
<span /> 字段表達式

當需要根據字段的值顯示不同內容時, 可以使用字段表達式, 在表達式中 # 將表示字段本身, 示例:

復制代碼代碼如下:

在上面的例子中, #{age,convertAge(#)} 并不會直接輸出 age 字段的值, 而是將 age 字段傳遞給 convertAge 函數, 然后將函數執行的結果輸出.

除了調用函數外, 也可以直接書寫 javascript 代碼, 比如: #{age,# <= 0 ? '不可能吧' : #.toString()}.

綁定屬性

在所有的模板中都可以綁定屬性, 語法為 @{<屬性名>}, 比如:

復制代碼代碼如下:

<FooterTemplate>
第 @{pageindex}/@{pagecount} 頁, @{itemcount} 條
</FooterTemplate>

屬性表達式

屬性表達式和上面的字段表達式是類似的, 可以輸出轉換后的屬性, 示例:

復制代碼代碼如下:

<td colspan="5">
第 @{pageindex}/@{pagecount,@ <= 0 ? '-' : @} 頁, @{itemcount,@ <= 0 ? '-' : @} 條
</td>

我們判斷屬性 pagecount 和 itemcount 如果小于等于 0, 則顯示連接線.

基本設置

Repeater 的 Selector 屬性是一個 javascript 表達式, 它將作為一個選擇器, 寫法可以參照 http://jquery.com, 選擇器對應的元素將作為頁面上最終的 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'].

FieldMask 表示用于驗證字段的正則表達式, 在更新或新建時起效, 格式為: {<字段名>: { reg: <正則表達式>, tip: '<錯誤提示信息>', type: '<字段類型, 可以是 number, boolean, date>'} }.

設置調用的服務端方法

可以通過 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 的用于排序的參數, 參數的值類似于 name asc, age desc, __group 形式的參數則用于接收分組的條件:

復制代碼代碼如下:

[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 )
{
}

服務器還應返回如下格式的 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-onclick="setgroup,'realname';fill".

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} 表示排序狀態, 示例:

復制代碼代碼如下:

這里需要說明 {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 元素, 示例:

復制代碼代碼如下:

在 FilterTemplate 中可以使用 je-selected="<搜索字段名>[,<匹配值>]" 來初始化處于選中狀態的 option, 示例:

復制代碼代碼如下:

je-value

在 FilterTemplate 中使用 je-value="<搜索字段名>" 來綁定初始化的搜索條件.

je-<jQueryUI 插件名>

可以在任何模板中使用 je-<jQueryUI 插件名>="<屬性名n>=<屬性值n>;", 來生成一個 jQueryUI 的插件, 但目前僅支持 je-button 和 je-datepicker, 示例:

復制代碼代碼如下:

屬性的設置是和 jQueryUI 插件的屬性一致的, 可以參考 http://jqueryui.com.

je-template

使用 je-template="<模板名>" 可以標記將作為模板的元素, 除了可以通過上面所講的各種 Template, 也可以使用這種方法來設置模板, 示例:

復制代碼代碼如下:

子視圖

在 Repeater 中, 可以通過 shiftview, collapseview, expandview 三個函數來切換, 關閉, 打開子視圖, 比如:

復制代碼代碼如下:

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>

更多使用方法和說明請參考 jquery repeater 模仿 Google 展開頁面預覽子視圖 .

數據分組

可以通過 Repeater 的 GroupField 或者 setgroup 函數來設置分組的字段, 通過 GroupTemplate 來設置分組的模板, 在設置分組后調用 fill 函數重新獲取數據即可:

復制代碼代碼如下:

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 發送人
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>

更多使用方法和說明請參考 jquery repeater 完成 QQ 郵箱郵件分組顯示功能.

事件

在 Repeater 所有的事件中都有具有 pe 和 e 兩個參數, pe.option 中包含了 repeater 中的選項, pe.jquery 表示當前 repeater, e 則包含了事件的相關數據.

PreUpdate, Updated 更新前后的事件, PreRemove, Removed 刪除前后的事件, PreInsert, Inserted 新建前后的事件. e.row 表示當前參與相關操作的行, e.index 表示行的索引, 而 Updated, Removed, Inserted 中 e.isSuccess, 表示是否執行成功, 示例:

復制代碼代碼如下:

<je:Repeater ID="studentRepeater" runat="server"

PreUpdate="
function(pe, e){
if(e.row.realname == '' || e.row.age == '' || e.row.birthday == ''){
$('#message').text('請將信息填寫完整');
return false;
}
}
" PreInsert="
function(pe, e){
if(e.row.realname == '' || e.row.age == '' || e.row.birthday == ''){
$('#message').text('請將信息填寫完整');
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 執行任何操作前后的事件, PreCustom, Customed 執行自定義操作前后的事件, 參數 e 包含 command 屬性表示自定義操作的名稱, PreSubStep, SubStepped 執行分布操作前后的事件, 參數 e 包含 count 屬性表示總的條數, completed 屬性表示已經處理完成的行數.

Navigable 當導航可用性變化時, 參數 e 包含 prev 屬性表示是否有上一頁, next 屬性表示是否有下一頁. Blocked 當有操作被阻塞時的事件.

客戶端方法

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

JQueryElement 是開源共享的代碼, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 頁面下載 dll 或者是源代碼.

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

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