您好我在再次选择DOJO中的下拉列表时收到错误
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"
%>
<!DOCTYPE html>
<html>
<head>
<script>
function onReportTypesSelect()
{
if(getDijitValue('data_types') != 'Select')
{
if(getDijitValue('data_types') == 'class_level')
{
require([
"dojo/store/JsonRest",
"dojo/store/Memory",
"dojo/store/Cache",
"dojox/grid/DataGrid",
"dojo/data/ObjectStore",
"dojo/query",
"dojo/domReady!"
], function(JsonRest, Memory, Cache, DataGrid, ObjectStore, query){
var userStore, dataStore, grid;
userStore = new Cache(JsonRest({target: "<%=request.getContextPath()%>" + "/data/classServlet"}), new Memory());
grid = new DataGrid({
id:"class_level_grid",
store: dataStore = new ObjectStore({objectStore: userStore}),
structure: [
{name: 'Roll Number', field: 'roll', width: 'auto', defaultValue: ""},
{name: 'Name', field: 'name', width: '100px', defaultValue: ""},
{name: 'Class', field: 'class', width: '75px', defaultValue: ""}
],
style:"font-family: calibri, Garamond, Comic Sans; font-size: 10;",
selectionMode:'single',
autoHeight: 10,
rowsPerPage:40,
rowSelector:'20px',
selectable: true
}
, "class_level_grid_div"); // make sure you have a target HTML element with this id
grid.startup();
});
}
if(getDijitValue('data_types') == 'class_level2')
{
require([
"dojo/store/JsonRest",
"dojo/store/Memory",
"dojo/store/Cache",
"dojox/grid/DataGrid",
"dojo/data/ObjectStore",
"dojo/query",
"dojo/domReady!"
], function(JsonRest, Memory, Cache, DataGrid, ObjectStore, query){
var userStore, dataStore, grid;
userStore = new Cache(JsonRest({target: "<%=request.getContextPath()%>" + "/data/class2Servlet"}), new Memory());
grid = new DataGrid({
id:"class_level2_grid",
store: dataStore = new ObjectStore({objectStore: userStore}),
structure: [
{name: 'Roll Number', field: 'roll', width: 'auto', defaultValue: ""},
{name: 'Name', field: 'name', width: '100px', defaultValue: ""},
{name: 'Class', field: 'class', width: '75px', defaultValue: ""}
],
style:"font-family: calibri, Garamond, Comic Sans; font-size: 10;",
selectionMode:'single',
autoHeight: 10,
rowsPerPage:40,
rowSelector:'20px',
selectable: true
}
, "class_level2_grid_div"); // make sure you have a target HTML element with this id
grid.startup();
});
}
}
}
</script>
</head>`enter code here`
<body>
<div id="data_types" data-dojo-type="dijit/form/Select" style="width: 200px;" onchange="onReportTypesSelect()">
<span data-dojo-value="Select"><b>Select</b></span>
<span data-dojo-value="class_level"><b>class Level</b></span>
<span data-dojo-value="class_level2"><b>class Level</b></span>
</div>
<div id="class_level_grid_div" style="width: 95%; height: 90%;"> </div>
</div>
<div id="class_level2_grid_div" style="width: 95%; height: 90%;"> </div>
</div>
</body>
</html>
错误即将出现错误：尝试使用id == class_level_grid注册窗口小部件，但该ID已经注册。 当再次选择下拉时，请帮助我。
答案 0 :(得分：1)
如果不破坏您创建的第一个网格，则无法在另一个网格上方填充网格。
所以，如果你有一个id = MyGrid的网格放在一个div上，这个div将被移除，网格将替换它。
因此您必须使用placeAt和grid.destroyRecursive(true);
下面的代码应该可以正常工作。
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"
%>
<!DOCTYPE html>
<html>
<head>
<script>
function onReportTypesSelect()
{
if(getDijitValue('data_types') != 'Select')
{
if(getDijitValue('data_types') == 'class_level')
{
require([
"dojo/store/JsonRest",
"dojo/store/Memory",
"dojo/store/Cache",
"dojox/grid/DataGrid",
"dojo/data/ObjectStore",
"dojo/query",
"dijit/registry",
"dojo/domReady!"
], function(JsonRest, Memory, Cache, DataGrid, ObjectStore, query,registry){
//we are checking here if the grid with that ID already exists and if yes destroy it
if(typeof registry.byId("class_level_grid_div") != "undefined"){
registry.byId("class_level_grid_div").destroyRecursive();
}
var userStore, dataStore, grid;
userStore = new Cache(JsonRest({target: "<%=request.getContextPath()%>" + "/data/classServlet"}), new Memory());
grid = new DataGrid({
id:"class_level_grid",
store: dataStore = new ObjectStore({objectStore: userStore}),
structure: [
{name: 'Roll Number', field: 'roll', width: 'auto', defaultValue: ""},
{name: 'Name', field: 'name', width: '100px', defaultValue: ""},
{name: 'Class', field: 'class', width: '75px', defaultValue: ""}
],
style:"font-family: calibri, Garamond, Comic Sans; font-size: 10;",
selectionMode:'single',
autoHeight: 10,
rowsPerPage:40,
rowSelector:'20px',
selectable: true
}).placeAt("class_level_grid_div"); // use the placeAt so you don't replace the dom
grid.startup();
});
}
if(getDijitValue('data_types') == 'class_level2')
{
require([
"dojo/store/JsonRest",
"dojo/store/Memory",
"dojo/store/Cache",
"dojox/grid/DataGrid",
"dojo/data/ObjectStore",
"dojo/query",
"dijit/registry",
"dojo/domReady!"
], function(JsonRest, Memory, Cache, DataGrid, ObjectStore, query,registry){
var userStore, dataStore, grid;
if(typeof registry.byId("class_level2_grid_div") != "undefined"){
registry.byId("class_level2_grid_div").destroyRecursive();
}
userStore = new Cache(JsonRest({target: "<%=request.getContextPath()%>" + "/data/class2Servlet"}), new Memory());
grid = new DataGrid({
id:"class_level2_grid",
store: dataStore = new ObjectStore({objectStore: userStore}),
structure: [
{name: 'Roll Number', field: 'roll', width: 'auto', defaultValue: ""},
{name: 'Name', field: 'name', width: '100px', defaultValue: ""},
{name: 'Class', field: 'class', width: '75px', defaultValue: ""}
],
style:"font-family: calibri, Garamond, Comic Sans; font-size: 10;",
selectionMode:'single',
autoHeight: 10,
rowsPerPage:40,
rowSelector:'20px',
selectable: true
}).placeAt("class_level2_grid_div"); // make sure you have a target HTML element with this id
grid.startup();
});
}
}
}
</script>
</head>`enter code here`
<body>
<div id="data_types" data-dojo-type="dijit/form/Select" style="width: 200px;" onchange="onReportTypesSelect()">
<span data-dojo-value="Select"><b>Select</b></span>
<span data-dojo-value="class_level"><b>class Level</b></span>
<span data-dojo-value="class_level2"><b>class Level</b></span>
</div>
<div id="class_level_grid_div" style="width: 95%; height: 90%;"> </div>
</div>
<div id="class_level2_grid_div" style="width: 95%; height: 90%;"> </div>
</div>
</body>
</html>