Dojo Grid - 在可編輯和不可編輯之間切換

我有一個網格，它將根據較大的樹結構編輯小塊數據。爲了更容易知道用戶保存了什麼，我想讓用戶第一次看到網格時網格處於不可編輯狀態。當用戶準備就緒時，他們可以點擊編輯按鈕，這將使部分網格可編輯。然後，有一個保存或取消按鈕來保存更改或恢復。Dojo Grid - 在可編輯和不可編輯之間切換

它的大部分工作。但是，如果單擊編輯，請勿更改任何內容，請單擊「保存」，然後再次單擊「編輯」，不能編輯網格中的數據，並且在某些情況下會收到「ItemFileWriteStore中的斷言失敗」消息。如果點擊取消按鈕，也會發生這種情況。偶爾，單擊取消按鈕後，網格中的所有數據也會消失。

下面，我已經包含了重現我所看到的問題的最小代碼塊。有沒有人在那裏看到這個問題，並能夠解決它，或者我在我的代碼中導致這個特定問題做錯了什麼？

謝謝。

<html> 
    <head> 
    <title>Dojo Grid Test</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" type="text/javascript"></script> 

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css" /> 
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojox/grid/resources/Grid.css"> 
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojox/grid/resources/tundraGrid.css"> 

    <script> 

     dojo.require("dojo.data.ItemFileWriteStore") 
     dojo.require("dojox.grid.cells.dijit"); 
     dojo.require("dojox.grid.DataGrid"); 
     dojo.require("dojox.grid.cells"); 

     var attCodeStore = null; 
     var containerGrid = null; 

     function editTable() { 
      var theStructure = containerGrid.structure; 
      theStructure[1].editable = true; 
      theStructure[2].editable = true; 
      containerGrid.setStructure(theStructure); 
      toggleButtons(); 
     } 

     function saveTable() { 
      var theStructure = containerGrid.structure; 
      theStructure[1].editable = false; 
      theStructure[2].editable = false; 
      containerGrid.setStructure(theStructure); 
      attCodeStore.save(); 
      toggleButtons(); 
     } 

     function cancelTable() { 
      var theStructure = containerGrid.structure; 
      theStructure[1].editable = false; 
      theStructure[2].editable = false; 
      containerGrid.setStructure(theStructure); 
      attCodeStore.revert(); 
      toggleButtons(); 
     } 

     function toggleButtons() { 
      if (dojo.hasClass("editButton", "dijitHidden")) { 
       dojo.removeClass("editButton", "dijitHidden"); 
       dojo.addClass("saveButton", "dijitHidden"); 
       dojo.addClass("cancelEditButton", "dijitHidden"); 
      } else { 
       dojo.addClass("editButton", "dijitHidden"); 
       dojo.removeClass("saveButton", "dijitHidden"); 
       dojo.removeClass("cancelEditButton", "dijitHidden"); 
      } 
     } 

     function setupTable() { 

     var attCodeData = {label:'attribute', 
          identifier: 'id', 
          items: [ 
           { id:'itemOneId', 
            alias:'itemOneAlias', 
            description:'itemOneDescription', 
            attribute:'itemOneAttribute' 
           }, 
           { id:'itemTwoId', 
            alias:'itemTwoAlias', 
            description:'itemTwoDescription', 
            attribute:'itemTwoAttribute' 
           }, 
           { id:'itemThreeId', 
            alias:'itemThreeAlias', 
            description:'itemThreeDescription', 
            attribute:'itemThreeAttribute' 
           }, 
           { id:'itemFourId', 
            alias:'itemFourAlias', 
            description:'itemFourDescription', 
            attribute:'itemFourAttribute' 
           }, 
           ] 
          }; 

     attCodeStore = new dojo.data.ItemFileWriteStore({data:attCodeData}) 

     console.log(attCodeStore); 
     console.log(attCodeData); 

     containerGrid = new dojox.grid.DataGrid({ 
         store: attCodeStore, 
         clientSort: true, 
         autoHeight: true, 
         structure: [ 
          {field: 'attribute', width: '100px', name: 'Attribute'}, 
          {field: 'alias', width: '100px', name: 'Alias'}, 
          {field: 'description', width: 'auto', name: 'Description'} 
         ] 
        }); 

     dojo.byId("gridDiv").appendChild(containerGrid.domNode); 
     containerGrid.startup(); 
     } 

     dojo.addOnLoad(function(){ 
     setupTable(); 
     }) 
    </script> 
    </head> 
    <body> 
    <div id="gridArea"> 
      <div> 
       <input type="button" value="Edit" id="editButton" onclick="editTable()"/> 
       <input type="button" value="Save" id="saveButton" onclick="saveTable()" class="dijitHidden"/> 
       <input type="button" value="Cancel" id="cancelEditButton" onclick="cancelTable()" class="dijitHidden" /> 
      </div> 
     </div> 
     <div id="gridDiv"></div> 
    </body> 
</html>

來源

2010-09-13 MikeTheReader

另外值得注意的是，只要用戶編輯數據，它就可以正常工作。他們可以保存並重新編輯，並且一切正常。（我也嘗試用.isDirty（）標誌的檢查將調用包裝爲.save（）和.revert（），但這不能解決問題。） – MikeTheReader 2010-09-13 19:13:25

想出了這一個（雖然它花了一點）。原來，當你點擊可編輯網格中的一個條目時，網格進入編輯狀態。（有道理）。但是，當我在網格處於編輯狀態時保存數據存儲區時，它並未改變網格的狀態。下一次，我點擊編輯並將網格帶回到我認爲可以開始編輯的位置，網格認爲它仍在編輯之前選擇的單元格，並且只會發送單元格信息。

當我把下面的代碼在我的saveTable和cancelTable方法的開始，一切都按預期：

if (containerGrid.edit.isEditing()) { 
    containerGrid.edit.apply(); 
}

希望這個答案可以節省別人的一段時間後。

謝謝。

來源

2010-09-14 15:13:42 MikeTheReader

Dojo Grid - 在可編輯和不可編輯之間切換

回答

相關問題