1

グリッドにクラブのリストを表示する JSP を作成しています。グリッドには、クラブの名前、緯度、経度、ウェブサイト、説明が表示されます。

表示される実際のデータは、clubStore という変数 (dojo.data.ItemFileWriteStore) に保管されます。

ページが読み込まれると、データを取得するためにサーブレットが呼び出されます。次に、処理関数は、ストアに保持されているすべてのアイテムを削除し、サーブレットによって返された新しいアイテムを追加します。

JSP コードを以下に示します。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clubs</title>
    <style type="text/css">
        @import "./dojoroot/dojo/resources/dojo.css";
        @import "./dojoroot/dijit/themes/tundra/tundra.css";
        @import "./dojoroot/dojox/grid/resources/Grid.css";
        @import "./dojoroot/dojox/grid/resources/nihiloGrid.css";
    </style>
    <script type="text/javascript" src="dojoroot/dojo/dojo.js" 
            djConfig="parseOnLoad: true, isDebug: false">
    </script>
    <script language="JavaScript" type="text/javascript">
        dojo.require("dojo.parser");
        dojo.require("dojo.data.ItemFileWriteStore");
        var clubData={
            items:[{name:'No Clubs', lat:'---', lon:'---', webSite:'---', description:'---'}]
        };
        var layoutClub=[{field:"name", name:"Name", width:10},
                        {field:"lat", name:"Lat", width:5},
                        {field:"lon", name:"Long", width:5},
                        {field:"webSite", name:"Web Site", width:10},
                        {field:"description", name:"Description", width:'auto'}];
        var clubStore=new dojo.data.ItemFileWriteStore(data:clubData});
    </script>
    <link rel="stylesheet" href="dojoroot/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="dojoroot/dojox/widget/Dialog/Dialog.css" />
</head>
<body class="tundra">
    <%@include file="header.jsp"%>
    <div id="clubGrid"
        style="width: 800px;"
        autoHeight="true"
        data-dojo-type="dojox/grid/DataGrid"
        data-dojo-props="store:clubStore,
                         structure:layoutClub,
                         query:{},
                         queryOptions:{'deep':true},
                         rowsPerPage:40">
    </div>  
    <br>
    <script>
        var urlString="http://localhost:8080/BasicWeb/ClubsServlet";
        dojo.xhrGet({
            url: urlString,
            handleAs: "text",
            load: function(data) {
                // remove items...
                var allData=clubStore._arrayOfAllItems;
                for (i=0; i<allData.length; i++) {
                    if (allData[i]!=null) {
                        clubStore.deleteItem(allData[i]);
                    }
                }               
                var jsonClubArray=JSON.parse(data);
                for (var i=0; i<jsonClubArray.clubs.length; i++) {
                    var club=jsonClubArray.clubs[i];
                    var newClub={name: club.clubname, lat:club.lat, lon:club.lon, webSite: club.website, description: club.description};
                    clubStore.newItem(newClub);
                }
                clubStore.save();                   
            }
        });
    </script>
</body>
</html>

clubStore が定義されていない (Firebug を使用したデバッグ) ため、サーブレット応答を処理するスクリプトが失敗することがあります。すべてが完全に機能する場合があるため、これは偽の障害のようです。

clubStore 変数を定義する方法を理解するための支援をいただければ幸いです。

ありがとう。

ジェームズ。

4

4 に答える 4

0

clubStore をグローバル スペースに配置します...その前にある var キーワードを削除するだけです...

于 2013-04-03T14:58:51.530 に答える
0

次のように、require ステートメントの順序を入れ替えてみることができます。

    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dojo.parser");

それが失敗した場合は、parseOnLoad を false に設定し、ストアが次のようにインスタンス化された後に dojo.parser.parse() を呼び出すことができます。

(コードに基づいて Dojo 1.6 以前を使用していると仮定します)

dojo.addOnLoad(function() {
  dojo.parser.parse();
});
于 2013-04-03T02:41:32.867 に答える