快捷導(dǎo)航

利用jQuery 實(shí)現(xiàn)GridView異步排序、分頁的代碼

更新時(shí)間：2010年02月06日 12:28:22 作者：

經(jīng)常會用到j(luò)query.ui.tabs標(biāo)簽，如我們可以把備份管理放在一個(gè)頁面上，而該頁面有兩個(gè)tab分別為備份和還原，但這樣會現(xiàn)在這個(gè)頁面臃腫

每次請求備份管理頁面時(shí)，服務(wù)端會把所以的備份還原信息都傳到客戶端，然后ui.tabs將兩種信息折疊起來分別顯示，好在ui.tabs給我提供ajax功能，我們的每個(gè)tab可以直接應(yīng)用另外一個(gè)頁面
如：

復(fù)制代碼代碼如下:

 

<div id="container"> 
<ul> 
<li><a href="#fragment-1"><span>備份</span></a></li> 
<li><a href="Restore.aspx"><span>還原</span></a></li> 
</ul> 
</div> 

但這樣，當(dāng)Restore.aspx存在服務(wù)端控件時(shí)，當(dāng)他與服務(wù)端交互時(shí)，將不會很理想，比如GridView自帶排序，分頁就不可能實(shí)現(xiàn)，因?yàn)槊恳淮谓换ニ偸撬粫@示你第一次加載該tab的狀態(tài)（gridview它可能總是顯示的第一頁),有時(shí)甚至?xí)溟_整個(gè)頁面。

解決這個(gè)問題，首先想到時(shí)ajax以防止被引用的頁面全部重新加載。UpdatePanel我試了一下不行，如是便想到j(luò)uery。

下面我將示范如何結(jié)合jquery實(shí)現(xiàn)GridView的異步排序，分頁。

首先我們還時(shí)在頁面放放一個(gè)gridview，他不會作為頁面中真正顯示的部分，而是作為輔助html輸出，當(dāng)一個(gè)ajax請求來到時(shí)，我們利用這個(gè)GridView，Render為Html輸出，ajax的回調(diào)函數(shù)完成顯示。為了不顯示GridView我在PreRender中設(shè)置Visible = false，不能直接設(shè)置Visible=false否則他不會被Render成html

代碼

復(fù)制代碼代碼如下:

 
<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="操作時(shí)間" 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事件中指定了一個(gè) 函數(shù)，他會在頁面被加載時(shí)請求服務(wù)端，傳回?cái)?shù)據(jù)。本身是個(gè)ajax請求

原形如下：

代碼

復(fù)制代碼代碼如下:

 
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方式指定排序字段，排序方向。函數(shù)如下：
代碼

復(fù)制代碼代碼如下:

 
var sortDataGridView=function(sortExpression,sortDirection) 
{ 
event.returnVaule=false;//阻止提交服務(wù)器 
$.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) 
{ 
} 
}); 
} 

當(dāng)點(diǎn)擊GridView中HeadText時(shí)我們要觸發(fā) sortDataGridView實(shí)現(xiàn)異步排序，查看GridView的原始生成內(nèi)容，實(shí)際上是個(gè)A標(biāo)記<a href="javascript:__doPostBack('gvRestore','Sort$WorkId')">
我們要為該標(biāo)記添加一個(gè)onclick事件，并移除href屬性值，以防止PostBack服務(wù)器。因此我在GridView的RowDataBound事件做如下處理：

代碼

復(fù)制代碼代碼如下:

 
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; 
} 
} 

到這一步，思路基本上已經(jīng)清晰，剩下的事，就是在服務(wù)端響應(yīng)ajax請求了，很簡單，直接看代碼，要注意是調(diào)用GridView的RendControl方法，輸出html。

現(xiàn)在可以實(shí)現(xiàn)gridview的ajax排序和分頁，總結(jié)一下思路其實(shí)很簡單，但在實(shí)現(xiàn)的時(shí)還是走了點(diǎn)彎路，主要時(shí)原本想同通過code形式手工實(shí)例化一個(gè)GridView，但最終還是沒有實(shí)現(xiàn)，因?yàn)槲姨砑恿艘粋€(gè)模板列。在模板列中添加一個(gè)intput type='Radio' 我在code時(shí)繼承ITemplate，但我確不知怎樣實(shí)現(xiàn)value='<%#Eval("operatePath") %>'的綁定，這里留下一個(gè)問題吧，誰知道，請告訴我。

復(fù)制代碼代碼如下:

 
<asp:TemplateField HeaderText="選擇"> 
<ItemTemplate> 
<input id="Radio1" type="radio" name="Restore" value='<%#Eval("operatePath") %>'/><label for="Radio1">選擇</label> 
</ItemTemplate> 
</asp:TemplateField> 

代碼

復(fù)制代碼代碼如下:

 
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; 
} 