如何将 dojo (dojo 0.x) FilteringTable 迁移到 (dojo 1.6) 中的 DataGrid？

Posted 2023-02-16

【中文标题】如何将 dojo (dojo 0.x) FilteringTable 迁移到 (dojo 1.6) 中的 DataGrid？

【英文标题】：How to migrate a dojo (dojo 0.x) FilteringTable to a DataGrid in (dojo 1.6)?

【发布时间】：2011-05-02 09:45:39

【问题描述】：

我正在迁移和扩展基于非常旧的 Dojo 框架的现有 Web 应用程序。

表的声明式设置：

旧

<table dojoType="FilteringTable" id="dataTable" 
valueField="f_id" multiple="false" alternateRows="true">
  <thead><tr>
    <th field="f_fname">Firstname</th>
    <th field="f_lname">Lastname</th>
  </tr></thead>
</table>

新

<table dojoType="dojox.grid.DataGrid" id="dataTable">
  <thead><tr>
    <th field="f_fname">Firstname</th>
    <th field="f_lname">Lastname</th>
  </tr></thead>
</table>

初始化表格存储：

旧

var tab = dojo.widget.byId("dataTable");
if(tab)
  tab.store.setData([]);

新

var tab = dijit.byId("dataTable");
if(tab)
  if(!tab.store)
    tab.store = new dojo.store.Memory(data:[]);
  
  else
    tab.store.setData([]);
  

刷新数据：

旧/新

tab.store.setData(result.array);

旧版本表填满了数据，新版本表保持为空。 两种情况下检索到的Data数组完全相同。

所以我想知道旧 FilteringTable 中使用的 store 和新 dojox DataGrid 中使用的 store api 之间应该解决哪些差异。

由于我通常是使用数据存储的新手，因此我可能会遗漏一些关键部分。

从视觉上看，新的网格似乎功能齐全。

更新

tab.update(); // tab = dojox.grid.DataGrid

不会使视觉部分保持最新。 当存储数据发生变化时，DataGrid 是否应该更新，或者是否需要一些手动操作？

事实上，DataGrid 似乎根本不会对 Memory-Store 中的更改做出反应。也许这里缺少一些接线？

更新

我一直在以声明方式使用内存存储连接网格：

<div dojoType="dojo.store.Memory" jsId="memStore"></div>
<table dojoType="dojox.grid.DataGrid" id="dataTable" store="memStore">
  <thead><tr>
    <th field="f_fname">Firstname</th>
    <th field="f_lname">Lastname</th>
  </tr></thead>
</table>

我得到的第一件事是 DataGrid.js 中的 _setStore() 中出现错误：

this.store.getFeatures is not a function

。 DataGrid 是否可能与所有商店不兼容？ 我的印象是 store api 是在 1.6 中标准化的。

如果是这样，是否有可用于 javascript 数组输入的替代存储。 （如上所示）

【问题讨论】：

在我看来，DataGrid 只支持 dojo.data.ItemFileRead/WriteStore 作为有效存储。有人可以支持或反驳这种说法吗？

【参考方案1】：

另一个论坛（Millennium）上的友好海报为我提供了答案：

从 Dojo 1.6 开始，Dojo 中的商店有了新的访问方案。

由于 dojox.grid.DataGrid 不直接支持这些存储，因此在 dojo.data 中提供了一个名为 dojo.data.ObjectStore 的包装类。

因此，为了让我的内存存储能够正常工作，需要使用以下命令对其进行初始化：

var tab = dijit.byId("dataTable");
if(tab)
  if(!tab.store || !tab.store.objectStore)
    tab.store = new dojo.data.ObjectStore(
                    objectStore : new dojo.store.Memory(data:[])
                );
  
  else
    tab.store.objectStore.setData([]);
  

并更新为：

tab.store.objectStore.setData(result.array);

不过目前还有一点不足： Grid 不会自动更新其数据，而只会在对列进行排序后更新。 使用 tab.update() 不起作用。

更新

当使用 objectStore.put() 或 objectStore.setData() 更改数据时，我现在使用 Grid 的 _refresh() 函数。 虽然它是一个私有函数，但我仍然没有更好的方法来更新 Grid。