zoukankan      html  css  js  c++  java
  • 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-UrlUpdateAsync-MethodName 来设置更新行将调用页面的 Student.aspxUpdate 方法. 既然要更新, 那么我们需要将行的信息传递给 Update 方法, 只需在行的编辑模板 EditItemTemplate 中进行相应的设置, 就可以为 Update 方法传递相应的行信息.

    我们来看下 EditItemTemplate 中的内容, 你可以在 RepeaterEditItem 属性中设置行的编辑模板, 其效果和设置 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.

    在更新之前和之后, 我们检查数据的合法性和通过用户最终的结果, 可以通过 PreUpdateUpdated 属性来设置, 他们表示更新之前和之后的事件, 其中参数 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/ , 建议全屏观看.

  • 相关阅读:
    2021,6,10 xjzx 模拟考试
    平衡树(二)——Treap
    AtCoder Beginner Contest 204 A-E简要题解
    POJ 2311 Cutting Game 题解
    Codeforces 990G GCD Counting 题解
    NOI2021 SDPTT D2T1 我已经完全理解了 DFS 序线段树 题解
    第三届山东省青少年创意编程与智能设计大赛总结
    Luogu P6042 「ACOI2020」学园祭 题解
    联合省选2021 游记
    Codeforces 1498E Two Houses 题解 —— 如何用结论吊打标算
  • 原文地址:https://www.cnblogs.com/zoyobar/p/JE_7.html
Copyright © 2011-2022 走看看