ウェブリストビュー付きの無限スクロールの実装

Question

ウェブ版のリストビューには、モバイルのような無限のスクロール機能はありません。私はまだ私のソリューションでこれを実装する必要があり、どこから始めたらいいのかわかりません。私が持っているすべての面で、私は再びすべてのデータを再ロードする必要があります。だから私は25行がロードされていると言うことができます。あなたはスクロール・ポイントに達し、25をロードします。それを実装する方法は、最初の25をリロードし、25を追加します。これはもちろん、あなたが行くので、それはオプションではありません下の速度が遅くなる誰もがこのような何かを成功させた？オープンソースの無限スクロールソリューションがありますか？任意のヒント/情報/コードをいただければ幸いです。

ありがとうございます！

Answer 1

私は最終的には、このための解決策を考え出しました。グリッドを使った仮想スクロールは、私が探していたものではありませんでした。私はリストビューを捨て、データソースとプレーンな剣道のテンプレートレンダリングを使用しました。

これはどのように動作するのですか...私は自分のデータの親divを持っています。データソースの変更イベントにイベントをアタッチし、データの新しいページが読み込まれると、親divはデータの新しいページがレンダリングされる子divを追加します。これは今まで私にとって完璧に機能しています。

私のDOMはこのように見えます。

<div id="EndlesslyScrollabledata" > 
    <div id="DataPage1"> 
     ..... 
    </div> 
    <div id="DataPage2"> 
     ..... 
    </div> 
</div> 
<button> Load more data </button> 

各より多くのデータが、次のページにデータソースを移動し、次の「データページ」を追加し、添付「データページ」内のデータでテンプレートをレンダリングするでしょう負荷をクリックしてください。

MVCコード：

@(Html.Kendo().ListView<your.custom.Class>() 
    .Name("searchResults") 
    .TagName("div") 
    .ClientTemplateId("tptSearchResult") 
    .DataSource(source => 
    { 
     source.Read(read => 
     { 
      read.Action("Search", "ControllerName").Data("searchResults_AdditionalData"); 
     }); 


    }) 
) 

あなたが検索パラメータを送信する場合は、「AdditionalData」メソッドを使用する必要があります

または

Answer 2

この機能は、剣道グリッドでWebで利用できます（剣道のウェブサイトの仮想スクロール例を参照）。バーチャルスクロールでグリッドを使用し、表示テンプレートをリストビューのように変更するのはどうですか？仮想スクロールグリッドの

サンプル・コードは次のとおりです。

$("#yourList").kendoGrid({ 
     dataSource: { 
      type: "json",     
      pageSize: 25, 
      transport: { 
       read: { 
        cache: false, 
        url: "controller/actionmethod", 
        type: "post", 
        contentType: "application/json; charset=utf-8", 
        dataType: "json" 
       } 
      } 
     }, 

     height: 150, 
     width: 50, 
     pageable: true, 
     //selectable: "multiple", 
     scrollable: { 
      virtual: true 
     }, 

     columns: [ { field: "col1", title: "col1" }] 

    }); 

Answer 3

私はこの動作をエミュレートするためにdataBingingイベントを使用するソリューションに来ています検索サービスに何か特別なものがあります。

Javascriptのコード：

function Search(page) { 
    currentPage = page; 
    if(page == 1) { 
     searchResults = []; 
    } 

    $("#searchResults").data("kendoListView").dataSource.read(); 
} 

function searchResults_AdditionalData(ev) { 
    return { 
     code: $("#txtSearchCode").val(), 
     pageNumber: currentPage, 
     pageSize: pageSize 
    }; 
} 

var currentPage = 1; 
var pageSize = 20; 
var searchResults = []; 
$(document).ready(function() { 

    $("#searchResults").data("kendoListView").bind("dataBinding", function(ev) { 

     if(searchResults.length != (currentPage * pageSize)) { 
      if(!!ev && !!ev.items && ev.items.length == pageSize) { 
       $("#btnLoadMoreData").show(); 
      } else { 
       $("#btnLoadMoreData").hide(); 
      } 

      searchResults = $.merge(searchResults, ev.items); 
      this.dataSource.data(searchResults); 
      this.dataSource.sync(); 
     } 

    }); 
}); 

ひとつだけ残っている：同期後にリストの最初の追加要素にスクロールします。