【发布时间】：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/
【问题讨论】：
标签： javascript html datagrid dojo