删除 DataGrid (Dojo) 和表 (DataGrid) 的实例正确显示

Question

对不起我的英语。 我正在将 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&uuml;r diese Abfrage liegen keine Daten vor.<p /><div class=\"buttonSchliessen\"><button data-dojo-type=\"dijit/form/Button\" type=\"submit\">Schlie&szlig;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&szlig;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&szlig;en</button></div>" 
                        });
                        dialog14.show();
                    });
                });
            }
        );

我希望一切都清楚，有人可以帮助我。我提前谢谢你。 爱德华多

Answer 1

当我正确理解您时，您在第二次加载网格时会出错，对吗？

不久前我不得不面对几乎相同的问题。我的问题是小部件本身，它已经注册并阻止了网格的加载。

当你想第二次调用同一个网格时，你只需要重新加载商店，这对我有帮助。

看看：

//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);
                }

问候，米里亚姆