配置 dojo 数据网格以使用远程服务器 URL答案

【问题标题】：Configuring dojo datagrid to use remote server URL配置 dojo 数据网格以使用远程服务器 URL
【发布时间】：2012-08-09 09:58:36
【问题描述】：

我无法为远程服务器配置 dojo 数据网格。我正在关注的教程示例是：

http://dojotoolkit.org/documentation/tutorials/1.6/populating_datagrid/demo/datagrid-items.html

我的代码是用单个 jsp 编写的，如下所示：

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Demo: dojox.grid.DataGrid Simple Structure</title>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css">
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css">


        <!-- load dojo and provide config via data attribute -->
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"
                data-dojo-config="isDebug: true,parseOnLoad: true">
        </script>
        <script>
            dojo.require("dojox.grid.DataGrid");
            dojo.require("dojo.data.ItemFileWriteStore");

            var grid, store;
            dojo.ready(function(){
                store = new dojo.data.ItemFileWriteStore({
                    url: "MilestoneAjaxPopulateMsListEditor.json"
                });
                        grid = new dojox.grid.DataGrid({
                            query: { id: "*" },
                            store: store,
                            structure: [
                                { name: "First Name", field: "first", width: "25%" },
                                { name: "Last Name", field: "last", width: "25%" }
                            ]
                        },dojo.byId("grid"));
                        grid.startup();
            });
        </script>
    </head>
    <body class="claro">
    <%@ include file="ui_init.jsp" %>
        <h1>Demo: dojox.grid.DataGrid Simple Structure</h1>

        <br/>
        <div id="grid"></div>
        <%@ include file="footer.jsp" %>
    </body>
</html>

Ajax 请求完成且没有任何错误（获得 200 OK 响应代码）。我从远程服务器获取以下 JSON 并在 firebug 中显示：

{"msdetails":[ 
    {"first":"146", "last":"Concept Commit"}
,   {"first":"147", "last":"Execution Commit"}
,   {"first":"148", "last":"EFT Start"}
,   {"first":"149", "last":"Throttle Pull Review"}
,   {"first":"150", "last":"Throttle Pull"}
,   {"first":"151", "last":"PSIRT Verification"}
,   {"first":"152", "last":"Commit Test"}
,   {"first":"153", "last":"FTS Complete"}
,   {"first":"154", "last":"Image List"}
,   {"first":"155", "last":"Upgrade Planner"}
,   {"first":"156", "last":"Market Matrix"}
,   {"first":"157", "last":"Reg Test Cmp"}
,   {"first":"158", "last":"ISSU CM Creation"}
,   {"first":"144", "last":"Build Start Time"}
,   {"first":"159", "last":"ISSU CM Verification"}
,   {"first":"160", "last":"OPUS"}
,   {"first":"161", "last":"Docs Complete"}
,   {"first":"162", "last":"TAC Readiness"}
,   {"first":"145", "last":"CCO FCS"}
,   {"first":"163", "last":"Field CCO FCS"}
,   {"first":"164", "last":"HPC Date"}
,   {"first":"165", "last":"EoLA"}
,   {"first":"166", "last":"EoS"}
,   {"first":"167", "last":"EoL/EoSM"}
,   {"first":"168", "last":"EoVS Date"}
,   {"first":"169", "last":"End of Support"}
 ]}

我得到的错误是：

请帮忙指点一下这个错误。

【问题讨论】：

我可以通过调整数据网格中两列的宽度来解决“发生错误”消息，以便两者的宽度都是 100%。但现在我认为 JSON 数据没有被正确读取，我看到只有数据网格标题的空白屏幕。

标签： javascript html dojo

【解决方案1】：

为使 ItemWriteStore 正常工作，您的 json 数组部分应指定为“items”键名，并且您的 json 对象需要有键“id”，如果没有，您还需要指定哪个键将作为json对象的id

{"identifier:"first","items":[ 
    {"first":"146", "last":"Concept Commit"}
,   {"first":"147", "last":"Execution Commit"}
,   {"first":"148", "last":"EFT Start"}
,   {"first":"149", "last":"Throttle Pull Review"}]}

【讨论】：

但是下面的官方教程是怎么工作的：dojotoolkit.org/documentation/tutorials/1.6/populating_datagrid/…