jQueryUI Repeater 无刷新删除 新建 更新数据 - JQueryElement [7]
接着给大家介绍 Repeater 的使用 ajax 更新删除和新建行的功能.
本次的示例是上个文章示例的延续, 其中 JQueryElement 更新到了 3.1.1, 使 repeater 自身包含了对分页的控制, Repeater 控件也增加了一些属性, 其中增加了各类模板, 比如: HeaderTemplate 等.
由于篇幅的原因, 这里不再解释一些简单的内容, 比如: 引用命名空间和 js 脚本之类的.
我们来看 Repeater 控件的代码:
1 <je:Repeater ID="studentRepeater" runat="server" IsVariable="true" Selector="'#list'"
2 PageSize="3" FillAsync-Url="Student.aspx" FillAsync-MethodName="Fill" UpdateAsync-Url="Student.aspx"
3 UpdateAsync-MethodName="Update" InsertAsync-Url="Student.aspx" InsertAsync-MethodName="Insert"
4 RemoveAsync-Url="Student.aspx" RemoveAsync-MethodName="Remove" Navigable="
5 function(tag, e){
6 cmdPrev.button( e.prev ? 'enable' : 'disable');
7 cmdNext.button( e.next ? 'enable' : 'disable');
8 }
9 " PreUpdate="
10 function(tag, e){
11 if(e.row.realname == '' || e.row.age == '' || e.row.skill == ''){
12 alert('请将信息填写完整');
13 return false;
14 }
15 }
16 " Updated="
17 function(tag, e){
18 alert('成功更新了 ' + e.row.realname);
19 }
20 " PreInsert="
21 function(tag, e){
22 if(e.row.realname == '' || e.row.age == '' || e.row.skill == ''){
23 alert('请将信息填写完整');
24 return false;
25 }
26 }
27 " Inserted="
28 function(tag, e){
29 alert('成功新建了 ' + e.row.realname);
30 }
31 " Removed="
32 function(tag, e){
33 alert('成功删除');
34 }
35 ">
36 <HeaderTemplate>
37 <ul class="header">
38 <li>序号</li><li>姓名</li><li>年龄</li><li>特长</li><li>操作</li>
39 </ul>
40 </HeaderTemplate>
41 <ItemTemplate>
42 <input type="hidden" id="&r:id" value="#:id"/>
43 <ul class="item">
44 <li>#:id</li><li>#:realname</li><li>#:age</li><li>#:skill</li>
45 <li><a href="#" onclick="!:beginedit">编辑</a><a href="#" onclick="!:remove">删除</a></li>
46 </ul>
47 </ItemTemplate>
48 <EditItemTemplate>
49 <input type="hidden" id="&u:id" value="#:id"/>
50 <ul class="edit-item">
51 <li>#:id</li>
52 <li>
53 <input type="text" id="&u:realname" value="#:realname"/>
54 </li>
55 <li>
56 <input type="text" id="&u:age" value="#:age"/>
57 </li>
58 <li>
59 <input type="text" id="&u:skill" value="#:skill"/>
60 </li>
61 <li><a href="#" onclick="!:endedit">取消</a><a href="#" onclick="!:update">更新</a></li>
62 </ul>
63 </EditItemTemplate>
64 <FooterTemplate>
65 <ul class="footer">
66 <li><span id="result">第 @:pageindex/@:pagecount 页, @:itemcount 条</span></li>
67 </ul>
68 </FooterTemplate>
69 <NewItemTemplate>
70 <ul class="new-item">
71 <li>-</li>
72 <li>
73 <input type="text" id="&i:realname" value=""/>
74 </li>
75 <li>
76 <input type="text" id="&i:age" value=""/>
77 </li>
78 <li>
79 <input type="text" id="&i:skill" value=""/>
80 </li>
81 <li><a href="#" onclick="!:insert">添加</a></li>
82 </ul>
83 </NewItemTemplate>
84 </je:Repeater>
相对于上次的例子, 我们去掉了页面中表示页码的隐藏值 pi, 并通过 PageSize 属性设置每页中包含的行数, 默认 PageIndex 为 1, 而且在执行获取数据的 ajax 操作时, 将传递页码和每页包含的条数给服务器端的方法, 参数名称为 pageindex 和 pagesize, 因此我们还去掉了传递给服务器端 Fill 方法的 Parameter.
先以更新行为例子, 我们使用通过 UpdateAsync-Url 和 UpdateAsync-MethodName 来设置更新行将调用页面的 Student.aspx 的 Update 方法. 既然要更新, 那么我们需要将行的信息传递给 Update 方法, 只需在行的编辑模板 EditItemTemplate 中进行相应的设置, 就可以为 Update 方法传递相应的行信息.
我们来看下 EditItemTemplate 中的内容, 你可以在 Repeater 的 EditItem 属性中设置行的编辑模板, 其效果和设置 EditItemTemplate 是一致的, 但如果设置了 EditItemTempate 那么将覆盖 EditItem 属性中的内容.
<EditItemTemplate>
<input type="hidden" id="&u:id" value="#:id"/>
<ul class="edit-item">
<li>#:id</li>
<li>
<input type="text" id="&u:realname" value="#:realname"/>
</li>
<li>
<input type="text" id="&u:age" value="#:age"/>
</li>
<li>
<input type="text" id="&u:skill" value="#:skill"/>
</li>
<li><a href="#" onclick="!:endedit">取消</a><a href="#" onclick="!:update">更新</a></li>
</ul>
</EditItemTemplate>
在 EditItemTemplate 中, 有 4 个 input 元素, 其中 3 个文本框对应了 realname, age, skill 3 个字段的编辑状态, 我们看到在 input 元素的 value 属性中, 采用了 #:<字段名> 的方式绑定了字段. 还有 1 个隐藏值包含了 id 字段的值, 因为我们不希望编辑此字段但希望将 id 传递给 Update 方法. 对于希望将其值传递给 Update 方法的 input 元素上, 你可以使用 &u:<字段名> 的形式为 input 的 id 赋值, 表示此 input 元素的值将作为字段的新值传递给 Update 方法.
再来看更新按钮, 它是一个超链接, 在 onclick 事件中, 我们需要填写更新的 js 脚本, 但事实上, 简单的使用 !:<命令名> 的形式, 就可以绑定 js 脚本到事件, 这里我们填写 !:update 即可. 当然, 我们还看到了取消按钮和其绑定的 !:endedit.
在更新之前和之后, 我们检查数据的合法性和通过用户最终的结果, 可以通过 PreUpdate 和 Updated 属性来设置, 他们表示更新之前和之后的事件, 其中参数 e 的 row 属性表示更新的行, 在 PreUpdate 的事件中, 如果我们返回 false, 则将停止更新.
PreUpdate="
function(tag, e){
if(e.row.realname == '' || e.row.age == '' || e.row.skill == ''){
alert('请将信息填写完整');
return false;
}
}
" Updated="
function(tag, e){
alert('成功更新了 ' + e.row.realname);
}
"
剩下的新建和删除的写法都是类似的, 删除更简单只有一个删除的按钮并绑定 !:remove js 脚本到超链接的 onclick 事件即可, 因此就不再解释.
在面是 Student.aspx 中, 我们编写 Update 方法:
因为, 我们事先添加了 StudentDS.xsd 数据集, 它会自动建立一个数据适配器, 其中包含了更新, 新建, 删除行的方法, 我们直接使用即可.
[WebMethod ( )]
publicstaticobject Update ( int id, string realname, string age, string skill )
{
bool isSuccess =true;
try
{
StudentTableAdapter adapter =new StudentTableAdapter ( );
adapter.Update ( realname, age, skill, id );
}
catch
{ isSuccess =false; }
returnnew { __success = isSuccess, row =new { id = id, realname = realname, age = age, skill = skill } };
}
在方法的最后, 我们返回了一个匿名类型, .NET 4.0 将自动将其变为一个对应的 json 并发回给浏览器, 也就是对应了刚才 Updated 属性中的 e.row.
好了, 这次示例中的内容有点小多, 没法全部讲完, 只给大家讲其中的一些吧, 完整的代码太多也不粘贴了, 大家如果需要看可以下载示例代码.
JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.
目前 JQueryElement 最新版本为 3.1.1, 可以在上面的地址看到新版本改动的内容.
请到 Download 下载资源 的 JQueryElement 示例下载一节下载示例代码
实际过程演示: http://www.tudou.com/programs/view/S5FE9qP_Fco/ , 建议全屏观看.
