SlickGrid AJAX数据 [英] SlickGrid AJAX data
问题描述
我正在努力让AJAX与SlickGrid合作。 给出的示例是针对Digg的硬编码。
I'm trying to get AJAX working with SlickGrid. The example given is hardcoded for Digg.
另外，我不认为缓存在该示例中有效。而且由于Digg的速率限制，很难真正了解它的工作原理。如何设置SlickGrid以通过分页从我的数据库中获取数据。
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.
推荐答案
我刚刚完成了这个，所以这就是我的做法它：
I just went through this, so here's how I did it:
-
将example6-ajax-loading.html（在SlickGrid下载中）的内容复制到你的html文件中 - 让我们来电它是mygrid.html（或者是你生成html的代码。在我的情况下我使用CodeIgniter，所以我复制到了mygrid_view.php）。
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).
复制slick.remotemodel.js到yourRemoteModel.js。
Copy slick.remotemodel.js to yourRemoteModel.js.
在mygrid.html中确保您拥有所有javascript文件的正确路径。将slick.remotemodel.js更改为yourRemoteModel.js。消除任何重复的脚本 - 例如，如果您已经在使用最新版本的jQuery，那么就消除了引入jquery-1.4.3.min.js的mygrid.html中的行。
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.
在mygrid.html中，更改columns变量的初始化以匹配要从数据库中显示的数据。注意野外属性。这必须与将从服务器的JSON响应中返回的属性名称一致。 （*请参阅最后的注释）。
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).
在yourRemoteModel.js中，将url变量更改为指向服务器，并传递适当的参数。在我的情况下，我将页面和行的参数传递给我的服务器，如下所示：
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）;
var url = myServerUrl+"?page="+fromPage+"&rows="+(((toPage - fromPage) * PAGESIZE) + PAGESIZE);
在yourRemoteModel.js中，将jsonp调用更改为ajax - 除非你需要这样做域，在这种情况下你会想留在jsonp，否则你可以改变它看起来像这样：
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)
}
});
在yourRemoteModel.js中，您现在必须自定义onSuccess（）函数。按照示例的模式，将从和设置为，将整数偏移设置为数据记录，将data.length设置为记录总数，然后设置数据数组。此代码取决于服务器的JSON响应。
In yourRemoteModel.js, you must now customize the onSuccess() function. Follow the pattern of the example, setting from and to be 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.
现在在服务器上编写代码以生成JSON响应。从步骤7可以看出，这需要将记录（或页面）偏移量包含在数据中，并指示返回多少记录，以及记录本身的数组。请记住，每个记录的每个字段必须具有与列定义中的字段设置匹配的属性名称（从上面的步骤4开始）。以Digg的回答为例：
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:
那应该这样做！
*注意：在我的情况下，我不想使用带宽来返回为每个记录重复的所有属性名称JSON响应，所以我返回一个记录值数组。然后，我将列描述中的字段属性（上面的步骤4）设置为此数组中的整数偏移量。所以在列描述中，而不是字段：'someFieldName'，我使用字段：3，然后在我的远程模型中，onSuccess（）函数我设置数据[来自+ i] = resp.record [i] .data（其中.data是记录中字段值的JSON响应中的一个数组。到目前为止，这对我来说似乎运行良好（但如果出现问题可能更难调试）。
*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).
这篇关于SlickGrid AJAX数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
