1

我需要将 > 10k 行数据加载到SlickGrid

我相信 SlickGrid 是专为这种用途而设计的，基于以下加载 500,000 个客户端行的官方示例：优化 DataView

由于我不能违反 RavenDB 规定每个会话查询返回少于 1024 行的“安全第一”规则，因此我使用了 RavenDB 的 skip-take 机制，该机制允许 Web 客户端以 256 行的字节大小块从服务器收集所有 10K 行每个http请求。

我的问题是：当这些行从服务器返回时，将它们输入 SlickGrid 的最佳方法是什么？SlickGrid 是否积极支持像这样的分块数据子集的异步加载？

我在寻找：

  1. 允许我发出下一个服务器请求的 SlickGrid 回调。
  2. 一种将结果行一次性附加到 DataView 中的优化方式，例如

grid.appendRows(rowSubset)

SlickGrid RemoteModel 与 Dataview 模型表明，SlickGrid 设计用于处理大型客户端数据集或更常见的网格按需页面服务器模型。我想使用以前的客户端方法，因为它可以带来卓越的用户体验，恕我直言。

免责声明：我知道我正在加载大量行，并且通常的方法是根据需要简单地从服务器请求每个页面。无论这种方法多么值得称赞，这都不是我想要实现的目标。相反，我故意尝试以不会给用户带来不便的方式从服务器加载整个数据集。

谢谢

4

2 回答 2

2

好的，SlickGrid 没有任何内置功能，所以我们必须自己滚动它。这是stackoverflow的一个答案：

现在这是我的解决方案，它很有效，我认为这很容易。这方面的技术栈是：

  • 乌鸦数据库
  • 南希FX
  • 咖啡脚本
  • SlickGrid

咖啡脚本

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 不包含任何用于加载或保存数据的内置功能（不包括示例 slick.remotemodel.js，它只是作为如何使用 SlickGrid API 的示例）。这取决于实现 SlickGrid 的开发人员。

于 2012-10-01T02:57:49.980 回答