OnDemandGrid (Dgrid) не будет запускать запрос (для получения новых данных) при прокрутке вниз
-
12-12-2019 - |
Вопрос
Хорошо, я смог заставить это работать с DataGrid, но по какой-то причине Dgrid может быть действительно впечатляющим и в то же время действительно разочаровывающим (многие люди рекомендуют его).До сих пор мне удавалось запросить определенный объем данных (только первый вызов, поэтому в заголовке моего запроса указано вернуть 25 элементов...), как только я пытаюсь прокрутить вниз, чтобы получить больше элементов (поэтому должен быть отправлен дополнительный запрос), ничего не происходит.
По сути, это сборка хранилища с помощью 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);
});
И затем я передаю этот магазин в собственность OnDemandGrid.
Я проверил пример этого парня: http://www.speich.net/articles/demos/jsonrest/dojo-demo-dgrid.php Я проверил документацию для dgrid (OnDemandList): https://github.com/SitePen/dgrid/wiki/Core-Components
Добавлен заголовок запроса / заголовок ответа (но я думаю, что они правильные):
Серверный код (на perl):
$r->headers_out->set('Content-Range', sprintf("items %d-%d/%d", $start, $start
+ $num_items - 1, $total));
Обновление:
Я провел быстрый тест со старым 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>
Итак, я предполагаю, что это должен быть магазин или сеть.
Решение 2
Я забыл упомянуть, что я выполнял перекрестный доменный запрос с моей рамки для отдыха (может быть, не следует сказать ...).
Вышло через 2 дня, что это была причина моей проблемы (я до сих пор не знаю причины или источника).Когда я мигрировал свой код на сервер, все работало правильно.Простой маленький тест на моем PHP-сервере, чтобы заполнить ondemandegrid и увидел, что он работал над моим localhost!
Plus, чтобы обойти кросс-домен, я добавил этот заголовок на мой код отдыха на стороне сервера (чтобы продолжить развитие в кросс-домене, пока у нас не будет приличной среды dev):
.Access-Control-Expose-Headers:Content-Range
Другие советы
Обратите внимание, что в запросе есть HTTP-заголовок Range
.Это указывает на то, какие элементы запрашиваются.Затем в ответе вам нужно включить Content-Range
заголовок, описывающий, какие элементы возвращаются, и общее количество доступных элементов.
Ваш ответ включает заголовок:
Content-Range: items=0-24/123456
Похоже, что формат должен быть:
Content-Range: items 0-24/66
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