Question

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

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

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方法的内容。在任何时候，即使没有为json内容发送XHR，我们也可以在存储上调用fetch - 使用query参数获取可以被视为一个简单的过滤器。

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

因此，不要使用回调发送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 s（在其根节点下），Tree本身映射一个需要清除的itemarray以避免内存泄漏。

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

通过告诉模型其rootNode为UNCHECKED，将检查其子节点是否有变化。一旦树完成其_load()

，这反过来将产生子层次

关闭商店（以便商店进行新的获取（））。

  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;所有这些一起，限制在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();
    }
});

dijit.Tree搜索和刷新

1 个答案:

通过商店进行搜索

仅显示搜索结果

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