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

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

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

• バックアップ


• 復元

サーバーと対話するときに、サーバー側のコントロールがあります。たとえば、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=''/>選択










メモ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='' のバインディングを実装する方法がわかりません。ここで質問なのですが、知っている人がいたら教えてください。




コードをコピー

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

コード

コードをコピー


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

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