<table>
<thead je-template="my-header">
</thead>
</table>
<je:Repeater runat="server"
Selector="'#list'" Header="[je-template=my-header]">
</je:Repeater>
子视图
在 Repeater 中, 可以通过 shiftview, collapseview, expandview 三个函数来切换, 关闭, 打开子视图, 比如:
复制代码 代码如下:
1 <je:Repeater runat="server"
2 FilterField="<子视图搜索字段>">
3
4 </je:Repeater>
5
6 <je:Repeater 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 runat="server"
17 FilterField="['url']">
18 <ItemTemplate>
19 <div>
20 <span>#{url}</span>
21 <br />
22 <br />
23 #{picture}
24 </div>
25 </ItemTemplate>
26 </je:Repeater>
27
28 <div>
29 <je:Repeater 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">
36 </div>
37 </ItemTemplate>
38 </je:Repeater>
39 </div>
更多使用方法和说明请参考 jquery repeater 模仿 Google 展开页面预览子视图 .
数据分组
可以通过 Repeater 的 GroupField 或者 setgroup 函数来设置分组的字段, 通过 GroupTemplate 来设置分组的模板, 在设置分组后调用 fill 函数重新获取数据即可:
复制代码 代码如下:
1 <je:Repeater 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>
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 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 当有操作被阻塞时的事件.
客户端方法
此项由于篇幅原因无法全部列出, 如有需要请参考:
JQueryElement 是开源共享的代码, 可以在 页面下载 dll 或者是源代码.
实际过程演示: , 建议全屏观看.
欢迎访问 panzer 开源项目, , 其中包含了 IEBrowser 控制 WebBrowser 执行各种 js 和 jQuery 脚本以及录制功能 和 jQueryUI 的 Asp.net 控件 JQueryElement.