jQueryUI Repeater 无刷新删除新建更新数据

接着给大家介绍 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/ , 建议全屏观看.

转载于:https://www.cnblogs.com/zoyobar/archive/2011/08/27/JE_7.html

jQueryUI Repeater 无刷新删除新建更新数据 - JQueryElement [7]相关推荐

无刷新删除 Ajax,JQuery
无刷新删除 Ajax,JQuery 1.数据库用上面的,增加一个 DeleteById 的SQL方法 delete from T_Posts where Id = @Original_Id 2.设置处 ...
EF Core中高效批量删除、更新数据的Zack.EFCore.Batch发布三个新特性
Zack.EFCore.Batch是一个支持在Entity Framework Core中高效删除和更新数据的开源库.我们知道,EF Core中不支持高效的删除和更新数据,所有的更新和操作都是逐条数据 ...
学习sql注入:猜测数据库_学习SQL：删除和更新数据SQL最佳实践
学习sql注入:猜测数据库 Deleting and updating data is very common, but if performed without taking care, which ...
使用JS实现无刷新读取json接口数据
使用JS实现无刷新读取json接口数据 Ajax方法 //ajax function ajax(method, url, asy, fn) {//创建Ajax对象if (window.XMLHttpR ...
php无刷新实现页面更新,使用laravel和ajax实现整个页面无刷新的操作方法
1.数据库文件 CREATE TABLE IF NOT EXISTS mr_key ( id int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT ' ...
Repeater无刷新分页
网上摘录前台: <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" ...
hibernate批量删除和更新数据
转载自:http://blog.csdn.net/yuhua3272004/article/details/2909538 Hibernate3.0 採用新的基于ANTLR的HQL/SQL查询翻译器, ...
【微信小程序企业级开发教程】界面刷新获取新更新数据
在微信小程序开发的过程中,在一个页面中对数据操作之后我们大多数时间都需要刷新一下当前界面以把操作之后的结果显示出来,但是如何在执行操作后进行本页面的刷新就成了一个问题很大但是很需要的操作.下面介绍一下 ...
python mysql删除数据_python-mysql删除和更新数据
删除数据 import codecs import MySQLdb def connect_mysql(): db_config = { 'host': '192.168.48.128', 'port ...

jQueryUI Repeater 无刷新删除新建更新数据 - JQueryElement [7]

jQueryUI Repeater 无刷新删除新建更新数据 - JQueryElement [7]相关推荐

最新文章

热门文章

jQueryUI Repeater 无刷新删除 新建 更新数据 - JQueryElement [7]

jQueryUI Repeater 无刷新删除 新建 更新数据 - JQueryElement [7]相关推荐

最新文章

热门文章

jQueryUI Repeater 无刷新删除新建更新数据 - JQueryElement [7]

jQueryUI Repeater 无刷新删除新建更新数据 - JQueryElement [7]相关推荐