利用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 相关文章推荐
Webkit的跨域安全问题说明
Sep 13 Javascript
js动态拼接正则表达式的两种方法
Mar 04 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
Vue发布订阅模式实现过程图解
Apr 30 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
PHP下对字符串的递增运算代码
2010/08/21 PHP
jQuery 源码分析笔记
2011/05/25 PHP
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
关于svn冲突的解决方法
2013/06/21 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
Python中的zip函数使用示例
2015/01/29 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
python交互式图形编程实例(二)
2017/11/17 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
python脚本后台执行方式
2019/12/21 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
省级四好少年事迹材料
2014/01/25 职场文书
部队万能检讨书
2014/02/20 职场文书
Python turtle编写简单的球类小游戏
2022/03/31 Python