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

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

转载作者：塔克拉玛干更新时间：2023-11-02 20:28:50

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

在大多数情况下它是有效的。但是，如果您点击编辑，不做任何更改，点击保存，然后再次点击编辑，您将无法编辑网格中的数据，并且在某些情况下您会收到“断言在 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>

最佳答案

弄清楚了这一点(虽然花了一点时间)。事实证明，当您单击可编辑网格中的条目时，网格会进入编辑状态。 (有道理。)但是，当我在网格处于编辑状态时保存数据存储时，它并没有改变网格的状态。下次我单击编辑并将网格带回我认为可以开始编辑的位置时，网格认为它仍在编辑先前选择的单元格，并且只会发送该单元格信息。

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

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

希望这个答案可以在以后拯救其他人。

谢谢。

关于javascript - Dojo Grid - 在可编辑和不可编辑之间切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3703573/

文章推荐： javascript - 动态更改表单操作 URL 无效

文章推荐： iOS 12.0 Safari - 滚动时图像失真

文章推荐： ios - ionic native 存储在 iOS 上不起作用

python - 不可 JSON 序列化的项目的管道
我正在尝试将抓取的 xml 输出写入 json。由于项目不可序列化，抓取失败。从这个问题来看，它建议您需要构建一个管道，未提供的答案超出了问题 SO scrapy serializer 的范围。所
c++ - 参数的重载函数(不可)在编译时推导
有没有一种方法可以通过重载函数来区分参数是在编译时可评估还是仅在运行时可评估？假设我有以下功能: std::string lookup(int x) { return table::va
wpf - 为什么 CompositeCollection 不可 Freezable？
我正在使用 MVVM 模式编写一个应用程序。我通过将 View 的 DataContext 属性设置为 ViewModel 的实例来向 View 提供数据。一般来说，我只是从那里使用 Binding
python - 字节串怎样才能很好的存储呢？ - 不可 JSON 序列化 -
对于一个项目，我正在使用带有简单 python module 的传感器收集多个红外命令。 . 我收到如下字节字符串: commando1= b'7g4770CQfwCTVT9bQDAzVEBMagGR
python - Decimal 不可 JSON 序列化
我有一个计算方法，可以在用户使用 Cartridge 作为我的商店框架结账时计算税费。税 = 税 * 小数(str(settings.SHOP_DEFAULT_TAX_RATE)) 计算工作正常。然
python - pickle 不可 pickle 的对象
我正在用 pygame 制作一个绘图程序，我想在其中为用户提供一个选项来保存程序的确切状态，然后在稍后重新加载它。在这一点上，我保存了我的全局字典的副本，然后遍历， pickle 每个对象。 pyga
c++ - 使类不可复制*和*不可 move
在 C++11 之前，我可以使用它来使类不可复制: private: MyClass(const MyClass&); MyClass& operator=(const MyClass&); 使用 C
c++ - LinearHashTable iter 不可取消引用且 iter 不可
大家好 :) 我在我的 VC++ 项目中使用 1.5.4-all (2014-10-22)(适用于 x86 平台的 Microsoft Visual C++ 编译器 18.00.21005.1)。我
python - TypeError : array([ 0.]) 不可 JSON 序列化
我有一个 python 文件:analysis.py: def svm_analyze_AHE(file_name): # obtain abp file testdata = pd.
python - 不可 JSON 序列化 - Python + Flask + Sqlalchemy
这个问题已经有答案了: How to serialize SqlAlchemy result to JSON? (37 个回答) 已关闭 4 年前。我正在编写小查询来从 mysql 获取数据数据库，
python - TypeError : {1, 3} 不可 JSON 序列化
我是 Python 初学者，我在 JSON 方面遇到了一些问题。在我正在使用的教程中有两个函数: def read_json(filename): data = [] if os.pa
javascript - 如何使 HTML 元素在 iPad 上**不可**旋转？
我目前正在开发一个针对 iPad 的基于 HTML5 Canvas/JavaScript 的小型绘图应用程序。它在 Safari 中运行。到目前为止，除了一件事之外，一切都进展顺利。如果我旋转设备，
c++ - 不可 move -不可复制对象的 vector 的 move 分配不编译
以下代码无法使用 Visual Studio 2013 编译: #include struct X { X() = default; X(const X&) = delete;
python - TypeError : array( ['cycling' ], dtype=object) 不可 JSON 序列化
嗨，我制作了一个文本分类分类器，我在其中使用了它，它返回一个数组，我想返回 jsonresponse，但最后一行代码给我错误 'array(['cycling'], dtype =object) 不可
python - TypeError : sqlalchemy. orm.attributes.InstrumentedAttribute 对象位于 0x7f86789f9bf8 不可 JSON 序列化
我使用 Flask 和 Flask-Login 进行用户身份验证。 Flask-Sqlalchemy 将这些模型存储在 sqlite 数据库中: ROLE_USER = 0 ROLE_ADMIN =
python - 如何将 Python 对象(不可 JSON 序列化)从一个 (AWS) lambda 函数传递到另一个？
如果您尝试发送不可 JSON 序列化的对象(列表、字典、整数等以外的任何对象)，您会收到以下错误消息: "errorMessage": "Object of type set is not JSON
c++ - 如果 T 不可 move ，则 std::vector 是否可 move ？
我在尝试 move std::vector 时遇到崩溃其中 T显然是不可 move 的(没有定义 move 构造函数/赋值运算符，它包含内部指针) 但为什么 vector 的 move 函数要调用 T
python - jwt.encode 失败，显示 "Object of type ' 字节“不可 JSON 序列化”
我尝试在用户成功登录后将 token 返回给他们，但不断收到以下错误: 类型错误:“字节”类型的对象不可 JSON 序列化我该如何解决这个问题？这是我到目前为止的代码: if user:

塔克拉玛干

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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