javascript - DataGrid (Dojo) の削除インスタンスとテーブル (DataGrid) が正しく表示される

Question

私の英語でごめんなさい。私はjsp /サーブレットアプリケーションとしてWebアプリケーションをプログラミングしています。これは一種の統計ツールで、ユーザーがフォームで設定を行うと、チャートや表が表示されます。グラフ (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();     

            }
        };
});

問題は、ツールの 2 番目の実施形態ではテーブルが表示されなくなることです。エラーは次のとおりです。

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 のインスタンスが既に存在するかどうかを確認し、これを削除するにはどうすればよいですか?

2 番目の問題は、テーブルの表示に関するものです。ツールでは、ユーザーはボタンをクリックして、表示するチャートまたはテーブルを選択できます。私は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

あなたが正しく理解しているとき、グリッドを2回目にロードするとエラーになりましたよね？

少し前にほぼ同じ問題に直面しなければなりませんでした。私の問題はウィジェット自体であり、すでに登録されており、グリッドの読み込みがブロックされていました。

同じグリッドをもう一度呼び出したい場合は、ストアをリロードするだけで済みます。

見てください：

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

よろしく、ミリアム