slickgrid 中ajax,装入大量的行成SlickGrid使用异步JQuery的请求和RavenDB

好的，SlickGrid没有任何内置的功能，所以我们必须自己推出它。下面是从计算器一个答案：

而现在这里是我的解决方案，它的工作原理一种享受，我觉得是很容易的。这个技术栈是：

RavenDB

NancyFX

CoffeeScript的

SlickGrid

的CoffeeScript的

loadData=(grid)->

take = 600

loadingGlyph = $ "", {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("https://stackoverflow.com/users/#{skip}/#{take}")

.done (users) =>

grid.addRows users

$(".loading").hide() if users.length < take

$ ->

columns = [..your columns..]

grid = [..your slick-grid..]

loadData grid

首先我坚持在风扇cy loading-glyph图形显示网格繁忙。请注意，我打算异步加载批量数据。这将使网格非常快速地(在第一批返回之后)处于可用状态，但用户需要被告知数据仍在后台下载。

批量加载数据I循环的块的大小由值take确定，并终止于viewData.UserCount值。这已在请求页面时预填充，并且是可用项目的总数(或您希望加载的最大数量)。

最后，我使用了我添加到我的光滑网格包装器(未显示)的addRows方法。这允许快速增加行批的，它看起来像这样：

扩展油滑的网格

addRows:(rows)->

dataView.beginUpdate()

dataView.addItem row for row in rows

dataView.endUpdate()

为了完整起见，这里是过程的其余部分，包括RavenDB服务调用该批量数据检索。

NancyFX模块

Get["https://stackoverflow.com/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 GetForGrid(IDocumentSession db, int skip=0, int take=512)

{

return db.Query()

.OrderBy(u=>u.Id)

.Skip(skip)

.Take(take)

.ToList()

.Select(user =>

new UserGridDTO

{

id = user.Id,

Email = user.Email,

Name = user.DisplayName,

})

.ToList();

}