ホームページ  >  記事  >  ウェブフロントエンド  >  クライアント/サービス分離リンクを構築する JQuery のテーブル ページング コードの効率に関する予備調査 model_jquery

クライアント/サービス分離リンクを構築する JQuery のテーブル ページング コードの効率に関する予備調査 model_jquery

WBOY
WBOYオリジナル
2016-05-16 18:36:081043ブラウズ

貴社やプロジェクトの開発環境が単一言語開発環境の場合、フレームワークの利用範囲の一つがプロジェクト内で複数言語で開発された業務モジュールを対象とすることであるため、フレームワークは適用できません。新しいプロジェクトでは、これらのモジュールを必要とする機能は、以前の習慣に従って再開発する必要があります。そうでない場合、少なくとも他の言語で開発されたビジネス機能は、新しいコードを呼び出すための Web サービス インターフェイスに変換されます。この場合、フレームワークで説明されています。この記事で説明した方法は、クライアント側での言語の違いを排除し、開発に純粋な JavaScript と HTML の静的コードのみを使用することもできます。

もちろん、単一言語環境でもこのモデルを開発に使用できますが、開発者はさまざまな優れたサーバー側コントロール (Asp.net コントロール、Java 用に特別に開発されたコントロール) を利用できなくなります。 、など)、純粋な JavaScript コントロールのみを使用できるため、開発者 (特にサーバー側のコントロールに依存する開発者) に不便が生じます。

上記の 2 つのブログ投稿について議論した結果、このモデルはサーバー側言語をクライアントから完全に分離しており、(理論上の条件の下では) 完全に無視できることがわかりました。サーバー側言語タイプの場合、純粋な Javascript 開発のみが実行され、JQUERY で提供される AJAX メソッドがサーバー側メソッドとの通信に使用されます。

上記の全体的なアーキテクチャ図から、クライアントは WebService インターフェイスを使用してデータの取得と送信を行うことがわかり、サーバー ビジネス モデルがどの言語で開発されているかに注意を払う必要はありません (もちろん実際の状況では) , 一般に、WebService インターフェイスはサーバー側のビジネス モデルと同じ言語で開発するのが最適です)。

現時点では、効率の問題が最初に頭に浮かぶかもしれません:

ご存知のとおり、WebService インターフェースの効率は遅いので、この構造モデルを使用して開発された Web サイトの速度が低下することはありませんか? これを行うのではなく、使い慣れた従来の方法を使用して開発してみてはいかがでしょうか?でも速いですか?

次の推論を見てみましょう:

1) WebService インターフェースの効率が遅い <---> 非同期でデータを取得すると、両者は相互に相殺できますか?

2) クライアントは Post メソッドを採用しています。これにより、データ量が削減され、WebService インターフェイスの遅い効率が部分的に相殺されます。

上記の 2 つの推論を完全に比較したわけではありませんが、WebService のヘッジ効率が遅いと確信できます。これはページ側に反映され、長時間待機しても不思議ではありません。結果としてユーザー エクスペリエンスが低下しますが、非同期取得方法であるため、この状況は引き続き発生しますか?おそらくそうではありません。

送信処理中にPostメソッドが使用され、データ量が大幅に削減され、非同期メソッドが使用されるため、実際の運用効果は非常に優れているはずです。

しかし、表のページネーションなどの特殊な状況や一般的な問題の場合は、どのように対処すればよいでしょうか?

ページ上で非常に一般的な問題であるテーブル データの充填とページングは​​、上記の推論に脅威をもたらします。その理由は、一般的なページング コードがデータをクライアント メモリに返してからページングを実行するためです。実際、この問題はこのフレームワークだけの問題ではなく、このフレームワークでは WebService インターフェイスとクライアントが使用されます。コミュニケーションによって、この問題の重要性は無限に高まっています。

次のフレームワークの下でページネーション処理について説明します:

環境: Visual Studio 2005

JQuery 1.3.2

SQLServer2005

ページネーションの原則:

上の図から、データ テーブルに含まれるデータの量に関係なく、クライアントに返されるデータは毎回 1 ページのデータであることがわかります。このメソッドはストアド プロシージャを使用せず、ストアド プロシージャで処理されます。ウェブサービス側。

