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

最新推荐文章于 2024-09-23 15:22:36 发布

focus_dada

最新推荐文章于 2024-09-23 15:22:36 发布

阅读量282

点赞数

分类专栏： jQuery 文章标签： jquery xmlhttprequest function string ajax html

本文链接：https://blog.csdn.net/focus_dada/article/details/5836353

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

如：

但这样，当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

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

原形如下：

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

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

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

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。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="#" mce_href="#" οnclick='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>