Dojo Grid - 在可编辑和不可编辑之间切换 [英] Dojo Grid - Switching between editable and not editable
问题描述
在大部分情况下，它可以工作。但是，如果您单击编辑，不要更改任何内容，单击保存，然后再次单击编辑，您将无法编辑网格中的数据，并且在某些情况下，您会收到在FileFileWriteStore中断言失败消息。如果您点击取消按钮也会发生这种情况。偶尔，单击取消按钮后，网格中的所有数据都将消失。
下面，我已经包含了最小的代码重现问题的代码，看见。有没有人在那里看到这个问题，并能够解决它，或者我在我的代码中导致这个特殊问题的错误？
谢谢。 >
< html>
< head>
< title> Dojo网格测试< / title>
< script src =http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.jstype =text / javascript>< / script>
< link rel =stylesheettype =text / csshref =http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/ tundra.css/>
< link rel =stylesheettype =text / csshref =http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojox/grid/resources/Grid.css >
< link rel =stylesheettype =text / csshref =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;
函数editTable（）{
var theStructure = containerGrid.structure;
theStructure [1] .editable = true;
theStructure [2] .editable = true;
containerGrid.setStructure（theStructure）;
toggleButtons（）;
}
函数saveTable（）{
var theStructure = containerGrid.structure;
theStructure [1] .editable = false;
theStructure [2] .editable = false;
containerGrid.setStructure（theStructure）;
attCodeStore.save（）;
toggleButtons（）;
}
函数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）;
}
}
函数setupTable（）{
var attCodeData = {label：'attribute'，
identifier：'id' ，
items：[
{id：'itemOneId'，
alias：'itemOneAlias'，
description：'itemOneDescription'，
属性：'itemOneAttribute'
{id：'itemTwoId'，
别名：'itemTwoAlias'，
描述：'itemTwoDescription'，
属性：'itemTwoAttribute'
}
{id：'itemThreeId'，
别名：'itemThreeAlias'，
描述：'itemThreeDescription'，
属性：'itemThreeAttribute'
}，
{id：'itemFourId'，
别名：'itemFourAlias'，
描述：'itemFourDescription '，
属性：'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 =buttonvalue =Editid =editButtononclick =editTable（）/>
< input type =buttonvalue =保存id =saveButtononclick =saveTable（）class =dijitHidden/>
< input type =buttonvalue =取消id =cancelEditButtononclick =cancelTable（）class =dijitHidden/>
< / div>
< / div>
< div id =gridDiv>< / div>
< / body>
< / html>
将这一个（尽管花了一点时间） 。原来，当您点击可编辑网格中的条目时，网格进入编辑状态。 （有意义）但是，当我在网格处于编辑状态时保存数据存储，并没有改变网格的状态。下一次我点击编辑并把网格带回到我以为我可以开始编辑的地方，网格认为它仍在编辑以前选择的单元格，只会发送这些单元格的信息。
当我将以下代码放在我的saveTable和cancelTable方法的开头时，都按预期工作：
if（containerGrid.edit.isEditing（））{
containerGrid.edit.apply（）;
}
希望这个答案可以在一段时间后保存别人。
谢谢。
I have a grid that will edit small chunks of data based on a larger tree structure. In order to make it easier to know what's being saved by the user, I want to have the grid be in a non-editable state when the user first sees the grid. When the user is ready, they can click the edit button, which will make portions of the grid editable. Then, there is a save or a cancel button to either save the changes or revert back.
For the most part it works. However, if you click edit, don't change anything, click save, and then click edit again, you cannot edit the data in the grid, and on some occasions you receive an "assertion failed in ItemFileWriteStore" message. This also happens if you click on the cancel button. Occasionally, all the data in the grid will disappear after clicking the cancel button as well.
Below, I've included the smallest chunk of code that reproduces the problem I'm seeing. Has anyone outer there seen this issue and been able to fix it, or am I doing something wrong in my code that is causing this particular problem?
Thanks.
<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>
Figured this one out (though it took a bit). Turns out, that when you click on an entry in an editable grid, the grid goes into an editing state. (Makes sense.) However, when I saved the data store while the grid was in an editing state, it didn't change the state of the grid. The next time I clicked on edit and brought the grid back to where I thought I could start editing, the grid thought it was still editing the previously selected cell, and would only send that cells information.
When I put the following code at the beginning of my saveTable and cancelTable methods, all worked as expected:
if (containerGrid.edit.isEditing()) {
containerGrid.edit.apply();
}
Hopefully, this answer can save someone else some time later.
Thanks.
这篇关于Dojo Grid - 在可编辑和不可编辑之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
