利用jQuery 实现GridView异步排序、分页-千百度社区

利用jQuery 实现GridView异步排序、分页

7个月前发布

0357

经常会用到jquery.ui.tabs标签，如我们可以把备份管理放在一个页面上，而该页面有两个tab分别为备份和还原，但这样会现在这个页面臃肿，每次请求备份管理页面时，服务端会把所以的备份还原信息都传到客户端，然后ui.tabs将两种信息折叠起来分别显示，好在ui.tabs给我提供ajax功能，我们的每个tab可以直接应用另外一个页面

如：

图片[1]-利用jQuery 实现GridView异步排序、分页-千百度社区
图片[2]-利用jQuery 实现GridView异步排序、分页-千百度社区
Code

<div id=“container“>
      <ul>
          <li><a  href=“#fragment-1“><span>备份</span></a></li>
          <li><a  href=“Restore.aspx“><span>还原</span></a></li>
      </ul>
      </div>

但这样，当Restore.aspx存在服务端控件时，当他与服务端交互时，将不会很理想，比如GridView自带排序，分页就不可能实现，因为每一次交互他总是他只会显示你第一次加载该tab的状态（gridview它可能总是显示的第一页),有时甚至会充开整个页面。

解决这个问题，首先想到时ajax以防止被引用的页面全部重新加载。UpdatePanel我试了一下不行，如是便想到juery。

下面我将示范如何结合jquery实现GridView的异步排序，分页。

首先我们还时在页面放放一个gridview，他不会作为页面中真正显示的部分，而是作为辅助html输出，当一个ajax请求来到时，我们利用这个GridView，Render为Html输出，ajax的回调函数完成显示。为了不显示GridView我在PreRender中设置Visible = false，不能直接设置Visible=false否则他不会被Render成html

图片[1]-利用jQuery 实现GridView异步排序、分页-千百度社区
图片[2]-利用jQuery 实现GridView异步排序、分页-千百度社区
Code

<body  onload=“getPageData(1)“>
    <form id=“form1“ runat=“server“>
    <div >
    <div id=‘ShowData‘>
         <asp:GridView id=“gvRestore“ runat=“server“  Width=“100%“ PageSize=“5“ DataSourceID=“SqlDataSource1“ AutoGenerateColumns=“False“ AllowPaging=“True“  OnRowDataBound=“gvRestore_RowDataBound“ AllowSorting=“True“ Height=“138px“ OnDataBound=“gvRestore_DataBound“ OnPreRender=“gvRestore_PreRender“ ><Columns>
          <asp:BoundField DataField=“ID“ HeaderText=“ID“ SortExpression=“ID“ Visible=“False“></asp:BoundField>
<asp:BoundField DataField=“WorkId“ HeaderText=“工号“ SortExpression=“WorkId“></asp:BoundField>
<asp:BoundField DataField=“userName“ HeaderText=“操作人姓名“ SortExpression=“userName“></asp:BoundField>
<asp:BoundField DataField=“operateType“ HeaderText=“操作类型“ SortExpression=“operateType“></asp:BoundField>
<asp:BoundField DataField=“operateWay“ HeaderText=“操作方式“ SortExpression=“operateWay“></asp:BoundField>
<asp:BoundField DataField=“operateTime“ HeaderText=“操作时间“ SortExpression=“operateTime“></asp:BoundField>
<asp:BoundField DataField=“operatePath“ HeaderText=“保存路径“ SortExpression=“operatePath“></asp:BoundField>
<asp:BoundField DataField=“operateReason“ HeaderText=“操作原因“ SortExpression=“operateReason“></asp:BoundField>
           <asp:TemplateField HeaderText=“选择“>
                    <ItemTemplate>
                        <input id=“Radio1“ type=“radio“  name=“Restore“ value=‘<%#Eval(“operatePath”) %>‘/><label for=“Radio1“>选择</label>
                    </ItemTemplate>
                </asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<asp:SqlDataSource id=“SqlDataSource1“ runat=“server“ SelectCommand=“SELECT * FROM [BackUpInfo] where operateType=’备份’“ ConnectionString=“<%$ ConnectionStrings:BackUpConnectionString %>“>
        </asp:SqlDataSource>
    </div>
    </form>
</body>

注意，我们在Body的onload事件中指定了一个函数，他会在页面被加载时请求服务端，传回数据。本身是个ajax请求

原形如下：

var getPageData
=
function(i)
{
   $.ajax({
       url:
‘
Restore.aspx?
‘
+
new
Date()
+
‘
&page=
‘
+
i,
//
指定pageindex

       type:
‘
get
‘
,
       success:function(data,textStatus)
       {
         $(
‘
#ShowData
‘
)[
0
].innerHTML
=
data;
       },
       error:function(XMLHttpRequest,textStatus)
       {

//
debugger;

            $(
‘
#ShowData
‘
).text(XMLHttpRequest.responseText);
       },
       complete:function(XMLHttpRequest,textStatus)
       {
       }
      });
}

接下来就是排序了，通过get方式指定排序字段，排序方向。函数如下：

var sortDataGridView
=
function(sortExpression,sortDirection)
      {

event
.returnVaule
=
false
;
//
阻止提交服务器

        $.ajax({
            url:
‘
Restore.aspx?
‘
+
new
Date()
+
‘
&sortEx=
‘
+
sortExpression
+
‘
&sortDir=
‘
+
sortDirection,
//
IE从在缓存，因此加new Date（）防止缓存的影响

            type:
‘
get
‘
,
            success:function(data,textStatus)
            {
             $(
‘
#ShowData
‘
)[
0
].innerHTML
=
data;
            },
            error:function(XMLHttpRequest,textStatus)
            {
             $(
‘
#ShowData
‘
).text(XMLHttpRequest.responseText);
            },
            complete:function(XMLHttpRequest,textStatus)
            {
            }
            });
      }

