J'ai une grille qui va éditer de petits blocs de données basés sur une structure arborescente plus grande. Afin de faciliter la connaissance de ce qui est sauvegardé par l'utilisateur, je souhaite que la grille soit dans un état non modifiable lorsque l'utilisateur voit la grille pour la première fois. Lorsque l'utilisateur est prêt, il peut cliquer sur le bouton d'édition, ce qui rendra certaines parties de la grille modifiables. Ensuite, il y a un bouton Enregistrer ou Annuler pour enregistrer les modifications ou revenir en arrière.Dojo Grid - Commutation entre éditable et non modifiable
Pour la plupart, cela fonctionne. Toutefois, si vous cliquez sur modifier, ne modifiez rien, cliquez sur Enregistrer, puis cliquez à nouveau sur Modifier, vous ne pouvez pas modifier les données dans la grille et, dans certains cas, vous recevez un message "assertion failed in ItemFileWriteStore". Cela arrive aussi si vous cliquez sur le bouton d'annulation. Parfois, toutes les données de la grille disparaissent après avoir cliqué sur le bouton Annuler. Ci-dessous, j'ai inclus le plus petit morceau de code reproduisant le problème que je vois. Est-ce que quelqu'un de l'extérieur a vu ce problème et a été capable de le réparer, ou est-ce que je fais quelque chose de mal dans mon code qui cause ce problème particulier?
Merci.
<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>
Il convient également de noter que cela fonctionne correctement tant que l'utilisateur édite des données. Ils peuvent enregistrer et frapper à nouveau éditer, et tout fonctionne bien. (J'ai également essayé d'encapsuler les appels à .save() et .revert() avec des vérifications de l'indicateur .isDirty(), mais cela ne résout pas le problème.) – MikeTheReader