刪除DataGrid（Dojo）和表格（DataGrid）的實例正確顯示

Question

對不起我的英文。 我正在編寫一個web應用程序作爲jsp/servlet應用程序。這是一種統計工具，用戶可以在表單中進行設置，然後顯示圖表和表格。圖表（Dojo）和表格在單個JS腳本中實現。餘與道場數據網格創建的表：

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

我希望一切都很清楚，有人可以幫助我。我提前謝謝你。 Eduardo

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

問候，楊千嬅