SlickGrid AJAX数据

我正在努力让AJAX与SlickGrid合作。 给出的示例是针对Digg的硬编码 。

此外,我不认为缓存在该示例中有效。 而且由于Digg的速率限制,很难真正了解它的工作原理。 如何设置SlickGrid以通过分页从我的数据库中获取数据。

我刚刚完成了这个,所以我就是这样做的:

  1. 将example6-ajax-loading.html(在SlickGrid下载中)的内容复制到你的html文件中 – 让我们称之为mygrid.html(或者在你的代码中生成html。在我的情况下我使用CodeIgniter,所以我复制到mygrid_view .PHP)。

  2. 将slick.remotemodel.js复制到yourRemoteModel.js。

  3. 在“mygrid.html”中,确保您拥有所有javascript文件的正确路径。 将slick.remotemodel.js更改为yourRemoteModel.js。 消除任何重复的脚本 – 例如,如果您已经在使用最新版本的jQuery,那么就消除了引入jquery-1.4.3.min.js的“mygrid.html”中的行。

  4. 在“mygrid.html”中,更改“columns”变量的初始化以匹配要从数据库中显示的数据。 注意野外属性。 这必须与将从您的服务器的JSON响应中返回的属性名称一致。 (*最后请参阅有关此内容的说明)。

  5. 在yourRemoteModel.js中,将url变量更改为指向服务器,并传递适当的参数。 在我的情况下,我将页面和行的参数传递给我的服务器,如下所示:

    var url = myServerUrl +“?page =”+ fromPage +“&rows =”+(((toPage – fromPage)* PAGESIZE)+ PAGESIZE);

  6. 在yourRemoteModel.js中,将jsonp调用更改为ajax – 除非您需要执行此跨域操作,在这种情况下,您将希望保留jsonp,否则您可以将其更改为如下所示:

    req = $.ajax({ url: url, dataType: 'json', success: onSuccess, error: function(){ onError(fromPage, toPage) } }); 
  7. 在yourRemoteModel.js中,您现在必须自定义onSuccess()函数。 按照示例的模式,将整数偏移设置为数据记录,将data.length设置为记录总数,然后设置数据数组。 此代码取决于服务器的JSON响应。

  8. 现在在服务器上编写代码以生成JSON响应。 从步骤7可以看出,这需要将记录(或页面)偏移量包含在数据中,并指示返回多少记录,以及记录本身的数组。 请记住,每个记录的每个字段必须具有与列定义中的“字段”设置匹配的属性名称(从上面的步骤4开始)。 以Digg的响应为例:

http://services.digg.com/search/stories?query=apple&offset=0&appkey=http://slickgrid.googlecode.com&type=javascript&callback=cb

这应该做到!

*注意:在我的情况下,我不想使用带宽返回为JSON响应中的每个记录重复的所有属性名称,因此我返回一个记录值数组。 然后,我将列描述中的字段属性(上面的步骤4)设置为此数组中的整数偏移量。 所以在列描述中,而不是字段:’someFieldName’,我使用字段:3,然后在我的远程模型中,onSuccess()函数我正在设置数据[来自+ i] = resp.record [i] .data(其中.data是记录中字段值的JSON响应中的一个数组。到目前为止,这似乎对我来说效果很好(但如果出现问题可能更难调试)。

请参阅此拉取请求现在使用HackerNews而不是Digg的function性AJAX数据存储示例 。 您可以下载此Slickgrid并查看example6 -ajax-loading。

这里有关于分页+ ajax + slickgrid的重要观察: Google Groups:SlickGrid Pagination + Ajax + DataView

  1. 将类添加到要与ajax绑定的列
  2. 添加onRenderCompleted事件
  3. 使用类作为选择器,并在onRenderCompleted函数中添加像其他DOM元素一样的东西

对于任何想要这样做的人来说,请查看这个slickgrid的分支。 https://github.com/harbulot/SlickGrid

它添加了一个很好的小型本地Python服务器来提供AJAX后端

 git clone git@github.com:harbulot/SlickGrid.git cd SlickGrid/ python localajaxserver.py 

然后使用您的浏览器访问http://127.0.0.1:8000/examples/example6b-ajax-localserver.html

查看Pull Request以查看更改内容https://github.com/harbulot/SlickGrid/compare/mleibman:master…url_builder