Javascript 无法保存到Dojo中的存储_Javascript_Html_Datagrid_Dojo

Javascript 无法保存到Dojo中的存储

javascript html dojo

Javascript 无法保存到Dojo中的存储,javascript,html,datagrid,dojo,Javascript,Html,Datagrid,Dojo,我正在尝试使用DojoDataGrid进行简单的操作，然后再进行复杂的操作。然而，我现在只能把钱存到商店里。我使用浏览器中的代码和.json文件中的播放器数据，为了方便起见，我现在将所有内容都放在源代码中当我刷新浏览器时，我刚刚保存的数据不会更新到json文件中。为什么会这样？我该如何修复它 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <h

我正在尝试使用DojoDataGrid进行简单的操作，然后再进行复杂的操作。然而，我现在只能把钱存到商店里。我使用浏览器中的代码和.json文件中的播放器数据，为了方便起见，我现在将所有内容都放在源代码中

当我刷新浏览器时，我刚刚保存的数据不会更新到json文件中。为什么会这样？我该如何修复它

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">

  <head>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
     <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css" />
     <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>

    <style type="text/css">
      body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
    </style>
    <style type="text/css">
        .dojoxGrid table { margin: 0; } 
        html, body { width: 100%; height: 100%; margin: 0; }
    </style>

    <script type="text/javascript">
    dojo.require("dojox.grid.DataGrid");
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dijit.form.Button");

    dojo.addOnLoad(function() {
        // our test data store for this example:
        var store = new dojo.data.ItemFileWriteStore({
          //url: 'players.json'
            data: {
              label: 'pId',
              items: [{"Player":"Wayne Gretzky","Games":"1487","Points":"2857","PPG":"1.92"},
                {"Player":"Mark Messier","Games":"1756","Points":"1887","PPG":"1.07"},
                {"Player":"Gordie Howe","Games":"1767","Points":"1850","PPG":"1.04"},
                {"Player":"Ron Francies","Games":"1731","Points":"1798","PPG":"1.03"},
                {"Player":"Marcel Dionne","Games":"1348","Points":"1771","PPG":"1.31"},
                {"Player":"Steve Yzerman","Games":"1514","Points":"1755","PPG":"1.16"},
                {"Player":"Mario Lemieux","Games":"915","Points":"1723","PPG":"1.88"},
                {"Player":"Joe Sakic","Games":"1378","Points":"1641","PPG":"1.19"},
                {"Player":"Jaromir Jagr","Games":"1273","Points":"1599","PPG":"1.25"},
                {"Player":"Phil Esposito","Games":"1282","Points":"1590","PPG":"1.24"}]}
        });

        // set the layout structure:
        var layout = [{
          field: 'Player',
          name: 'Player',
          width: '200px',
          styles:"text-align:center;"
        },
        {
          field: 'Games',
          name: 'Games Played',
          width: '50px',
          styles:"text-align:center;"
        },
        {
          field: 'Points',
          name: 'Points',
          width: '50px',
          styles:"text-align:center;"
        },
        {
          field: 'PPG',
          name: 'Points Per Game',
          width: '50px',
          styles:"text-align:center;"
        }];

        // create a new grid:
        var grid = new dojox.grid.DataGrid({
          query: {
              Player: '*'
          },
          store: store,
          clientSort: true,
          rowSelector: '20px',
          structure: layout
        },
        document.createElement('div'));

        // append the new grid to the div "gridContainer":
        dojo.byId("gridContainer").appendChild(grid.domNode);

        // Call startup, in order to render the grid:
        grid.startup();
        //dojo.forEach(grid.structure, function(itemData, index, list){
            //itemData.editable = true;
        //});
        var btnAdd = new dijit.form.Button({
            label: "Add",
            onClick: function(){
                grid.store.newItem({
                    Player: "Someone", 
                    Games: "1000", 
                    Points: "1000", 
                    PPG: "1.0"
                });
            }
        }, "btnAdd");
        var btnRemove = new dijit.form.Button({
            label: "Remove",
            onClick: function(){
                var items = grid.selection.getSelected();
                if(items.length){
                    dojo.forEach(items, function(selectedItem){
                        if(selectedItem !== null){
                            grid.store.deleteItem(selectedItem);
                        }
                    });
                } 
            }
        }, "btnRemove");
        var btnSave = new dijit.form.Button({
            label: "Save",
            onClick: function(){    
                grid.store.save({onComplete: saveDone, onError: saveFailed});
            }
        }, "btnSave");
    });

    function saveDone(){
      alert("Done saving.");
    }
    function saveFailed(){
      alert("Save failed.");
    }
  </script>

  </head>



  <body class=" tundra">
    <button id="btnAdd" type="button"></button>
    <button id="btnRemove" type="button"></button>
    <button id="btnSave" type="button"></button>
    <br />
    <div id="gridContainer" style="width: 100%; height: 100%;"></div>
  </body>


