1

1万行を超えるデータをSlickGridにロードする必要があります

SlickGridは、500,000のクライアント側の行をロードする次の公式の例に基づいて、まさにこの種の使用のために設計されていると思います。DataViewの最適化

セッションクエリごとに1024行未満を返すことを規定するRavenDBの「安全第一」ルールに違反できないため、Webクライアントがサーバーからすべての10K行を256行のバイトサイズのチャンクで収集できるようにするRavenDBのスキップテイクメカニズムを使用しましたhttpリクエストごと。

私の質問はこれです：サーバーから返されるときにこれらの行をSlickGridにフィードする最良の方法は何ですか？SlickGridは、このようなチャンクアップされたデータサブセットの非同期ロードを積極的にサポートしていますか？

を探しています：

  1. 次のサーバーリクエストを発行できるようにするSlickGridコールバック。
  2. 結果の行を一度にDataViewに追加する最適化された方法例：

grid.appendRows(rowSubset)

SlickGridRemoteModelとDataviewModelは、SlickGridが、大規模なクライアント側のデータセットまたはよりグリッドの通常のページオンデマンドサーバーモデルのいずれかで動作するように設計されていることを示しています。以前のクライアント側のアプローチを使用すると、優れたユーザーエクスペリエンスが得られるため、imhoを使用したいと思います。

免責事項：私は多数の行をロードしていること、および通常のアプローチは必要に応じてサーバーから各ページを要求することであることを理解しています。このアプローチがどれほど称賛に値するものであっても、これは私が達成しようとしていることではありません。代わりに、ユーザーに迷惑をかけないように、サーバーからデータセット全体を意図的にロードしようとしています。

ありがとう

4

2 に答える 2

2

OK、SlickGridには組み込みの機能がないため、自分でロールする必要があります。これがstackoverflowからの1つの答えです：

そして今ここに私の解決策があります、それは御馳走を働かせます、そして私は本当に簡単だと思います。このためのテクノロジースタックは次のとおりです。

  • RavenDB
  • NancyFX
  • CoffeeScript
  • SlickGrid

CoffeeScript

loadData=(grid)->
    take = 600
    loadingGlyph = $ "<img/>", {class:"loading", style:"float:right;margin-top:5px", src:"/Content/img/ajax-loader.gif", alt:"loading", width:"16", height:"16"}
    $(".slick-pager-status").after loadingGlyph
    for skip in [0..viewdata.UserCount] by take
        $.getJSON("/users/#{skip}/#{take}")
        .done (users) =>
            grid.addRows users
            $(".loading").hide() if users.length < take

$ -> 
    columns = [..your columns..]
    grid = [..your slick-grid..]
    loadData grid

まず、グリッドがビジーであることを示すために、派手な読み込みグリフのグラフィックを貼り付けます。データのバッチを非同期でロードするつもりであることに注意してください。これにより、グリッドは非常に迅速に（最初のバッチが戻った後）使用可能な状態になりますが、データがまだバックグラウンドでダウンロードされていることをユーザーに通知する必要があります。

データをバッチロードするには、の値によってサイズが決定され、その値でtake終了するチャンクにループしviewData.UserCountます。これは、ページが要求されたときに事前に入力されており、使用可能なアイテムの総数（またはロードする最大数）です。

最後にaddRows、slick-gridラッパーに追加したメソッドを使用しました（図には示されていません）。これにより、行バッチをすばやく追加でき、次のようになります。

Slick-Gridを拡張する 

addRows:(rows)->
    dataView.beginUpdate()
    dataView.addItem row for row in rows 
    dataView.endUpdate()

完全を期すために、バッチデータの取得を行うRavenDBサービス呼び出しを含む残りのプロセスを次に示します。

NancyFXモジュール

Get["/users/{skip}/{take}"] = parameters =>
{
    var skip = (int)parameters.skip;
    var take = (int)parameters.take;
    var data = UserService.GetForGrid(Db, skip, take);
    return Response.AsJson(data);
};

RavenDBサービス

public static List<UserGridDTO> GetForGrid(IDocumentSession db, int skip=0, int take=512)
{
    return db.Query<User>()
        .OrderBy(u=>u.Id)
        .Skip(skip)
        .Take(take)
        .ToList()
        .Select(user =>
                        new UserGridDTO
                        {
                                id = user.Id,
                                Email = user.Email,
                                Name = user.DisplayName,
                        })
                        .ToList();
}
于 2012-10-01T19:28:55.523 に答える
0

SlickGridには、データをロードまたは保存するための組み込み機能は含まれていません（SlickGrid APIの使用方法の例として機能するサンプルslick.remotemodel.jsはカウントされません）。それはSlickGridを実装する開発者次第です。

于 2012-10-01T02:57:49.980 に答える