抱歉我的英语不好。 我正在将 Web 应用程序编程为 jsp/servlet 应用程序。这是一种统计工具，用户可以在表格中进行设置，然后显示图表和表格。图表(Dojo)和表格是在单个 JS 脚本中实现的。我使用 Dojo DataGrid 创建的表:
define([
'dojo/_base/lang',
'dojox/grid/DataGrid',
'dojo/data/ItemFileWriteStore',
'dojo/dom',
'dojo/domReady!'
],
function(lang, DataGrid, ItemFileWriteStore, dom){
return {
setTabelle: function(response) {
var data = {
identifier: "id",
items: []
};
var data_list = new Array(response.summeArray.length);
var spalten = new Array(4 /*TODO*/);
var trainer = response.trainer;
var abfrage = response.abfrage;
if((trainer == "sql-trainer") && (abfrage == 0 || abfrage == 1)) {
for(var i = 0; i < response.summeArray.length; i++){
data_list[i] = { col1: "normal", col2: response.summeArray[i].id, col3: response.summeArray[i].summe };
}
}
else {
for(var i = 0; i < response.summeArray.length; i++){
data_list[i] = { col1: "normal", col2: response.summeArray[i].id, col3: response.summeArray[i].inhalt, col4: response.summeArray[i].summe };
}
}
for(var i = 0; i < response.summeArray.length; i++){
data.items.push(lang.mixin({ id: i+1 }, data_list[i]));
}
var store = new ItemFileWriteStore({data: data});
var inhalt;
if((trainer == "sql-trainer") && (abfrage == 0 || abfrage == 1)) {
spalten = [[
{'name': 'Pos.', 'field': 'id', 'width': '70px'},
{'name': 'Schema', 'field': 'col2', 'width': '670px'},
{'name': 'Anzahl', 'field': 'col3', 'width': '100px'}
]];
}
else {
if(trainer == "alle") {
if(abfrage == 4) {
inhalt = 'Sprache';
}
else {
inhalt = 'Tool';
}
}
else if(trainer == "mct"){
if(abfrage == 0) {
inhalt = 'Hochschule';
}
else if(abfrage == 9 || abfrage == 10) {
inhalt = 'Kategorie';
}
else {
inhalt = 'Aufgabe';
}
}
else if(trainer == "sqlopt") {
if(abfrage == 4 || abfrage == 5) {
inhalt = 'Aufgabe';
}
else {
inhalt = 'Schema';
}
}
else {
if(abfrage == 0 || abfrage == 1) {
inhalt = 'Schema';
}
else {
inhalt = 'Aufgabe';
}
}
spalten = [[
{'name': 'Pos.', 'field': 'id', 'width': '70px'},
{'name': 'ID', 'field': 'col2', 'width': '100px'},
{'name': inhalt, 'field': 'col3', 'width': '570px'},
{'name': 'Anzahl', 'field': 'col4', 'width': '100px'}
]];
}
var grid = new DataGrid({
id: 'grid',
store: store,
structure: spalten,
autoWidth: true,
// autoHeight: true,
rowSelector: '20px'
});
grid.placeAt("statsTabelleDiagramm");
grid.startup();
}
};
});
问题是该表将不再显示在该工具的第二实现例中。错误在这里:
var grid = new DataGrid({…. });
可能是因为 DataGrid 的实例已存在。我对传奇也有同样的问题。然后我修复了:
var legend = dijit.byId("legende");
if (legend) {
legend.destroyRecursive(true);
}
var legend = new dojox.charting.widget.Legend({ chart: kreisDiag1, horizontal: false }, "legende");
这不适用于 DataGrid。我知道您可以动态更改 DataGrid 的列和行，但我发现为用户数据创建适当的实例很容易。 如何检查 DataGrid 实例是否已存在并删除它？
我的第二个问题是表格的显示。在该工具中，用户可以通过单击按钮来选择要显示的图表或表格。我已经用 JS 函数解决了这个问题:
function diagAuswaehlen(ausgewaehltesDiag) {
document.getElementById("statsKurvenDiagramm").style.visibility = 'hidden';
document.getElementById("statsKreisDiagramm").style.visibility = 'hidden';
document.getElementById("statsStabDiagramm").style.visibility = 'hidden';
document.getElementById("statsTabelleDiagramm").style.visibility = 'hidden';
switch(ausgewaehltesDiag){
case 0:
document.getElementById("statsKurvenDiagramm").style.visibility = 'visible';
break;
case 1:
document.getElementById("statsKreisDiagramm").style.visibility = 'visible';
break;
case 2:
document.getElementById("statsStabDiagramm").style.visibility = 'visible';
break;
case 3:
document.getElementById("statsTabelleDiagramm").style.display='visible';
break;
}
}
首先，表格显示，然后用户可以选择图表。问题是，当我选择一个图表时，它会显示，但是当我想返回表格时，表格不再显示。为什么？在 JSP 文件中我已经这样做了:
require(["dojo/dom",
"dojo/on",
"dojo/request",
"dojo/dom-form",
"statsDiagramme/kurvenDiagramm",
"statsDiagramme/kreisDiagramm",
"statsDiagramme/stabDiagramm",
"statsDiagramme/tabelle",
"dojo/json",
"dojox/json/query",
"dijit/Dialog",
"dijit/form/Button",
"dojo/domReady!"],
function(dom, on, request, domForm, kurvendiagramm, kreisdiagramm, stabdiagramm, tabelle, json){
var form = dom.byId('sqlOptForm'); // Legt fest, welches Formular behandelt wird.
on(form, "submit", function(evt){ // Funktion on() behandelt das Ereignis nach Submit des Formulars
evt.stopPropagation(); // verhindert die Ausbreitung der Ereignis im DOM-Dokument
evt.preventDefault(); // blockiert die Aktionen der Ereignis, damit Daten an Servlet gesendet werden
request.post("ServletStatsSQLOPT", { // Daten werden ueber HTTP-Post an das Servlet gesendet
data: domForm.toObject("sqlOptForm"), // Daten vom Formular
handleAs: "json"
}).then(function(response){
var fehler = dojox.json.query("fehlermeldung", response);
if(fehler == ""){
if(response.datenArray.length == 0){
var dialog13a = new dijit.Dialog({
title: "Fehler",
style: "width:500px;",
content: "Für diese Abfrage liegen keine Daten vor.<p /><div class=\"buttonSchliessen\"><button data-dojo-type=\"dijit/form/Button\" type=\"submit\">Schließen</button></div>"
});
dialog13a.show();
}
else {
// Aktueller Inhalt der Divs entfernen
dojo.html._emptyNode("statsKreisDiagramm");
dojo.html._emptyNode("statsKurvenDiagramm");
dojo.html._emptyNode("statsStabDiagramm");
dojo.html._emptyNode("statsTabelleDiagramm");
dojo.html._emptyNode("legende");
//dojo.html._emptyNode("statsMenuButton");
// Statistik-Daten (response) an Module weiterleiten, um die Diagramme zu erstellen.
stabdiagramm.setStabDiagramm(response);
kreisdiagramm.setKreisDiagramm(response);
kurvendiagramm.setKurvenDiagramm(response);
tabelle.setTabelle(response);
dom.byId("statsKreisDiagramm").style.visibility = 'hidden';
dom.byId("statsKurvenDiagramm").style.visibility = 'hidden';
dom.byId("statsStabDiagramm").style.visibility = 'hidden';
dom.byId("statsTabelleDiagramm").style.visibility = 'visible';
dom.byId("statsMenuButton").style.visibility = 'visible';
dom.byId("legendeTitel").style.visibility = 'visible';
}
}
else {
// Fehlermeldung ausgegeben
var dialog13 = new dijit.Dialog({
title: "Fehler",
style: "width:500px;",
content: fehler + "<p /><div class=\"buttonSchliessen\"><button data-dojo-type=\"dijit/form/Button\" type=\"submit\">Schließen</button></div>"
});
dialog13.show(); //
}
}, function(error) {
// Dialogfenster erstellen und Fehlermeldung ausgegeben
var dialog14 = new dijit.Dialog({
title: "Fehler",
style: "width:500px;",
content: error + "<p /><div class=\"buttonSchliessen\"><button data-dojo-type=\"dijit/form/Button\" type=\"submit\">Schließen</button></div>"
});
dialog14.show();
});
});
}
);
我希望一切都清楚并且有人可以帮助我。我提前谢谢你。 爱德华多
最佳答案
当我正确理解你的意思时，你在第二次加载网格时出现了错误，对吧？
不久前我不得不面对几乎相同的问题。我的问题是小部件本身，它已经注册并阻止了网格的加载。
当你想再次调用同一个网格时，你只需要重新加载商店，这对我很有帮助。
看看:
//Checks if the widget is already registered
if(!registry.byId("GraphGrid")){
grid = new EnhancedGrid({
id: 'GraphGrid',
store: GraphicStore,
query: { ident: "*" },
structure: layout,
rowSelector: '20px',
keepSelection: false,
plugins: {
indirectSelection: {
headerSelector:false,
width:"40px",
styles:"text-align: center;"
}}
},"GridGraphicInMap");
/*Call startup() to render the grid*/
grid.startup();
//Festlegen was beim Click auf eine Reihe passieren soll
grid.on("rowClick", function(evt){
var idx = evt.rowIndex,
item = this.getItem(idx);
// get a value out of the item
var value = this.store.getValue(item, "geom");
highlightGeometry(value,true);
});
//Wenn die Checkbox selektiert wurde, wird der entsprechende Grideintrag
//gelöscht
dojo.connect(grid.selection, 'onSelected', getSelectedItems);
}
else {
//If the grid allready exists, just refresh the store
setTimeout(function(){
grid.setStore(GraphicStore);
grid.rowSelectCell.toggleAllSelection(false);
}, 500);
}
问候，米里亚姆
关于javascript - 删除DataGrid(Dojo)实例和表(DataGrid)正确显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19881341/