当点击GridView中HeadText时我们要触发 sortDataGridView实现异步排序，查看GridView的原始生成内容，实际上是个A标记<a href=”javascript:__doPostBack(‘gvRestore’,’Sort$WorkId’)”>

我们要为该标记添加一个onclick事件，并移除href属性值，以防止PostBack服务器。因此我在GridView的RowDataBound事件做如下处理：

图片[1]-利用jQuery 实现GridView异步排序、分页-千百度社区
图片[2]-利用jQuery 实现GridView异步排序、分页-千百度社区
Code

protected void gvRestore_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        for (int i = 1; i <= 7; i++)
        {
            LinkButton lt = (LinkButton)e.Row.Cells[i].Controls[0];
            lt.Attributes[“href“] = “#“;
            lt.OnClientClick = string.Format(“ return  sortDataGridView(‘{0}’,'{1}’)“, lt.CommandArgument, “ASC“);
        }
    }
    if (e.Row.RowType == DataControlRowType.Pager)
    {
        e.Row.Visible = false;
    }
}

到这一步，思路基本上已经清晰，剩下的事，就是在服务端响应ajax请求了，很简单，直接看代码，要注意是调用GridView的RendControl方法，输出html。

图片[1]-利用jQuery 实现GridView异步排序、分页-千百度社区
图片[2]-利用jQuery 实现GridView异步排序、分页-千百度社区
Code

static string sortDirection = “ASC“;
protected void Page_Load(object sender, EventArgs e)
{
        if (hasKeyName(“page“))
        {
            if (!string.IsNullOrEmpty(Request.QueryString[“page“].ToString()))
            {
                this.gvRestore.PageIndex = int.Parse(Request.QueryString[“page“].ToString());
                ResponseData(this.gvRestore);
            }
        }
        else
            if (hasKeyName(“sortEx“))
            {
                string sortEx = Request.QueryString[“sortEx“].ToString();
                string sortDir = Request.QueryString[“sortDir“].ToString();
                if (string.Compare(sortDir, sortDirection, true) == 0)
                {
                    this.gvRestore.Sort(sortEx, SortDirection.Ascending);
                    sortDirection = “DSAC“;
                }
                else
                {
                    this.gvRestore.Sort(sortEx, SortDirection.Descending);
                    sortDirection = “ASC“;
                }
                ResponseData(this.gvRestore);
            }
}

private bool hasKeyName(string key)
{
     string[]  keys = Request.QueryString.AllKeys;
     foreach (string str in keys)
     {
         if (String.Compare(key, str, true) == 0)
             return true;
     }
     return false;
}

private void ResponseData(GridView gv)
{
    gv.DataSourceID = this.SqlDataSource1.ID;
    System.Globalization.CultureInfo info = new System.Globalization.CultureInfo(“ZH-CN“, true);
    System.IO.StringWriter sWriter = new System.IO.StringWriter(info);
    System.Web.UI.HtmlTextWriter html = new HtmlTextWriter(sWriter);
    gv.DataBind();
    if (gv != null)
    {
        gv.RenderControl(html);
    }
    Response.Write(html.InnerWriter);
    Response.Write(GetNav(gv.PageCount));
    Response.Flush();
    Response.End();
}

public string GetNav(int pagesize)
{
    string NavStr = @”<table><tr>“;
    for (int i = 0; i < pagesize; i++)
    {
        NavStr = NavStr + @”<td><a href=’#’ onclick=’getPageData(“ + (i + 1).ToString() + “)’>“ + (i + 1).ToString() + @” | “ + @”</a></td>“;
    }
    NavStr = NavStr + @”</tr></table>“;
    return NavStr;
}

public override void VerifyRenderingInServerForm(Control control)
{
//base.VerifyRenderingInServerForm(control);
}
protected void gvRestore_PreRender(object sender, EventArgs e)
{
this.gvRestore.Visible = false;
}

现在可以实现gridview的ajax排序和分页，总结一下思路其实很简单，但在实现的时还是走了点弯路，主要时原本想同通过code形式手工实例化一个GridView，但最终还是没有实现，因为我添加了一个模板列。在模板列中添加一个intput type=’Radio’ 我在code时继承ITemplate，但我确不知怎样实现value='<%#Eval(“operatePath”) %>’的绑定，这里留下一个问题吧，谁知道，请告诉我。

<asp:TemplateField HeaderText=”选择”>
       <ItemTemplate>
      <input id=”Radio1″ type=”radio” name=”Restore” value='<%#Eval(“operatePath”) %>’/><label for=”Radio1″>选择</label>
        </ItemTemplate>
             </asp:TemplateField>

千百度

© 版权声明

1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。

2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。

3.本文采用知识共享署名4.0国际许可协议 [BY-NC-SA] 进行授权

4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。

5.本站是非经营性个人站点，所有软件信息均来自网络，所有资源仅供学习参考研究目的，并不贩卖软件，不存在任何商业目的及用途

THE END

web前端
# jQuery # jQuery 实例 # GridView # 排序 # 分页 # jQuery实战

喜欢就支持一下吧

相关推荐

评论抢沙发

欢迎您留下宝贵的见解！

提交

暂无评论内容