如何通过 JS 访问在 HTML 中声明的 Dojo DataGrid？

Posted 2023-02-16

【中文标题】如何通过 JS 访问在 HTML 中声明的 Dojo DataGrid？

【英文标题】：how to access via JS a Dojo DataGrid declared in HTML?

【发布时间】：2011-12-27 21:49:31

【问题描述】：

我的 html 中定义了一个 Dojo DataGrid：

<table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="mainTable">
  <thead>
    <tr>
      <th field="id" >id</th>
      <th field="foo" >foo</th>
      <th field="bar" >bar</th>
      <th field="baz" >baz</th>
    </tr>
  </thead>
</table>

我有一个 javascript 函数，它试图获取这个 DataGrid 的句柄并为其分配一个模型：

[...]

mainTable.setStore(new dojo.data.ItemFileWriteStore( data : data ));

[...]

根据Dojo docs，添加 data-dojo-id 标记会生成“将创建一个保存网格对象的 JavaScript 变量。然后可以在脚本中引用它。”但我的 Chromium JS 控制台抱怨“'mainTable' 未定义”。那么这个变量是什么时候创建的，我必须做什么才能访问它？

【问题讨论】：

你在 dojo.ready 块中调用你的 mainTable.setStore 吗？你在使用 parseOnLoad:true 吗？如果没有，您是否调用了解析器？

【参考方案1】：

您在 declaritave 标记中设置的 id 值是文档对象中 domNode 的 id。然后，您尝试运行的 javascript 正在查找该名称的全局变量，该名称与 DOM 中的节点名称完全不同。

有两种方法可以做到这一点。一种是将jsId="something" 声明为声明性标记的一部分。这将导致 dijit 创建对小部件实例的引用作为名称为 something 的全局变量。这可以与您的 DOM 节点 ID 同名，因为它们位于不同的命名空间中（文档对象与全局 javascript 命名空间）。

另一种方法是在你的 javascript 中使用查找函数通过它的 DOM 节点 ID 来查找 javascript 对象，如下所示：

var mainTable = dijit.byId("mainTable");
mainTable.setStore(...);

【讨论】：

如果 dojo-data-id 只是简单地设置一个 domNode 的 id，那么我想我看不到它的需要 - 为什么我不能直接用 id="mainTable" 设置 id？无论如何，我都尝试过添加jsId 属性和调用dijit.byId()，但都不起作用；我现在收到一条不同的错误消息，“无法调用未定义的方法 'setStore'”。

【参考方案2】：

data-dojo-id 用于声明商店，而不是小部件。然后，这将创建一个名称为 data-dojo-id 中指定名称的全局变量，您可以从 javascript 中引用它。