您的位置:知识库 » Web前端

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

作者: 明轩  来源: 博客园  发布时间: 2008-10-27 15:44  阅读: 18634 次  推荐: 4   原文链接   [收藏]  

   经常会用到jquery.ui.tabs标签,如我们可以把备份管理放在一个页面上,而该页面有两个tab分别为备份和还原,但这样会现在这个页面臃肿,每次请求备份管理页面时,服务端会把所以的备份还原信息都传到客户端,然后ui.tabs将两种信息折叠起来分别显示,好在ui.tabs给我提供ajax功能,我们的每个tab可以直接应用另外一个页面

如:

Code

      但这样,当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

Code

       注意,我们在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事件做如下处理:

Code

      到这一步,思路基本上已经清晰,剩下的事,就是在服务端响应ajax请求了,很简单,直接看代码,要注意是调用GridView的RendControl方法,输出html。

Code

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

4
0

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