迪吉特.树搜索和刷新

Question

我似乎不知道如何在 dijit 中搜索。树，使用 ItemFileWriteStore 和 TreeStoreModel。一切都是声明性的，我使用的是 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();
}

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

Answer 1

刷新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 方法的内容。在任何时候，我们都可以调用 fetch on store，即使不发送 json 内容的 XHR - 带有查询参数的 fetch 可以被视为一个简单的过滤器。

让Model知道这个查询会变得更有趣一些。如果这样做，它只会根据返回的结果创建treeNode来填充树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 请求刷新树

您需要完全按照商店的方式进行操作。关闭它，然后重新生成模型。模型包含所有TreeNode（在其根节点下），Tree本身映射一个需要清除以避免内存泄漏的项数组。

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

通过告诉模型它的根节点是UNCHECKED的，将检查它的子节点是否有变化。这反过来又会在树完成其_load()后产生子层次结构

关闭存储（

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

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

从 dijit 中完全删除每个节点。树

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

信誉;所有这一切就这样，范围都放在了第吉特上。树：

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