配置dojo datagrid以使用远程服务器URL

时间:2012-08-13 07:22:21

标签: javascript html dojo

我无法将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"}
 ]}

我得到的错误是:

Dojo Datagrid error

请帮助解决有关此错误的任何提示。

1 个答案:

答案 0 :(得分: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"}]}