</html>


正文，html{字体系列：helvetica，arial，无衬线；字体大小：90%；}
.dojoxGrid表{margin:0；}
html，正文{宽度：100%；高度：100%；边距：0；}
require（“dojox.grid.DataGrid”）；
require（“dojo.data.ItemFileReadStore”）；
require（“dojo.data.ItemFileWriteStore”）；
require（“dijit.form.Button”）；
dojo.addOnLoad（函数（）{
//本例的测试数据存储：
var store=new dojo.data.ItemFileWriteStore({
//url:'players.json'
数据：{
标签：“pId”，
物品：[{“玩家”：“韦恩·格雷茨基”，“游戏”：“1487”，“点数”：“2857”，“PPG”：“1.92”}，
{“玩家”：“马克·梅西耶”，“游戏”：“1756”，“积分”：“1887”，“PPG”：“1.07”}，
{“玩家”：“戈迪·豪”，“游戏”：“1767”，“积分”：“1850”，“PPG”：“1.04”}，
{“玩家”：“罗恩·弗朗西斯”，“游戏”：“1731”，“积分”：“1798”，“PPG”：“1.03”}，
{“玩家”：“马塞尔·迪翁”，“游戏”：“1348”，“点数”：“1771”，“PPG”：“1.31”}，
{“玩家”：“史蒂夫·伊泽曼”，“游戏”：“1514”，“积分”：“1755”，“PPG”：“1.16”}，
{“玩家”：“马里奥·勒米厄”，“游戏”：“915”，“点数”：“1723”，“PPG”：“1.88”}，
{“玩家”：“乔·萨基奇”，“游戏”：“1378”，“点数”：“1641”，“PPG”：“1.19”}，
{“玩家”：“Jaromir Jagr”，“游戏”：“1273”，“点数”：“1599”，“PPG”：“1.25”}，
{“球员”：“菲尔·埃斯波西托”，“比赛”：“1282”，“积分”：“1590”，“PPG”：“1.24”}]}
});
//设置布局结构：
变量布局=[{
场：“球员”，
姓名：'玩家'，
宽度：“200px”，
样式：“文本对齐：居中；”
},
{
领域：“游戏”，
名称：“玩过的游戏”，
宽度：“50px”，
样式：“文本对齐：居中；”
},
{
字段：'点'，
名称：'点'，
宽度：“50px”，
样式：“文本对齐：居中；”
},
{
字段：'PPG'，
名称：'每场比赛点数'，
宽度：“50px”，
样式：“文本对齐：居中；”
}];
//创建新网格：
var grid=new dojox.grid.DataGrid({
查询：{
玩家：'*'
},
店:店,，
是的，
行选择器：“20px”，
结构：布局
},
document.createElement（'div'）；
//将新网格附加到div“gridContainer”：
byId（“gridContainer”）.appendChild（grid.domNode）；
//调用startup以渲染网格：
grid.startup（）；
//forEach（grid.structure，function（itemData，index，list）{
//itemData.editable=true；
//});
var btnAdd=新的dijit.form.Button({
标签：“添加”，
onClick:function（）{
grid.store.newItem({
玩家：“某人”，
游戏：“1000”，
积分：“1000”，
PPG：“1.0”
});
}
}，“btnAdd”）；
var btnRemove=新建dijit.form.Button({
标签：“删除”，
onClick:function（）{
var items=grid.selection.getSelected（）；
if（项目长度）{
forEach（项、函数（selectedItem）{
如果（selectedItem！==null）{
grid.store.deleteItem（selectedItem）；
}
});
} 
}
}“BTN删除”）；
var btnSave=new dijit.form.Button({
标签：“保存”，
onClick:function（）{
保存（{onComplete:saveDone，onError:saveFailed}）；
}
}，“btnSave”）；
});
函数saveDone（）{
警惕（“保存完毕”）；
}
函数saveFailed（）{
警报（“保存失败”）；
}

源代码也在这里：

您需要在服务器端实现一些东西来处理

dojo.data.ItemFileWriteStore

的

.save（）
我修改了您的源代码，以便更容易处理：
另外，就个人而言，在服务器端为ItemFileWriteStore实现某些功能可能有点愚蠢，因为您可以更轻松地将网格与或新的集成起来。
覆盖功能似乎需要在客户端完成？这是否意味着我可以覆盖_saveEverything来执行保存，以便它保存到服务器？如果我使用dojo.store.JsonRest，这个概念类似吗？感谢dojo.data.ItemFileWriteStore
，是的，您必须重写方法客户端并告诉它如何保存。对于JsonRest和JsonRestStore，不，REST协议中暗示了如何将数据发送到服务器，因此通常不需要在客户端执行任何操作，只需要在服务器端正确地实现它。我可以了解更多关于在服务器端执行什么操作的详细信息吗？真的不知道该怎么办。。。谢谢