2

我似乎不知道如何使用 ItemFileWriteStore 和 TreeStoreModel 在 dijit.Tree 中进行搜索。一切都是声明性的，我使用的是 Dojo 1.7.1，这是我目前所拥有的：

<input type="text" dojoType="dijit.form.TextBox" name="search_fruit" id="search_fruit" onclick="search_fruit();">
<!-- store -->
<div data-dojo-id="fruitsStore" data-dojo-type="dojo.data.ItemFileWriteStore" clearOnClose="true" urlPreventCache="true" data-dojo-props='url:"fruits_store.php"'></div>
<!-- model -->
<div data-dojo-id="fruitsModel" data-dojo-type="dijit.tree.TreeStoreModel" data-dojo-props="store:fruitsStore, query:{}"></div>
<!-- tree -->
<div id="fruitsTree" data-dojo-type="dijit.Tree"
     data-dojo-props='"class":"container",
     model:fruitsModel,
     dndController:"dijit.tree.dndSource",
     betweenThreshold:5,
     persist:true'>
</div>

fruits_store.php 返回的 json 是这样的：

{"identifier":"id",
 "label":"name",
 "items":[{"id":"OYAHQIBVbeORMfBNZXFGOHPdaRMNUdWEDRPASHSVDBSKALKIcBZQ","name":"Fruits","children":[{"id":"bSKSVDdRMRfEFNccfTZbWHSACWbLJZMTNHDVVcYGcTBDcIdKIfYQ","name":"Banana"},{"id":"JYDeLNIGPDBRMcfSTMeERZZEUUIOMNEYYcNCaCQbCMIWOMQdMEZA","name":"Citrus","children":[{"id":"KdDUfEDaKOQMFNJaYbSbAcAPFBBdLALFMIPTFaYSeCaDOFaEPbJQ","name":"Orange"},{"id":"SDWbXWbTWKNJDIfdAdJbbbRWcLZFJHdEWASYDCeFOZYdcZUXJEUQ","name":"Lemon"}]},{"id":"fUdQTEZaIeBIWCHMeBZbPdEWWIQBFbVDbNFfJXNILYeBLbWUFYeQ","name":"Common ","children":[{"id":"MBeIUKReBHbFWPDFACFGWPePcNANPVdQLBBXYaTPRXXcTYRTJLDQ","name":"Apple"}]}]}]}

使用网格而不是树，我的 search_fruit() 函数看起来像这样：

function search_fruit() {
  var grid = dijit.byId('grid_fruits');
  grid.query.search_txt = dijit.byId('search_fruit').get('value');
  grid.selection.clear();
  grid.store.close();
  grid._refresh();
}

如何使用树实现相同的目标？谢谢 ！

4

1 回答 1

2

a 的刷新dijit.Tree变得有点复杂，因为涉及到一个模型（在网格 afaik 中是内置的，网格组件实现了查询功能）

通过商店执行搜索

但是如何搜索，使用ItemFileReadStore. 语法是这样的：

myTree.model.store.fetch({
   query: {
      name: 'Oranges'
   },
   onComplete: function(items) { 
     dojo.forEach(items, function(item) { 
        console.log(myTree.model.store.getValue(item, "ID"));
     });
   }
});

仅显示搜索结果

如上所示，存储将获取，完整的有效负载放入其 _allItemsArray 并且存储查询引擎然后过滤掉它通过查询参数告诉 fetch 方法的内容。在任何时候，我们都可以在 store 上调用 fetch，即使没有为 json 内容发送 XHR - 带有查询参数的 fetch 可以被认为是一个简单的过滤器。

让知道这个查询变得稍微有趣一些Model。如果你这样做，它只会treeNode根据返回的结果创建 s 来填充树store.fetch({query:model.query});

因此，不是通过回调发送 store.fetch，而是让 _try 设置模型查询并更新树。

// seing as we are working with a multi-parent tree model (ForestTree), the query Must match a toplevel item or else nothing is shown
myTree.model.query = { name:'Fruits' };
// below method must be implemented to do so runtime
// and note, that the DnD might become invalid
myTree.update();

使用来自商店的新 xhr 请求刷新树

您需要完全按照您对商店的做法进行操作。关闭它，然后重建模型。模型包含所有TreeNodes（在它的根节点下），并且它Tree本身映射了一个需要清除的 itemarray 以避免内存泄漏。

因此，执行以下步骤将重建树 - 但是此示例没有考虑到，如果您激活了 DnD，dndSource/dndContainer 仍将引用旧 DOM，从而“保持活动”以前的 DOMNode 层次结构（隐藏的 ofc） .

通过告诉模型它的 rootNode 是UNCHECKED，它的子节点将被检查更改。一旦树完成它，这反过来将产生子层次结构_load()

关闭商店（以便商店执行新的 fetch()）。

  this.model.store.clearOnClose = true;
  this.model.store.close();

从 dijit.Tree 中完全删除每个节点

  delete this._itemNodesMap;
  this._itemNodesMap = {};
  this.rootNode.state = "UNCHECKED";
  delete this.model.root.children;
  this.model.root.children = null;

销毁小部件

  this.rootNode.destroyRecursive();

重新创建模型，（再次使用模型）

  this.model.constructor(this.model)

重建树

  this.postMixInProperties();
  this._load();

信用；这样一来，范围就在 dijit.Tree 上：

new dijit.Tree({

    // arguments
    ...
    // And additional functionality
    update : function() {
      this.model.store.clearOnClose = true;
      this.model.store.close();
      delete this._itemNodesMap;
      this._itemNodesMap = {};
      this.rootNode.state = "UNCHECKED";
      delete this.model.root.children;
      this.model.root.children = null;
      this.rootNode.destroyRecursive();
      this.model.constructor(this.model)
      this.postMixInProperties();
      this._load();
    }
});
于 2012-06-06T13:19:32.427 回答