无法保存到 Dojo 中的存储

Posted

技术标签:

【中文标题】无法保存到 Dojo 中的存储【英文标题】:Unable to save to store in Dojo 【发布时间】:2012-02-12 20:38:53 【问题描述】:

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

【问题讨论】:

【参考方案1】:

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

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

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

【讨论】:

函数的覆盖似乎需要在客户端完成?这是否意味着我可以覆盖 _saveEverything 来进行保存,以便保存到服务器?如果我使用 dojo.store.JsonRest,这个概念是否相似?谢谢 对于dojo.data.ItemFileWriteStore,是的,您必须覆盖方法客户端并告诉它如何保存。对于 JsonRest 和 JsonRestStore,不,如何将数据发送到服务器是 REST 协议中隐含的,因此通常客户端无需做任何事情,只需在服务器端正确实现即可。 我可以提供更多关于在服务器端做什么的细节吗?真的不知道该怎么办...谢谢

以上是关于无法保存到 Dojo 中的存储的主要内容,如果未能解决你的问题,请参考以下文章

dojo增强了网格服务器端分页无法正常工作

无法将数据保存到 React 中的本地存储

我的 IBM Domino xPages 应用程序中的 dojo.js 导致某些 JS 库无法工作

无法访问保存在 Javascript 代码中的存储桶中的图像

将数据推送到 Dojo Filteringselect(带代码)

在dojo过滤中设置第一项选择onChange