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


每次请求备份管理页面时,服务端会把所以的备份还原信息都传到客户端,然后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中的应用
查找运行系统里的bad sql语句的好方法
Linux VI编辑器中的复制与粘贴
PHP EOT定界符的使用详解
W3C Widget 配置与打包
Javascript实现的鼠标经过时播放声音
用javascript 转换外部链接样式
对话Linux核心专家:多版本是Linux灵魂
cnct.batch 批处理不错的东西%cd%
JavaScript发展与互联网
javascript表达式和运算符
15个提升WordPress用户工作效率的工具
如何去掉文章里的 html 语法
用css filter做鼠标滑过图片效果
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 小勺子的快餐店之旅 献给妈妈的三八节礼物 县乡镇学校党建工作会议上的讲话 灵魂深处花开 人教版八年级上册三单元作文:龙津桥作文700字 农民村官入党申请书模板 【精品】大学生新学期计划书 经典名家散文:万般皆上品 珍惜你身旁那个爱生气的女孩° 盼你平安归来 如泣如诉反义词/近义词,如泣如诉造句 逃课万能检讨书1000字 那样的天赋,我不想要。 再见了,枫叶 为我寂寞的等待再不等待寂寞 念念之中,无非匆匆 故乡颂 小学四年级作文600字:《二小放牛郎》观后感 怜香惜玉的句子 棕榈风情 流星蝴蝶剑 小学四年级作文400字:哦,我明白了 小学五年级作文1000字:畅想心胸 “早旧闻”和“晚旧闻” 迪士尼,你怎么会这样?作文500字 活多久?选择权在自己手中! 青岛的第一场雪作文500字 青春之悟 商业授权委托书范本 下雨了,你感动了吗 关于情感的八个误解 追忆的那时光 有关抚慰心灵的句子 参观漂亮的太阳谷 【处女与非处女的区别】 『看了有点心酸 报社社训选编 六年级童话故事作文 爷爷真好作文 雨伞后的秘密 周子墨 儿童诗歌:爸爸,请等我慢慢长大 与周总理的约定 有趣的定向活动 宁夏回族自治区概况(转载)作文1000字 2015工程项目管理专业技术工作总结 请开一扇窗,让我觉得自由 雪的情思作文750字 一世微凉,只因欠你个等待 论怎样提高县供电企业的活力 网络创业-如何成为网络SOHO族? 小兔上山去采药

Copyright © 2016 phpStudy |