Oracle分页之三：利用PagerView来实现无刷新GridView

接上面一节，上面还存在问题就是分页控件使用的仍然是服务器端控件，没点一次就要刷新页面一次，也就是向服务器端请求一次。那么用什么方法能够让页面无刷新而进行分页呢？

在这里，我想到了PagerView这套开源控件，有兴趣的朋友可以通过PagerView关键字去搜搜，然后研究下，这个封装的还是挺好的。

但是，这里遇到一个问题，如何让页面的GridView实现无刷新加载数据呢？这里我不得不提到我以前文章中写道的ICallbackEventhandler接口，这是微软的一个ajax回调接口，然后再配合这输出页面HTML的方式，不就可以实现无刷新GridView分页了吗？

前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PagerWithPagerView.aspx.cs" Inherits="PagerWithPagerView" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="tableview/scripts/jquery.js" type="text/javascript"></script>
    <script src="tableview/scripts/PagerView.js" type="text/javascript"></script>
    <link href="tableview/style.css" rel="stylesheet" type="text/css" />
    <link href="css/TableZB.css" rel="stylesheet" type="text/css" />
    <link href="css/swcss.css" rel="stylesheet" type="text/css" />
    <link href="css/GridViewCSS_O.css" rel="stylesheet" type="text/css" />
   <%--<style type="text/css">

    .PagerView a
    {
        background:url(images/loginButton.gif) no-repeat;

    }

   </style>--%>

</head>
<body>
   <form id="form1" runat="server">
   <div id="myData">
       <asp:GridView CssClass="GVtable" ID="GridView1" runat="server" Width="100%"
        AutoGenerateColumns="False">
        <Columns>
        <asp:TemplateField HeaderText="编号">
        <ItemTemplate>
        <%#Eval("R").ToString() %></ItemTemplate></asp:TemplateField>
        <asp:TemplateField HeaderText="纳税人识别码">
        <ItemTemplate><%#Eval("nsrsbm").ToString() %></ItemTemplate></asp:TemplateField>
         <asp:TemplateField HeaderText="纳税人名称">
        <ItemTemplate><%#Eval("nsr_mc") %></ItemTemplate></asp:TemplateField>
         <asp:TemplateField HeaderText="登记类型">
        <ItemTemplate><%#Eval("djlx_mc")%></ItemTemplate></asp:TemplateField>
         <asp:TemplateField HeaderText="登记状态">
        <ItemTemplate><%#Eval("dj_ztmc")%></ItemTemplate></asp:TemplateField>
         <asp:TemplateField HeaderText="注册类型">
        <ItemTemplate><%#Eval("zclx_mc")%></ItemTemplate></asp:TemplateField>
         <asp:TemplateField HeaderText="所别">
        <ItemTemplate><%#Eval("gljg_mc")%></ItemTemplate></asp:TemplateField>
         <asp:TemplateField HeaderText="专管员">
        <ItemTemplate><%#Eval("zgy_mc")%></ItemTemplate></asp:TemplateField>
         <asp:TemplateField HeaderText="所属性">
        <ItemTemplate><%#Eval("ssx_mc")%></ItemTemplate></asp:TemplateField>
         <asp:TemplateField HeaderText="操作">
        <ItemTemplate>
            <asp:LinkButton ID="lbtnOperation" CommandArgument='<%#Eval("nsrsbm") %>' runat="server">编辑</asp:LinkButton>
        </ItemTemplate>
        </asp:TemplateField>
        </Columns>
    </asp:GridView>
    </div>
   <script type="text/javascript">
    window.onload=function(){
         var pager = new PagerView('pager');  //pager对象申明
         pager.itemCount = <%=totalCount %>;  //设置当前显示的页索引
         pager.size = <%=_pageSize %>;  //设置每页显示条数
         pager.onclick = function(index) {
             raiseCallBack(index,"");  //当分页按钮被点击的时候，触发的Ajax回调函数
         };
         pager.render();
     }

     //ajax回调成功后，进行处理的函数
     function rServer(arg,context)
     {
        $("#myData").text();
        $("#myData").html(arg);
     }

     //ajax回调函数，用户向后台请求数据
     function raiseCallBack(arg,context)
     {
        <%=ClientScript.GetCallbackEventReference(this,"arg","rServer","context") %>;
     }
</script>
    </form>
     <div id="pager"></div>
</body>
</html>

那么在后台只要先实现ICallbackEventhandler接口，然后获取从前台传送过来的数据，进行处理，最后将html标签元素打到前台即可。

后台代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

public partial class PagerWithPagerView : System.Web.UI.Page,ICallbackEventHandler
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Bind();
        }
    }

    public static int _pageSize = 11;
    public static int _startSize = 1;
    public static int totalCount;

    public string _str;

    //绑定gridview  并将绑定后的gridview对象返回
    private GridView Bind()
    {
        string sqlQuery = "select nsrsbm,nsr_mc,djlx_mc,dj_ztmc,zclx_mc,gljg_mc,zgy_mc,ssx_mc from scott.t_yhs_djxxtz";
        DataSet ds = Pagination.PaginationPager(sqlQuery, _pageSize, _startSize, out   totalCount);
        GridView1.DataSource = ds.Tables["Table"];
        GridView1.DataBind();
        return GridView1;
    }

    public string GetCallbackResult()
    {
        return _str;  //将html返回到前台
    }

    public void RaiseCallbackEvent(string eventArgument)
    {
        if (!string.IsNullOrEmpty(eventArgument))
        {
            _startSize = Int32.Parse(eventArgument);
            Response.ClearContent();  //清除
            GridView gv=Bind(); //得到GridView对象
            System.Text.StringBuilder sb = new System.Text.StringBuilder();
            System.IO.StringWriter sw = new System.IO.StringWriter(sb);
            HtmlTextWriter htw = new HtmlTextWriter(sw);
            Header.RenderControl(htw);
            gv.RenderControl(htw);  //将生成的html元素render出来
            _str = sb.ToString();
        }
    }

}

代码中已经有了注释，我这里不再详细说明，这里只要知道ICallbackEventhandler接口的使用方法即可。

具体的结果页面如下：

posted on 2011-04-16 16:58 程序诗人阅读(941) 评论(0) 编辑收藏举报

刷新页面返回顶部

Oracle分页之三：利用PagerView来实现无刷新GridView

公告