DOJO：DataGrid 增量加载不起作用答案

【问题标题】：DOJO: DataGrid incremental loading doesn't workDOJO：DataGrid 增量加载不起作用
【发布时间】：2012-02-26 04:38:51
【问题描述】：

我有这个问题

我使用 DataGrid + dojo.store.JsonRest 作为存储。我只想加载那些当前需要的项目。所以当我只有 10000 个项目时，初始加载 100 个，其余的在用户滚动网格时下载。

我创建了两个文件

datagridtest.php 包含数据网格
jsonsource.php 实现测试数据源（应该返回不超过 499 条记录）

前 25 个项目显示正常。但是当我尝试向下滚动数据网格时不会请求新项目 - 使用 FireBug 进行检查。

请帮忙。我做错了什么。

下面是我的代码：

datagridtest.php：

<html><head>
    <link rel="stylesheet" type="text/css" href="../libs/dojo/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" type="text/css" href="../libs/dojo/dijit/themes/style.css" />
    <script type="text/javascript">     djConfig = {parseOnLoad: true,} </script>
    <script type="text/javascript" src="../libs/dojo/dojo/dojo.js"></script>
</head>
<body class="claro">

<style type="text/css">
    @import "../libs/dojo/dojox/grid/resources/Grid.csss";
    @import "../libs/dojo/dojo/resources/dojo.csss";
    @import "../libs/dojo/dojox/grid/resources/claroGrid.css";
</style>

<script type="text/javascript">

    dojo.require("dijit.dijit");
    dojo.require("dojox.grid.DataGrid");
    dojo.require("dojo.data.ObjectStore");  
    dojo.require("dojo.store.JsonRest");

    var store, grid;
    dojo.ready(function() {  

        store = new dojo.store.JsonRest({
            target:"jsonsource.php",
            idProperty: "id"
        });     

        grid = new dojox.grid.DataGrid({
            store: dataStore = dojo.data.ObjectStore({ objectStore: store }),           
            structure: [
            {
                cells: [
                    [
                        { name: "Id", field: "id"},
                        { name: "Name", field: "name" },
                        { name: "E-Mail", field: "email", width: "200px"},
                    ]
                ]
            }
            ]
        }, "gridDiv");

        grid.startup();     
    } );

</script>

<div id="gridDiv"></div>
</body></html>

jsonsource.php:

<?php

$RangeTemp = explode("=", $_SERVER['HTTP_RANGE']);
$Range = explode("-", $RangeTemp[1]);
if ($RangeTemp[1] != "") {
    $RangeFrom = $Range[0];
    $RangeTo = $Range[1];
}

if ($RangeFrom > 500) { print "[ ]"; die(); }

?>
[
    <?php for($i=$RangeFrom; $i<=$RangeTo; $i++): ?>
        {
            "id": <?=$i; ?>,
            "name": "Jack <?=$i; ?>",
            "email": "jack@jacekplacek.pl"
        },
    <?php endfor; ?>
]

【问题讨论】：

标签： javascript ajax datagrid dojo

【解决方案1】：

我相信您需要设置“Content-Range”标头，让 Dojo 知道您返回了哪些记录，以及总共有多少条记录。

这样设置标题：

header("Content-Range: items 0-24/10000");

在你的情况下，你会这样写：

header("Content-Range: items $RangeFrom-$RangeTo/$total");

希望对您有所帮助。

【讨论】：

【解决方案2】：

似乎问题出在 ObjectStore + JsonRest 解决方案上。如果我使用 dojox.data.JsonRestStore 直接可以正常工作。

【讨论】：