コードスニペット:

サーバー側の充填テーブル テーブルコード----:

説明:

TB_WEB_NZ_INVESTMENT は、テーブル オブジェクト

に対応するエンティティ クラスです。

FlowID はテーブル オブジェクトのフィールド属性であり、これを通じて同様のデータ レコードの種類を取得できます

このコードは、[Home Page]、[Last Page]、および [Middle Page] の要素をフィルターし、返された汎用 List オブジェクトに対して範囲フィルターを実行します

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

///
/// ページング関数用のテーブル充填サーバー
///

///
/// ページごとの数
/// 現在のページ
///
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string Load_Contributiveperson_Table(string FlowID, int PageCount, int) CurrentPage)
{
List list = new List();

list = objBusinessFacade.GetTB_WEB_NZ_INVESTMENT_CollectionByFlowID(FlowID);
int Total PageCount = 0;
if (PageCount != 0)
{
if ((list.Count % PageCount) > 0)
{
TotalPageCount = list.Count / PageCount 1
}
else
{
TotalPageCount = list.Count / PageCount;
}
}//if

if (CurrentPage == 1)
{
//First page
if (PageCount < list.Count)
{
list.RemoveRange(PageCount, list.Count - PageCount)
}

}
else if ( CurrentPage > 1 && CurrentPage < TotalPageCount)
{
//中間ページ

int R1 = (CurrentPage - 1) * PageCount-1;
int R2 = CurrentPage * PageCount;
リスト list1 = new List();
for (int i = 0; i < list.Count; i )
{
if (i > R1&&i< R2)
{
list1.Add(list[i])
}
}
list.Clear();
list = list1; else if (CurrentPage == TotalPageCount)
{
//最後のページ
//ただし、返される表示オブジェクト リストは最後のページのレコードのみです
//ここではそうでない要素オブジェクト最後のページを削除する必要があります
list.RemoveRange(0,(CurrentPage-1) * PageCount);

return new JavaScriptSerializer().Serialize(list);




原理図:---------------------

上記のコードとこの図を組み合わせて説明します:

1) ホームページ操作

:

list.RemoveRange(PageCount, list.Count - PageCount) 数値に変換: list.RemoveRange(5,14-5);

ホームページに表示される要素: A1 A2 A3 A4 A5 対応するインデックス: 0 1 2 3 4

list.RemoveRange(5,14-5); //インデックス値が 5 以降のすべての要素 (それ自体を含む) を除外し、リストに A1 ~ A5 の要素のみが含まれるようにします

2) 中間ページの操作

: (これはページ 2)

CurrentPage は 2 に等しい

int R1 = (CurrentPage - 1) * PageCount-1; 4 に等しい

int R2 = CurrentPage * PageCount 10 に等しい


R1 と R2 は 2 つの間隔範囲インデックス、つまりインデックス 4 (インデックス 4 を除く) とインデックス 10 (インデックス 10 を除く) の間の要素を表します。これらは削除する要素です


コードをコピー

コードは次のとおりです: List list1 = new List(); for ( int i = 0; i < list.Count; i ) {
if (i > R1&&i{
list1.Add(list[i]); 🎜> }
}
list.Clear();
list = list1;


3) 最後のページの操作:
//最後のページ
//ただし、表示オブジェクト リストは最後のページのレコードのみであることができます
//ここでは、最後のページではない要素オブジェクトを削除する必要があります
list.RemoveRange(0,(CurrentPage-1) * PageCount );
最後のページのコードはより単純です。
上記のサーバー コードから、このメソッドを通じて毎回すべてのコードがデータベースから Web サービスに返されますが、無駄なレコードはすべてフィルターされ、残りの要素がカスタマー サービスに渡されることがわかります。レコードがどれほど多くても、毎回ページに返されるのはほんの少しだけであるため、効率が向上し、ビッグデータを送信する Web サービスの問題が回避されます。このように、このフレームワークは基本的にビッグデータの送信に問題はありません。一部の特殊なものを除く)、このフレームワークを使用すると効率に問題はなく、通常のページよりもさらに高速です。
クライアント コード スニペット:
クライアントは、
PageCount 各ページに表示されるレコードの数を渡す必要があります。
CurrentPage 現在のページ番号
テーブルの HTML:
コード




