经常会用到jquery.ui.tabs标签,如我们可以把备份管理放在一个页面上,而该页面有两个tab分别为备份和还原,但这样会现在这个页面臃肿,每次请求备份管理页面时,服务端会把所以的备份还原信息都传到客户端,然后ui.tabs将两种信息折叠起来分别显示,好在ui.tabs给我提供ajax功能,我们的每个tab可以直接应用另外一个页面
如:
但这样,当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事件中指定了一个 函数,他会在页面被加载时请求服务端,传回数据。本身是个ajax请求
原形如下:
接下来就是排序了,通过get方式指定排序字段,排序方向。函数如下:
当点击GridView中HeadText时我们要触发 sortDataGridView实现异步排序,查看GridView的原始生成内容,实际上是个A标记<a href="javascript:__doPostBack('gvRestore','Sort$WorkId')">
我们要为该标记添加一个onclick事件,并移除href属性值,以防止PostBack服务器。因此我在GridView的RowDataBound事件做如下处理:
到这一步,思路基本上已经清晰,剩下的事,就是在服务端响应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>