5

リストビューのWebバージョンには、モバイルのようなすぐに使えるエンドレススクロール機能がないことを私は知っています。私はまだこれを自分のソリューションに実装する必要があり、どこから始めればよいのかよくわかりません。私が持っているすべてのアイデアでは、すべてのデータを再度ロードする必要があります。つまり、25行がロードされているとしましょう。スクロールポイントに到達すると、さらに25がロードされます。これを実装する方法では、最初の25をリロードし、さらに25を追加します。もちろん、これはあなたが行くほど遅くなるので、それはオプションではありません誰かがこのようなことをうまくやったのですか?利用可能な優れたオープンソースのエンドレススクロールソリューションはありますか?ヒント/情報/コードをいただければ幸いです。

ありがとう!

4

3 に答える 3

0

この機能は、Webの剣道グリッドで使用できます(剣道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" }]

    });
于 2013-03-20T21:55:01.610 に答える
0

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

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

私のDOMは次のようになります。

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

[さらにデータを読み込む] をクリックするたびに、データソースが次のページに移動し、次の「DataPage」が追加され、追加された「DataPage」内のデータでテンプレートがレンダリングされます。

于 2013-04-03T08:55:28.733 に答える