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

接着给大家介绍 Repeater 的使用  ajax 更新删除和新建行的功能.

本次的示例是上个文章示例的延续, 其中 JQueryElement 更新到了 3.1.1, 使 repeater 自身包含了对分页的控制, Repeater 控件也增加了一些属性, 其中增加了各类模板, 比如: HeaderTemplate 等.

由于篇幅的原因, 这里不再解释一些简单的内容, 比如: 引用命名空间和 js 脚本之类的.

我们来看 Repeater 控件的代码:

<je:Repeater ID="studentRepeater" runat="server" IsVariable="true" Selector="'#list'"
    PageSize="3" 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" Navigable="
    function(tag, e){
        cmdPrev.button( e.prev ? 'enable' : 'disable');
        cmdNext.button( e.next ? 'enable' : 'disable');
    }
    " 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);
    }
    " PreInsert="
    function(tag, e){
        if(e.row.realname == '' || e.row.age == '' || e.row.skill == ''){
            alert('请将信息填写完整');
            return false;
        }
    }
    " Inserted="
    function(tag, e){
        alert('成功新建了 ' + e.row.realname);
    }
    " Removed="
    function(tag, e){
        alert('成功删除');
    }
    ">
<HeaderTemplate>
<ul class="header">
<li>序号</li><li>姓名</li><li>年龄</li><li>特长</li><li>操作</li>
</ul>
</HeaderTemplate>
<ItemTemplate>
<input type="hidden" id="&r:id" value="#:id"/>
<ul class="item">
<li>#:id</li><li>#:realname</li><li>#:age</li><li>#:skill</li>
<li><a href="#" onclick="!:beginedit">编辑</a><a href="#" onclick="!:remove">删除</a></li>
</ul>
</ItemTemplate>
<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>
<FooterTemplate>
<ul class="footer">
<li><span id="result">第 @:pageindex/@:pagecount 页, @:itemcount 条</span></li>
</ul>
</FooterTemplate>
<NewItemTemplate>
<ul class="new-item">
<li>-</li>
<li>
<input type="text" id="&i:realname" value=""/>
</li>
<li>
<input type="text" id="&i:age" value=""/>
</li>
<li>
<input type="text" id="&i:skill" value=""/>
</li>
<li><a href="#" onclick="!:insert">添加</a></li>
</ul>
</NewItemTemplate>
</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/ , 建议全屏观看.