javascript - 无法保存到 Dojo 中

标签 javascript html datagrid dojo

在我转向复杂的操作之前,我正在尝试使用 dojo datagrid 进行简单的操作。但是,我现在坚持保存到商店。我使用浏览器中的代码和 .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>

源代码也在这里:http://jsfiddle.net/cDCWk/

最佳答案

您需要在服务器端实现一些东西来处理 dojo.data.ItemFileWriteStore.save() 部分,如 here 所述.

我已经修改了您的源代码,以使其更容易处理:http://jsfiddle.net/kitsonk/cDCWk/1/

另外,就个人而言,当您可以更轻松地将 Grid 与 dojox.data.JsonRestStore 集成时,为 ItemFileWriteStore 实现一些服务器端可能有点愚蠢。或新的 dojo.store.JsonRest .

关于javascript - 无法保存到 Dojo 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8904848/

相关文章:

javascript - 如何从 JSON 对象中获取字符串

html - 下拉菜单透明度不起作用

c# - DataGrid.ColumnWidth ="*"在 ScrollViewer 中不起作用

javascript - 这里如何使用prevState?

javascript - 验证jsp中的两个serializeArray是否具有相同的值

javascript - 所有幻灯片的 JSSOR 字幕同时触发

html - Firefox 中的颗粒状按钮变换

c# - Gridview 中的多列排序?

c# - 当我在 DataGridTemplateColumn.CellTemplate 中使用 TextBox 时,DataGrid.BeginningEdit 事件未触发

javascript - 闭包中的变量但无法访问