首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onFebruary 06, 2010

每次请求备份管理页面时，服务端会把所以的备份还原信息都传到客户端，然后ui.tabs将两种信息折叠起来分别显示，好在ui.tabs给我提供ajax功能，我们的每个tab可以直接应用另外一个页面
如： 

<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

代码 

<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事件做如下处理：

代码 

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。

现在可以实现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>

代码 

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; 
}

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery版Tab标签切换
Mar 16 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
JS判断对象是否存在的10种方法总结
Dec 23 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
jquery动态切换背景图片的简单实现方法
May 14 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 #Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 #Javascript
JavaScript学习笔记（十七）js 优化
Feb 04 #Javascript
jQuery生成asp.net服务器控件的代码
Feb 04 #Javascript
javascript两段代码,两个小技巧
Feb 04 #Javascript
JavaScript面向对象之静态与非静态类
Feb 03 #Javascript
JavaScript 学习笔记（十六） js事件
Feb 01 #Javascript
葡萄牙购物网站(13) 哥伦比亚购物网站(5) 瑞典购物网站(55) 芬兰购物网站(10) 比利时购物网站(33) 欧洲购物网站(15) 泰国购物网站(30) 荷兰购物网站(99) 南非购物网站(8) 挪威购物网站(7)
You might like
PHP similar_text 字符串的相似性比较函数
2010/05/26 PHP
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
smarty中post用法实例
2014/11/28 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
工商学院毕业生自荐信
2013/11/12 职场文书
财务会计实习报告体会
2013/12/20 职场文书
5.12护士节活动总结
2015/02/10 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案！
2021/05/20 Python
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python