SlickGrid AJAX数据

Question

我正在努力让AJAX与SlickGrid合作.给出的例子是Digg的硬编码.

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

Answer 1

我刚刚完成了这个,所以这就是我做到的:

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,那么就消除了引入jquery-1.4.3.min.js的"mygrid.html"中的行.

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()函数.按照实施例的图案,设置从和到成为整数的偏移到的数据记录,设置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)设置为此数组中的整数偏移量.所以在列描述中,而不是字段:'someFieldName',我使用字段:3,然后在我的远程模型中,onSuccess()函数我正在设置数据[来自+ i] = resp.record [i] .data(其中.data是记录中字段值的JSON响应中的一个数组.到目前为止,这对我来说似乎运行良好(但如果出现问题可能更难调试).

Answer 2

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