我正在尝试创建dojo动态增强网格，为每个网格添加新行。添加按钮无法获取网格索引。请找到下面的代码。我需要帮助为每个动态生成的网格添加一个新行。？
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf- 8"></meta>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" djConfig="parseOnLoad:true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojox/grid/resources/claroGrid.css" />
<title>Dynamic Data Grid</title>
<script type="text/JavaScript" src="dojoroot/dojo /dojo.js" djConfig:async:true, "parseOnLoad:true">
<link rel="stylesheet" href="dojoroot/dijit/themes/claro/claro.css">
</script>
<script>
require(
['dojo/on', 'dojo/dom', 'dojo/domReady!', 'dojo/_base/lang',
'dojox/grid/EnhancedGrid', 'dojo/data/ItemFileWriteStore',
'dijit/form/Button', 'dojo/_base/array',
'dojo/dom-construct', 'dojo/on', 'dojo/query'
],
function(on, dom, domReady, lang, EnhancedGrid, ItemFileWriteStore,
Button, array, domConstruct, on, query) {
/*set up data store*/
var data1 = {
identifier: "id",
items: []
};
var store1 = new ItemFileWriteStore({
data: data1
});
/*set up layout*/
var layout1 = [
[{
'name': 'SL',
'field': 'id',
'width': '100px'
}, {
'name': 'Column 2',
'field': 'col2',
'width': '100px',
editable: true
}, {
'name': 'Column 3',
'field': 'col3',
'width': '200px',
editable: true
}, {
'name': 'Column 4',
'field': 'col4',
'width': '150px',
editable: true
}]
];
/*create a new grid*/
var grid1 = new dojox.grid.EnhancedGrid({
id: 'grid',
store: store1,
structure: layout1,
rowSelector: '20px',
"style": "height: 100%; width: 100%"
});
dojo
.place(
"<div id='sam' style='width: 650px; height: 200px; border: 0px solid silver;''></div>",
dojo.body());
grid1.placeAt("sam");
/*Call startup() to render the grid*/
grid1.startup();
dojo.place("<br><br><br>", dojo.body());
dojo
.place(
"<button id='addRow' data-dojo-type='dijit.form.Button'>Add Row</button>",
dojo.body());
dojo
.place(
"<button id='delRow' data-dojo-type='dijit.form.Button'>Delete Row</button>",
dojo.body());
//Add new row
var button = new Button({
onClick: function() {
store1.newItem({
id: " SL :" + (grid1.rowCount + 1),
col2: "col2-" + (grid1.rowCount + 1),
col3: "col3-" + (grid1.rowCount + 1),
col4: "col4-" + (grid1.rowCount + 1)
});
if (store1.isDirty()) {
store1.save({
onComplete: onSave,
onError: onSaveError
});
}
}
}, "addRow");
//Deletion of Row
var button1 = new Button({
onClick: function() {
var item = grid1.getItem(grid1.rowCount - 1);
if (item == null) {
return;
}
store1.deleteItem(item);
if (store1.isDirty()) {
store1.save({
onComplete: onSave,
onError: onSaveError
});
}
}
}, "delRow");
var onSave = function() {
// alert("Save done.");
}
var onSaveError = function(error) {
alert("Error occurred: " + error)
}
// code for Multiple grids
var grids = ["Hello", "Green", "World"];
var arrayLength = grids.length;
var Grids = [arrayLength];
var divArr = [arrayLength];
var data = [arrayLength];
var store = [arrayLength];
var layout = [arrayLength];
var id = [arrayLength];
var divName = "sam";
var addR = [arrayLength];
var delR = [arrayLength];
var add = "addRow";
var del = "delRow";
for (i = 0; i < arrayLength; i++) {
dojo.place("<br><br><br>", dojo.body());
layout[i] = [
[{
'name': 'No',
'field': 'id',
'width': '100px'
}, {
'name': 'Col Heading',
'field': 'col2',
'width': '150px',
editable: true
}, {
'name': 'Col Heading',
'field': 'col3',
'width': '200px',
editable: true
}, {
'name': 'Col Heading',
'field': 'col4',
'width': '150px',
editable: true
}]
];
data[i] = {
identifier: id,
items: []
};
store[i] = new ItemFileWriteStore({
data: data[i]
});
Grids[i] = new dojox.grid.EnhancedGrid({
id: Grids[i],
store: store[i],
structure: layout[i],
rowSelector: '20px',
"style": "height: 100%; width: 100%"
});
divArr[i] = divName + i;
addR[i] = divArr[i] + add + i;
delR[i] = divArr[i] + del + i;
dojo
.place(
"<div id='divArr[i]' style='width: 650px; height: 200px; border: 0px solid silver;'></div>",
dojo.body());
dojo.place("<br>", dojo.byId('divArr[i]'));
Grids[i].placeAt(dojo.byId('divArr[i]'));
Grids[i].startup();
dojo.place("<br>", dojo.byId('divArr[i]'));
//dojo.place("<button id= 'addR[i]','data-dojo-type='dijit.form.Button' onclick='myFunction()'>AddRow</button>", dojo.byId("divArr[i]"));
//dojo.place("<button id= 'delR[i]', 'data-dojo-type='dijit.form.Button'>DelRow</button>", dojo.byId("divArr[i]"));
var button = new Button({
label: 'Add',
onClick: function(evt) {
store[i].newItem({
id: 'SL :',
col2: 'col2-',
col3: 'col3-',
col4: 'col4-'
});
if (store[i].isDirty()) {
store[i].save({
onComplete: onSave,
onError: onSaveError
});
}
}
});
button.startup();
button.placeAt('divArr[i]');
}
});
</script>
</head>
<body class="claro">
</body>
</html>