Question

我有一个网格，可以根据更大的树结构编辑小块数据。为了更容易知道用户保存了什么，我希望当用户第一次看到网格时，网格处于不可编辑状态。当用户准备好后，他们可以单击编辑按钮，这将使网格的某些部分可编辑。然后，有一个保存或取消按钮可以保存更改或还原。

大多数情况下都有效。但是，如果单击“编辑”，请不要更改任何内容，单击“保存”，然后再次单击“编辑”，则无法编辑网格中的数据，并且在某些情况下会收到“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>

Answer 1

想出这一个（尽管花了一点时间）。事实证明，当您单击可编辑网格中的条目时，网格将进入编辑状态。（有道理。）然而，当我在网格处于编辑状态时保存数据存储时，它并没有改变网格的状态。下次我点击编辑并将网格带回到我认为可以开始编辑的位置时，网格认为它仍在编辑之前选择的单元格，并且只会发送该单元格信息。

当我将以下代码放在saveTable和cancelTable方法的开头时，所有代码都按预期工作：

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

希望这个答案可以在一段时间后拯救别人。

感谢。

Dojo Grid - 在可编辑和不可编辑之间切换

1 个答案: