16

我正在尝试让 AJAX 与 SlickGrid 一起使用。给出的示例是为 Digg 硬编码的。

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

4

4 回答 4

21

我刚刚经历了这个，所以我是这样做的：

  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，则消除“mygrid.html”中引入 jquery-1.4.3.min.js 的行。

  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() 函数。按照示例的模式，设置from和为数据记录的整数偏移量，设置 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）中的字段属性设置为该数组的整数偏移量。所以在列描述中，而不是 field:'someFieldName"，我使用 field:3，然后在我的远程模型中，onSuccess() 函数我设置 data[from+i] = resp.record[i].data (其中 .data 是记录中字段值的 JSON 响应中的一个数组。到目前为止，这似乎对我来说效果很好（但如果出现问题，可能会更难调试）。

于 2011-08-04T17:30:12.497 回答
3

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

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

于 2013-01-22T13:02:29.453 回答
0

对于其他想要这样做的人，请查看这个 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使用浏览器访问。

查看拉取请求以了解更改的内容https://github.com/harbulot/SlickGrid/compare/mleibman:master...url_builder

于 2014-04-14T06:57:42.307 回答
0
  1. 将类添加到要使用 ajax 绑定的列
  2. 添加一个 onRenderCompleted 事件
  3. 使用类作为选择器并在 onRenderCompleted 函数中添加其他 DOM 元素之类的东西
于 2011-07-25T15:21:17.060 回答