我有一个网格,可以根据更大的树结构编辑小块数据.为了更容易知道用户保存了什么,我希望当用户第一次看到网格时,网格处于不可编辑状态.当用户准备好后,他们可以单击编辑按钮,这将使网格的某些部分可编辑.然后,有一个保存或取消按钮可以保存更改或还原.
在大多数情况下它是有效的.但是,如果单击“编辑”,请不要更改任何内容,单击“保存”,然后再次单击“编辑”,则无法编辑网格中的数据,并且在某些情况下会收到“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();
}
希望这个答案可以在一段时间后拯救别人.
谢谢.
原文地址：https://codeday.me/bug/20190606/1189858.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。