Javascript 网格AJAX数据

我正在尝试让AJAX与SlickGrid一起工作

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

向要使用ajax绑定的列添加一个类

使用该类作为选择器，并在onRenderCompleted函数中添加类似于其他DOM元素的内容

---

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

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

将slick.remotemodel.js复制到您的remotemodel.js

在“mygrid.html”中，确保您拥有指向所有javascript文件的正确路径。将slick.remotemodel.js更改为yourmotemodel.js。消除任何重复的脚本-对于exmaple，如果您已经在使用最新版本的jQuery，那么请删除“mygrid.html”中引入jQuery-1.4.3.min.js的行

在“mygrid.html”中，更改“columns”变量的初始化，以匹配要从数据库显示的数据。注意字段属性。这必须与服务器在JSON响应中返回的属性名一致。（*请参见末尾的注释）

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

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

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的回复为例：

这就应该做到了

---

*注意：在我的例子中，我不想使用带宽返回JSON响应中每个记录重复的所有属性名，所以我返回一个记录值数组。然后，我将列描述（上面的步骤4）中的field属性设置为该数组的整数偏移量。因此，在列描述中，我使用字段：3而不是字段：'someFieldName'，然后在我的远程模型onSuccess（）函数中，我设置data[from+I]=resp.record[I].data（其中.data是记录中字段值的JSON响应中的一个数组）。到目前为止，这对我来说似乎工作得很好（但如果出现问题，调试可能会更加困难）。

请参阅此拉取请求。您可以下载并查看示例6 ajax加载

---

这里有一些关于分页+ajax+slickgrid的重要观察结果：

如果有人想这样做，请查看slickgrid的这一分支

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

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

然后转到

http://127.0.0.1:8000/examples/example6b-使用浏览器访问ajaxlocalserver.html

---

查看Pull请求以查看更改了什么

请查看我的代码（slick.remote.js）在此示例中。@vulcan-感谢您的步骤帮助我开始ajax示例。我还没有实现过滤。+1获得您的详细答案。我可以问一下您在步骤7中使用了哪个函数来更新记录总数吗？我尝试了

onRowCountChanged.notify（{previous:resp.hits，current:resp.hits}，null）

其中

resp.hits

是我的行总数，但它不起作用。