Search 树搜索和刷新

我似乎不知道如何使用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>

使用网格而不是树，我的search_fruit（）函数如下所示：

{"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"}]}]}]}

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的刷新变得有点复杂，因为涉及到一个模型（在grid afaik中是内置的，grid组件实现查询功能）

通过商店执行搜索 但是如何搜索，使用

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中，存储查询引擎然后过滤掉查询参数告诉获取方法的内容。在任何时候，我们都可以调用store上的fetch，即使不发送json内容的XHR，也可以将带有查询参数的fetch视为一个简单的过滤器

让

模型

知道这个查询会稍微有趣一些。。如果您这样做，它将根据从

store.fetch（{query:model.query}）返回的结果，仅创建
treeNode
s来填充树

因此，与其发送带有回调的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请求刷新树
你需要像对待商店一样去做。关闭它，然后重建模型。模型包含所有
TreeNode
s（在其根节点下），而
树本身映射一个需要清除以避免内存泄漏的itemarray

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

通过告诉模型其根节点未选中
，将检查其子节点的更改。一旦树完成其
\u load（）

关闭存储（以便存储将执行新的fetch（）

完全删除dijit.树中的每个节点

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

销毁小部件

  this.rootNode.destroyRecursive();

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

重建这棵树

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

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

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