jQuery を使用して GridView の非同期ソートとページングを実装する code

バックアップ管理ページが要求されるたびに、サーバーはすべてのバックアップおよび復元情報をクライアントに送信し、その後 ui.tabs が 2 種類の情報を折りたたんで個別に表示します。幸いなことに、ui.tabs は ajax を提供します。

コードをコピーしますコードは次のとおりです:

バックアップ

復元< /span>

サーバーと対話するときに、サーバー側のコントロールがあります。たとえば、GridView にはソート機能が備わっており、ページングは不可能です。対話するたびに、最初にタブをロードしたときのステータスのみが表示されるためです (gridView は常に表示される場合があります)最初のページ)、場合によってはページ全体を埋めることもあります。

この問題を解決するには、まず ajax を使用して、参照されているすべてのページがリロードされないようにすることを考えてください。 UpdatePanel を試してみましたが、うまくいかなかったので、juery を考えました。

以下では、jquery を使用して GridView の非同期ソートとページングを実装する方法を説明します。

まず、ページに GridView を配置します。これはページの実際の表示部分としては使用されませんが、ajax リクエストが来たときにこの GridView を使用します。 Render は HTML 出力であり、ajax コールバック関数によって表示が完了します。 GridView を表示しないようにするには、PreRender で Visible = false を設定します。直接設定しないと、HTML

Code

コードをコピーします

コードは次のとおりです。 🎜>

 
 ;ItemTemplate> 
< ;input id="Radio1" type="radio" name="Restore" value='<%#Eval("operatePath") %>'/>選択< /label> 
 
< /div> 
 
メモ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) 
{ 
//デバッガー; 
$('#ShowData').text(XMLHttpRequest.responseText); , textStatus) 
{ 
} 
}); 

 
次のステップは、get メソッドを使用して並べ替えフィールドと並べ替え方向を指定します。関数は次のとおりです: 

コード

コードをコピーコードは次のとおりです:

var sortDataGridView=function(sortExpression,sortDirection)

{
event.returnVaule=false;//送信サーバーを阻止
$.ajax({
url:'Restore.aspx?' new Date( ) '&sortEx=' sortExpression '&sortDir=' sortDirection、//IE がキャッシュされるため、キャッシュの影響を防ぐために新しい 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 マーク
このタグに onclick イベントを追加し、サーバーへの PostBack を防ぐために href 属性値を削除します。そこで、GridViewのRowDataBoundイベントで以下の処理を行います。

Code

Copy code

コードは次のように: protected void gvRestore_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.Header)

{

for (int i = 1; i { 
LinkBut​​ton lt = (LinkBut​​ton)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 リクエストに応答するだけです。これは、RendControl メソッドを直接見るだけです。 GridView の を呼び出して HTML を出力します。 

これで、gridview の ajax ソートとページングを実装できるようになりました。要約すると、アイデアは実際には非常に単純ですが、実装にはまだ回り道がいくつかあります。コードの形式で手動の例を GridView に使用したかったのですが、テンプレート列を追加したため、最終的にはうまくいきませんでした。テンプレート列に input type='Radio' を追加します。コーディング時に ITemplate を継承しますが、value='<%#Eval("operatePath") %>' のバインディングを実装する方法がわかりません。ここで質問なのですが、知っている人がいたら教えてください。

コードをコピー

コードは次のとおりです:

コード

コードをコピー

コードは次のとおりです:

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[] key = Request.QueryString.AllKeys;
foreach (キーの文字列 str)
{
if (String.Compare(key, str, true) == 0)
return true;
}
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 = @"";
for (int i = 0; i {
NavStr = NavStr @"";
}
NavStr = NavStr @"

" (i 1).ToString() @" | " @"

";
NavStr を返す;
}

public override void VerifyRenderingInServerForm(Control control)
{
//base.VerifyRenderingInServerForm(control);
}
protected void gvRestore_PreRender(object sender, EventArgs e)
{
this.gvRestore.Visible = false;
}

jQuery を使用して GridView の非同期ソートとページングを実装する code_jquery