利用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; 
}
Javascript 相关文章推荐
jQuery中after的两种用法实例
Jul 03 Javascript
莱鸟介绍window.print()方法
Jan 06 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
微信小程序实现手指触摸画板
Jul 09 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
深入了解JS之作用域和闭包
Jun 16 Javascript
详解Vue数据驱动原理
Nov 17 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
You might like
linux实现php定时执行cron任务详解
2013/12/24 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
Django框架models使用group by详解
2020/03/11 Python
python实现数字炸弹游戏程序
2020/07/17 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
市场营销方案范文
2014/03/11 职场文书
学校花圃的标语
2014/06/18 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
求职简历自我评价范文
2015/03/10 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书