简体   繁体   English

OnDemandGrid(Dgrid)不会在向下滚动时触发请求(获取新数据)

[英]OnDemandGrid (Dgrid) won't fire a request (for new data) on scroll down

Allright, I have been able to make it work with DataGrid, but for some reason, Dgrid can be really impressing and at the same time, really frustrating (many people recommend it). 好吧,我已经能够使它与DataGrid一起使用,但是由于某些原因,Dgrid可能会给人留下深刻的印象,同时又会令人沮丧(很多人推荐它)。 So far, I have been able to request a certain amount of data (only first call, so my request header specifies to return 25 items...), once I try to scroll down to have more item (so additional request should be sent) nothing happens. 到目前为止,一旦我尝试向下滚动以获取更多数据(因此应发送其他请求),我已经能够请求一定数量的数据(仅首次调用,因此我的请求标头指定返回25个项目...) ) 什么都没发生。

Basically that's the store build with jsonrest: 基本上,这就是使用jsonrest的商店构建:

define([
    "dojo/store/Memory",
    "dojo/store/JsonRest",
    "dojo/store/Cache",
    "dojo/store/Observable"
    ],
function(
    Memory,
    JsonRest,
    Cache,
    Observable
){

    var contentMemoryStore = new Memory();
    var contentJsonRestStore = new JsonRest({target: "http://dev.mpact.tv:30087/rest/contenus/"});

    contentStore = new Cache(contentJsonRestStore, contentMemoryStore);

    return new Observable(contentStore);
});

And then, I pass this store to the property of the OnDemandGrid. 然后,我将此存储传递给OnDemandGrid的属性。

I have checked this guy example: http://www.speich.net/articles/demos/jsonrest/dojo-demo-dgrid.php I have checked the documentation for dgrid (OnDemandList): https://github.com/SitePen/dgrid/wiki/Core-Components 我已经检查了这个人的例子: http : //www.speich.net/articles/demos/jsonrest/dojo-demo-dgrid.php我已经检查了dgrid的文档(OnDemandList): https : //github.com/SitePen / dgrid / wiki / Core-Components

Added Request header / Response header (but I think they are correct): 添加了请求标头/响应标头(但我认为它们是正确的): 在此处输入图片说明在此处输入图片说明

Server side code (in perl): 服务器端代码(在perl中):

$r->headers_out->set('Content-Range', sprintf("items %d-%d/%d", $start, $start 
+ $num_items - 1, $total));

Update: 更新:

I did a quick test with the old jsonstore (dojox/data): 我对旧的jsonstore(dojox / data)进行了快速测试:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Statut des canaux générés par Gipsy</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
        <style type="text/css">
            @import "/dojo/dojo/resources/dojo.css";
            @import "/dojo/dijit/themes/tundra/tundra.css";
            @import "/dojo/dojox/grid/resources/Grid.css";
            @import "/dojo/dojox/grid/resources/tundraGrid.css";
            //.grid {
            //    width: 70em;
            //    height: 40em;
            //}
            .Title { text-align: center }
            html, body { height: 100%; margin: 0px; font-size: 14px; }
        </style>
        <script type="text/javascript" src="/dojo/dojo/dojo.js"  djConfig="isDebug:false, parseOnLoad: false"></script>
        <script type="text/javascript">
            dojo.require("dijit.layout.BorderContainer");
            dojo.require("dijit.layout.ContentPane");
            dojo.require("dojox.grid.TreeGrid");
            dojo.require("dijit.tree.ForestStoreModel");
            dojo.require("dojox.data.JsonRestStore");
            dojo.require("dojo.parser");

            dojo.addOnLoad(function(){

                dojo.parser.parse();

                var layout = [
                    { name: "Dossier", field: "repertoire", width: "auto" },
                    { name: "Fichier", field: "fichier", width: "auto" },
                    { name: "Nom", field: "nom", width: "auto" },
                    { name: "Date", field: "date", width: "auto" }
                ];
                //var jsonStore = new dojo.data.ItemFileReadStore({ data: dataItems });
                //var jsonStore = new dojo.data.ItemFileReadStore({ url: "/cgi-bin/senscity/stingray.json", clearOnClose: true });
                var jsonStore = new dojox.data.JsonRestStore({idAttribute: 'id', target: 'http://dev.mpact.tv:30087/rest/contenus'});
                var treeModel = new dijit.tree.ForestStoreModel({
                    store: jsonStore,
                    query: { type: 'canal' },
                    rootId: 'canalRoot',
                    rootLabel: 'Banane',
                    childrenAttrs: ['children']
                });
                var grid = new dojox.grid.TreeGrid({
                    treeModel: treeModel,
                    structure: layout,
                    selectable: true,
                    defaultOpen: false
                }, 'programmatic_grid');
                grid.startup();
                dojo.connect(window, "onresize", grid, "resize");
            });
        </script>
    </head>
    <body class="tundra">
<!-- -->
        <h1 class="Title" style="margin-bottom: 0.5em;">Statut de la programmation</h1>
        <div dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%;">
<!--
            <div dojoType="dijit.layout.ContentPane" region="top" style="height: 20pt; padding: 0px; border: 0px;">
            date de dernière mise à jour, décompte de prochaine mise à jour, bouton de mise à jour, case de désactivation de mise à jour automatique
            </div>
-->
            <div dojoType="dijit.layout.ContentPane" region="center">
<!-- -->
                <div id="programmatic_grid"></div>
<!-- -->
            </div>
<!-- -->
        </div>
    </body>
</html>

So, My guess it has to be the store or the grid. 因此,我猜应该是商店或网格。

Notice on the Request there is an HTTP Header Range . 请注意,在请求中有一个HTTP标头Range This indicates what items are being requested. 这表明正在请求什么项目。 Then on the response, you need to be including a Content-Range header that describes what items are being returned and the total avaialable. 然后,在响应上,您需要包含一个Content-Range标头,该标头描述了将返回哪些项目以及总可用量。

Your Response includes the header: 您的响应包括标题:

Content-Range: items=0-24/123456

It looks like the format needs to be: 看起来格式需要为:

Content-Range: items 0-24/66

From the JsonRest Documentation : JsonRest文档中

Paging

JsonRest store uses HTTP’s Range header to perform paging. When a request is made for a range of items, JsonRest will include a Range header with an items range unit specifying the range:

Range: items=0-24
On your server, you should look at the Range header in the request to know which items to return. The server should respond with a Content-Range header to indicate how many items are being returned and how many total items exist:

Content-Range: items 0-24/66

I forgot to mention I was doing cross-domain request with my rest framework (maybe should of said it...). 我忘了提一下我正在使用我的其余框架进行跨域请求(也许应该这样说……)。

Found out after 2 days, that this was the cause of my problem (I still don't know the reason or the source). 两天后发现,这是我出现问题的原因(我仍然不知道原因或出处)。 When I migrated my code to the server everything was working properly. 当我将代码迁移到服务器时,一切工作正常。 Did a simple little test on my php server to populate a onDemandeGrid and saw that it was working on my localhost! 在我的php服务器上做了一个简单的小测试,以填充onDemandeGrid并看到它正在我的本地主机上工作!

Plus, to bypass the cross-domain, I added this header on my server-side rest code (to continue developing on a cross-domain, until we have a decent dev environment): 另外,为了绕过跨域,我在服务器端的其余代码上添加了此标头(以继续在跨域上进行开发,直到拥有一个不错的开发环境):

Access-Control-Expose-Headers:Content-Range

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM