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

2024-05-06 14:11:38

字體：大中小

供稿：網(wǎng)友

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

代碼如下:

<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ù)端控件時，當(dāng)他與服務(wù)端交互時，將不會很理想，比如GridView自帶排序，分頁就不可能實現(xiàn)，因為每一次交互他總是他只會顯示你第一次加載該tab的狀態(tài)（gridview它可能總是顯示的第一頁),有時甚至?xí)溟_整個頁面。

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

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

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

上一篇：JQuery 獲取和設(shè)置Select選項的代碼

下一篇：js實現(xiàn)的仿Photoshop鼠標(biāo)滾輪控制輸入框取值(修正兼容Chrome)