SlickGrid AJAX 数据

Posted 2023-02-22

【中文标题】SlickGrid AJAX 数据

【英文标题】：SlickGrid AJAX data

【发布时间】：2011-10-03 20:38:54

【问题描述】：

我正在尝试让 AJAX 与 SlickGrid 一起工作。 The example given is hardcoded for Digg.

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

【问题讨论】：

请在post 中查看我的代码 (slick.remote.js) 作为示例。 @vulcan - 感谢您帮助我开始使用 ajax 示例的步骤。我还没有实现过滤。

【参考方案1】：

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

将 example6-ajax-loading.html 的内容（在 SlickGrid 下载中）复制到您的 html 文件中 - 我们将其称为 mygrid.html（或到您生成 html 的代码中。在我的情况下，我使用的是 CodeIgniter ，所以我复制到 mygrid_view.php 中）。

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

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

在“mygrid.html”中，更改“columns”变量的初始化以匹配您希望从数据库中显示的数据。注意字段属性。这必须与将在您的服务器的 JSON 响应中返回的属性名称一致。 （*请参阅最后的说明）。

在 yourRemoteModel.js 中，更改 url 变量以指向您的服务器，并传递适当的参数。就我而言，我将页面和行参数传递给我的服务器，如下所示：

var url = myServerUrl+"?page="+fromPage+"&rows="+(((toPage - fromPage) * PAGESIZE) + PAGESIZE);

在 yourRemoteModel.js 中，将 jsonp 调用更改为 ajax - 除非您需要跨域执行此操作，在这种情况下您会希望使用 jsonp，否则您可以将其更改为如下所示：

        req = $.ajax(
            url: url,
            dataType: 'json',
            success: onSuccess,
            error: function()
                onError(fromPage, toPage)
            
            );

在 yourRemoteModel.js 中，您现在必须自定义 onSuccess() 函数。按照示例的模式，将 from 和 to 设置为数据记录的整数偏移量，将 data.length 设置为记录总数，然后设置数据数组。此代码取决于来自服务器的 JSON 响应的样子。

现在在服务器上编写代码以生成 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 响应中的一个数组。到目前为止，这似乎对我来说效果很好（但如果出现问题，可能会更难调试）。

【讨论】：

+1 以获得您的详细答案。请问您在第 7 步中使用了哪个函数来更新记录总数？我尝试了onRowCountChanged.notify(previous: resp.hits, current: resp.hits, null);，其中resp.hits 是我的总行数，但它不起作用。

【参考方案2】：

查看此拉取请求 A functional AJAX Data Store Example now using HackerNews instead of Digg。你可以下载this Slickgrid看example6-ajax-loading。

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

【参考方案3】：

将类添加到要使用 ajax 绑定的列中 Add an onRenderCompleted event 使用类作为选择器，并在 onRenderCompleted 函数中添加类似其他 DOM 元素的东西

【参考方案4】：

对于其他想要这样做的人，请查看这个 slickgrid 的分支。 https://github.com/harbulot/SlickGrid

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

git clone [e-mail]: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