首页
所有分类
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 相关文章推荐
JavaScript函数、方法、对象代码
Oct 29 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
JavaScript知识点整理
Dec 09 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
微信小程序 Page（）函数详解
Oct 17 Javascript
理解javascript中的闭包
Jan 11 Javascript
微信小程序之购物车功能
Sep 23 Javascript
vue中component组件的props使用详解
Sep 04 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
google广告之另类js调用实现代码
Aug 22 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
欧洲购物网站(15) 南非购物网站(8) 荷兰购物网站(99) 芬兰购物网站(10) 哥伦比亚购物网站(5) 比利时购物网站(33) 葡萄牙购物网站(13) 瑞典购物网站(55) 土耳其购物网站(10) 泰国购物网站(30)
You might like
php microtime获取浮点的时间戳
2010/02/21 PHP
php懒人函数 自动添加数据
2011/06/28 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
浅谈React高阶组件
2018/03/28 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
python生成九宫格图片
2018/11/19 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
python实现微信防撤回神器
2019/04/29 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
洛杉矶时尚女装系列：J.ING US
2019/03/17 全球购物
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
母亲节演讲稿
2014/05/27 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书