删除数据网格 (Dojo） 和表 (数据网格） 的实例正确显示
Delete instance of DataGrid (Dojo) and table (DataGrid) show correctly
对不起我的英语。我正在将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({…. });
可能是因为数据网格的实例已经存在。我对传说也有同样的问题。然后我修复了：
var legend = dijit.byId("legende");
if (legend) {
legend.destroyRecursive(true);
}
var legend = new dojox.charting.widget.Legend({ chart: kreisDiag1, horizontal: false }, "legende");
这不适用于数据网格。我知道您可以动态更改 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);
}
问候，米里亚姆
相关文章：
- 剑道网格jQuery动画(）问题
- 使用Dnamics CRM 2011中的JavaScript读取子网格的所有记录，而不考虑活动页面
- 我可以更改剑道UI网格吗's的外键值
- jqGrid树网格问题
- 在Three.js中导出网格会提高性能吗
- 如何在剑道网格初始化后设置pageSizes
- 在threejs中使用纹理网格和线框网格
- 如何在可分组的剑道网格中设置空数据文本
- 如何在Angular UI网格中选择下一行
- ExtJS网格单元格编辑器，防止焦点松动问题
- 多维数据集网格未在指定的分区中绘制
- 光线投射从内部投射时不会碰到网格
- 使用javascript在MVC中查找网格长度时出错
- 如何刷新AngularJs剑道网格
- 使用导航属性创建Kendo UI网格模型的问题
- ui网格将单元格显示为选择标记
- ui网格日期单元格过滤器，过滤日期格式导致显示错误的日期
- 使用按钮的Angular UI网格过滤器
- 如何在master中调用细节网格作为单击事件
- ui网格:在自定义表头模板中触发排序
