0

私は会社のサイトを開発しました。ここでは、1つの製品の詳細がaspxページの1つのレコードを意味します。時々私たちのhtmlデータは巨大であり、ユーザーはコンテンツ全体を読むためにページを複数回スクロールしなければなりません。jquery ajaxでasp.netサーバーサイドメソッドを呼び出し、UIにデータを入力するためにjsonを解析することで、ページ内の固定数のレコードをフェッチして表示する方法を知っています。問題は、私の場合、レコードがページごとに表示しているものであり、レコードがdbからのものであるということです。各レコードは、私が表示している巨大なhtmlデータです。ここでは、巨大なhtmlデータを表示するサイトのサンプルURLを示しています。http://www.bba-reman.com/content.aspx?content=bba_reman_diagnostics_tools

ページに部分的なデータを表示するための優れた手法を知りたいのですが、ユーザーが下にスクロールすると、次のデータセットがフェッチされて表示されます。だから、どうすればhtml全体からhtmlの一部を抽出してページに表示でき、ユーザーが下にスクロールして次の一部のhtmlを抽出してページに表示できるかを提案してください。つまり、巨大なhtmlデータをいくつかの部分に分割する方法を知る必要があります。コンセプトを手伝ってください。ありがとう

4

2 に答える 2

1

私のプロジェクトの1つでも同様の状況が発生し、JQuery.ScrollEventを使用して解決しました。こちらがスクロールイベントの公式リンクです。あなたがする必要があるのは：

  1. ユーザーに一度に表示するHTMLの文字サイズの制限を決定します。Xだとしましょう。HTML文字の総数がXを超える場合は、DBからXのみを返す必要があります（複数のDB呼び出しの使用を避けたい場合は、CSファイルのビジネスロジックから）。

  2. ユーザーのScrollイベントをキャプチャし、ラベルにテキストを追加して次のデータセットをフェッチしてバインドします

于 2012-06-15T19:12:11.283 に答える
0

提供したリンク上のすべての商品コンテンツがdbの1つのフィールドに保存されている場合は、wrap（）などのメソッドを使用して、各商品を行のようにし、ユーザーの操作に基づいて特定の行を表示できます。

これは、ブラウザコンソールで実行することによってページでテストされるサンプルコードです。上部に非常に単純なページャーが作成され、下部に複製することもできます。ページのマークアップは、より良いIDを追加することで、jQueryをより効率的に利用できるように改善される可能性があります。また、いくつかの異常なネストも行われています。

$(function(){
/* wrap each pair of picture and description in a div*/
$('.diagnostic_picture').each(function(){
   $(this).next('.diagnostic_information').andSelf().wrapAll('<div class="product_row" style="clear:both">');
});
/* cache rows to variable */
var $products=$('.product_row');
var total_products=$products.length;
/* hide all but first 5 "rows" */
$products.slice(5).hide();
/* create  a pager based on qty of products and 5 per page */
var pager='<ul class="pager" style="height:1.5em; margin: 10px 0;">';
var pager_length=Math.round( total_products/5);

for( i=0; i< pager_length; i++){
    pager+='<li style="float:left"><a href="#" style="padding:5px;color:blue; background: #CCC; margin-right:5px; display:block" data-pager_start="'+(i*5)+'">'+(i+1)+'</a></li>';
}
pager+='</ul>';
/* insert pager before first "row" */
$products.eq(0).before( pager);
/* pager click handler */
$('.pager a').click(function(){
    var start=$(this).data('pager_start');
    $products.hide().slice(start, (start+5)).show();
    return false;
});

});

簡単な例としてページャーを作成しました。スクロールに基づいてさらに多くの行を表示することもできます。このコードをページに直接ドロップして試すことができるはずです

于 2012-06-15T20:25:28.643 に答える