我有一个网格，可以根据较大的树结构编辑小块数据。为了更容易了解用户保存的内容，我希望当用户第一次看到网格时网格处于不可编辑状态。当用户准备好后，他们可以单击编辑按钮，这将使网格的某些部分可编辑。然后，有一个保存或取消按钮来保存更改或恢复原状。
在大多数情况下它是有效的。但是，如果您点击编辑，不做任何更改，点击保存，然后再次点击编辑，您将无法编辑网格中的数据，并且在某些情况下您会收到“断言在 ItemFileWriteStore 中失败”的消息。如果您单击取消按钮，也会发生这种情况。有时，网格中的所有数据也会在单击取消按钮后消失。
下面，我包含了最小的代码块来重现我所看到的问题。外面有没有人看到这个问题并能够解决它，或者我在我的代码中做错了什么导致了这个特定问题？
谢谢。
<html>
<head>
<title>Dojo Grid Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojox/grid/resources/tundraGrid.css">
<script>
dojo.require("dojo.data.ItemFileWriteStore")
dojo.require("dojox.grid.cells.dijit");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojox.grid.cells");
var attCodeStore = null;
var containerGrid = null;
function editTable() {
var theStructure = containerGrid.structure;
theStructure[1].editable = true;
theStructure[2].editable = true;
containerGrid.setStructure(theStructure);
toggleButtons();
}
function saveTable() {
var theStructure = containerGrid.structure;
theStructure[1].editable = false;
theStructure[2].editable = false;
containerGrid.setStructure(theStructure);
attCodeStore.save();
toggleButtons();
}
function cancelTable() {
var theStructure = containerGrid.structure;
theStructure[1].editable = false;
theStructure[2].editable = false;
containerGrid.setStructure(theStructure);
attCodeStore.revert();
toggleButtons();
}
function toggleButtons() {
if (dojo.hasClass("editButton", "dijitHidden")) {
dojo.removeClass("editButton", "dijitHidden");
dojo.addClass("saveButton", "dijitHidden");
dojo.addClass("cancelEditButton", "dijitHidden");
} else {
dojo.addClass("editButton", "dijitHidden");
dojo.removeClass("saveButton", "dijitHidden");
dojo.removeClass("cancelEditButton", "dijitHidden");
}
}
function setupTable() {
var attCodeData = {label:'attribute',
identifier: 'id',
items: [
{ id:'itemOneId',
alias:'itemOneAlias',
description:'itemOneDescription',
attribute:'itemOneAttribute'
},
{ id:'itemTwoId',
alias:'itemTwoAlias',
description:'itemTwoDescription',
attribute:'itemTwoAttribute'
},
{ id:'itemThreeId',
alias:'itemThreeAlias',
description:'itemThreeDescription',
attribute:'itemThreeAttribute'
},
{ id:'itemFourId',
alias:'itemFourAlias',
description:'itemFourDescription',
attribute:'itemFourAttribute'
},
]
};
attCodeStore = new dojo.data.ItemFileWriteStore({data:attCodeData})
console.log(attCodeStore);
console.log(attCodeData);
containerGrid = new dojox.grid.DataGrid({
store: attCodeStore,
clientSort: true,
autoHeight: true,
structure: [
{field: 'attribute', width: '100px', name: 'Attribute'},
{field: 'alias', width: '100px', name: 'Alias'},
{field: 'description', width: 'auto', name: 'Description'}
]
});
dojo.byId("gridDiv").appendChild(containerGrid.domNode);
containerGrid.startup();
}
dojo.addOnLoad(function(){
setupTable();
})
</script>
</head>
<body>
<div id="gridArea">
<div>
<input type="button" value="Edit" id="editButton" onclick="editTable()"/>
<input type="button" value="Save" id="saveButton" onclick="saveTable()" class="dijitHidden"/>
<input type="button" value="Cancel" id="cancelEditButton" onclick="cancelTable()" class="dijitHidden" />
</div>
</div>
<div id="gridDiv"></div>
</body>
</html>
最佳答案
弄清楚了这一点(虽然花了一点时间)。事实证明，当您单击可编辑网格中的条目时，网格会进入编辑状态。 (有道理。)但是，当我在网格处于编辑状态时保存数据存储时，它并没有改变网格的状态。下次我单击编辑并将网格带回我认为可以开始编辑的位置时，网格认为它仍在编辑先前选择的单元格，并且只会发送该单元格信息。
当我将以下代码放在我的 saveTable 和 cancelTable 方法的开头时，一切都按预期工作:
if (containerGrid.edit.isEditing()) {
containerGrid.edit.apply();
}
希望这个答案可以在以后拯救其他人。
谢谢。
关于javascript - Dojo Grid - 在可编辑和不可编辑之间切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3703573/