dijit.Tree搜索和刷新

我似乎无法弄清楚如何使用 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();
}

如何使用树实现相同的效果？谢谢 ！

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

通过商店执行搜索

但是如何搜索，使用时非常简单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 方法的查询参数所告诉的内容。在任何时候，我们都可以在存储上调用 fetch，即使没有发送 json 内容的 XHR - 带有查询参数的 fetch 可以被视为一个简单的过滤器。

让Model了解此查询。如果您这样做，它只会创建treeNodes 根据返回的结果填充树store.fetch({query:model.query});

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

// 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();

Creds http://mail.dojotoolkit.org/pipermail/dojo-interest/2010-April/045180.html;就这样，将范围限制在 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();
    }
});