コードをコピー

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





< td style="width:10%" >投資家タイプ






🎜>



投資家 出資方法 出資出資 有償-出資中出資比率残金支払期間< ;/td>
情報は完了しました操作

/a>
前のページ
次のページ ;
最後のページ
ジャンプpage|
総ページ数:page
/td>



コード



コードをコピー
コードは次のとおりです: //テーブルに埋めるデータをガイドします (Table) function Load_TableData(FlowID,CurrentPage) {
$.ajax({
type: "POST",
url: IPServer "JsonService.asmx /Load_Contributiveperson_Table",
data:"{ FlowID:'" FlowID "',PageCount:" PageCount ",CurrentPage:" CurrentPage "}" 、
contentType: "application/json; charset=utf-8"、
dataType: "json"、
成功: function(msg){
msg = msg.replace(new RegExp('(^|[^\\])\"\\/Date\(( -?[0-9] )\)\ \/\"', 'g'), "$1new Date($2)");
var data = eval("(" msg ")");
var strTR="";
var RowCount = 1;
jQuery.each(data, function(rec) {
strTR = "";
strTR = " " これ。 >strTR = " " this.INVTYPEName ""
strTR = " " this.INV "";
strTR = " " this.CONFORM "< ;/TD>";
strTR = " " this.SUBCONAM " ;";
strTR = " < TD style='width:10%' class='MyTableTD' >" this.ACCONAM "";
strTR = " " this.CONPROP "";
strTR = " " this.BALDEPER_ShortString "";
strTR = " " this.IsDataCompleteness "";
strTR = " Select
strTR = " ;";
RowCount ;
});//jQuery.each
$("#tbody_Data").empty();
$ ("#tbody_Data").append(strTR);
$("#CurrentPage").html(CurrentPage);
},
error:function(msg){
alert( "エラー : " msg ); });
}//function Load_TableData()


ホームページ、前のページ、次のページ、最後のページの操作:
命令:




コードをコピー


コードは次のとおりです:
$("#CurrentPage") 現在のページを保存します (呼び出しコード)。は前の関数の赤い部分です) $("#TotalPageCount").html() (呼び出しコードには特別な関数があります。以下を参照してください)
コード
コードをコピー コードは次のとおりです:

$("#First_A ").click(function(){//ホームページ リンク操作
Load_TableData(strFlowID,1);
});
$("#Prev_A").click(function(){//Previousページリンク Operation
var intCurrentPage = Number(c);
if(intCurrentPage>1)
{
Load_TableData(strFlowID,intCurrentPage-1)
}); 🎜> $("#Next_A").click(function(){//次のページのリンク操作
var intCurrentPage = Number($("#CurrentPage").html());
var intTotalPageCount = Number ( $("#TotalPageCount").html());
if(intCurrentPage{
Load_TableData(strFlowID,intCurrentPage 1)
}); > $("#Last_A").click(function(){//最後のページのリンク操作
intLastPage = Number($("#TotalPageCount").html());
Load_TableData(strFlowID,intLastPage) ;
});


合計ページ数を返すクライアント側関数:
コード



コードをコピー🎜>
コードは次のとおりです: //ページ数を返しますfunction Get_TableData_TotalCount(FlowID) {
$.ajax({
type: "POST"、
url: IPServer "JsonService.asmx/Get_ContributivePersonTable_TotalPageCount"、
data:"{FlowID:'" FlowID "',PageCount:" PageCount "}" 、
contentType : "application/json; charset=utf -8",
dataType: "json",
success: function(msg){
var data = eval("(" msg ")"); 🎜>jQuery.each(data, function (rec) {
$("#TotalPageCount").html(this.Info);
$("#showTotalPage").html(this.Info);
});//jQuery. each
},
error:function(msg){
alert( "エラー: " msg )
}




最終レンダリング:





概要:

テーブル データの入力とページネーションにはさまざまな方法があります。ここでは、クライアントに返されるデータが常に同じになるように、サーバーを介してフィルタリングする方法のみを提供します。これにより、効率が向上します。
フレームワークのアプリケーションの探索は着実に進行中です。 。 。 。 。 。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。