javascript SlickGrid AJAX 数据

SlickGrid AJAX data

提问by Chad

I'm trying to get AJAX working with SlickGrid. The example given is hardcoded for Digg.

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

Also, I don't think the cache is working in that example. And because of the Digg rate limiting, it's hard to really get feel for how it works. How can I setup SlickGrid to get data from my database with paging.

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

回答by vulcan

I just went through this, so here's how I did it:

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

1. Copy content of example6-ajax-loading.html (in the SlickGrid download) into your html file - let's call it mygrid.html (Or into your code that generates html. In my case I'm using CodeIgniter, so I copied into mygrid_view.php).

2. Copy slick.remotemodel.js to yourRemoteModel.js.

3. In "mygrid.html" make sure you have the correct path to all the javascript files. Change slick.remotemodel.js to yourRemoteModel.js. Eliminate any duplicate scripts - for exmaple, if you already are pulling in a recent version of jQuery then eliminate the line in "mygrid.html" that pulls in jquery-1.4.3.min.js.

4. In "mygrid.html", change the initialization of the 'columns' variable to match the data you want to display from your database. Pay attention to the field property. This must agree with the property names that will be returned in the JSON response from your server. (*see note about this at the end).

5. In yourRemoteModel.js, change the url variable to point to your server, passing appropriate arguments. In my case I pass page and rows paramters to my server like this:

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

6. In yourRemoteModel.js, change the jsonp call to ajax - unless you need to do this cross-domain, in which case you'll want to stay with jsonp, otherwise you can change it to look like this:

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

7. In yourRemoteModel.js, you must now customize the onSuccess() function. Follow the pattern of the example, setting fromand tobe the integer offsets into the data records, setting data.length to be the total number of records, and then setting the data array. This code is dependent on what the JSON response from your server looks like.

8. Now write the code on the server to generate the JSON response. As you can see from step 7, this needs to include the record (or page) offset into the data, and an indication of how many records are being returned, as well as an array of the records themselves. Remember that each field of each record must have a property name that matches the 'field' setting in your column definitions (from step 4 above). Take a look at the response from Digg as an example:

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和to设置为数据记录的整数偏移量，将 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

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

And that should do it!

应该这样做！

*Note: in my case I didn't want to use the bandwidth to return all those property names repeated for every record in the JSON response, so instead I return an array of the record values. I then set the field property in the column description (step 4 above) to be an integer offset into this array. So in the column descriptions, instead of field:'someFieldName", I use field:3, then in my remote model, onSuccess() function I'm setting data[from+i] = resp.record[i].data (where .data is an array in the JSON response of the field values in the record). So far this seems to be working well for me (but might be harder to debug if something goes wrong).

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

回答by Rock

See this pull request A functional AJAX Data Store Example now using HackerNews instead of Digg. You can download this Slickgridand look example6-ajax-loading.

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

Here has important observations about paging+ajax+slickgrid: Google Groups: SlickGrid Pagination + Ajax + DataView

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

回答by Gourneau

For anyone else looking to do this check out this fork of slickgrid. https://github.com/harbulot/SlickGrid

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

It adds a nice little local Python server to provide the AJAX backend

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

git clone [email protected]:harbulot/SlickGrid.git
cd SlickGrid/
python localajaxserver.py

Then go to http://127.0.0.1:8000/examples/example6b-ajax-localserver.htmlwith your browser.

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

Look at the Pull Request to see what was changed https://github.com/harbulot/SlickGrid/compare/mleibman:master...url_builder

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

回答by Alberto León

1. Add a class to the columns you want to bind with ajax
2. Add an onRenderCompleted event
3. use the class as selector and add the stuff like other DOM elementent inside onRenderCompleted function

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