dijit.Tree搜索和刷新 [英] dijit.Tree search and refresh
问题描述
我似乎无法弄清楚如何在dijit.Tree中使用ItemFileWriteStore和TreeStoreModel进行搜索。一切都是声明性的，我使用的是Dojo 1.7.1，这里是我到目前为止：
I can't seem to figure out how to search in a dijit.Tree, using a ItemFileWriteStore and a TreeStoreModel. Everything is declarative, I am using Dojo 1.7.1, here is what I have so far :
<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是这样的：
The json returned by fruits_store.php is like this :
{"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（）函数将如下所示：
Using a grid instead of a tree, my search_fruit() function would look like this :
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();
}
如何使用树实现相同？谢谢！
How to achieve the same using the tree ? Thanks !
推荐答案
刷新一个 dijit.Tree 变得有点更复杂，因为有一个模型（在网格afaik被内置，网格组件实现查询功能）
The refreshing of a dijit.Tree becomes a little more complicated, since there is a model involved (which in grid afaik is inbuilt, the grid component implements query functionality)
但是使用 ItemFileReadStore 时，如何搜索，令人难以置信。语法是这样的：
But how to search, thats incredibly easy whilst using the ItemFileReadStore. Syntax is as such:
myTree.model.store.fetch({
query: {
name: 'Oranges'
},
onComplete: function(items) {
dojo.forEach(items, function(item) {
console.log(myTree.model.store.getValue(item, "ID"));
});
}
});
仅显示搜索结果
如图所示上面，商店将获取，全部有效载荷被放入其_allItemsArray中，然后商店queryengine过滤掉查询参数对fetch方法所说的内容。在任何时候，我们都可以在商店中调用fetch，即使没有发送XHR用于json内容 - 使用查询参数获取可以被视为一个简单的过滤器。
Displaying search results only
As shown above, the store will fetch, the full payload is put into its _allItemsArray and the store queryengine then filters out what its told by query argument to the fetch method. At any time, we could call fetch on store, even without sending an XHR for json contents - fetch with query argument can be considered as a simple filter.
它变得稍微更有趣的是让模型知道这个查询..如果这样做，它将只创建 treeNode s根据 store.fetch（{query：model.query}））的返回结果填写树;
It becomes slightly more interesting to let the Model know about this query.. If you do so, it will only create treeNodes to fill the tree, based on the returned results from store.fetch({query:model.query});
所以，而不是发送具有回调的store.fetch，让_try设置模型查询并更新树。
So, instead of sending store.fetch with a callback, lets _try to set model query and update the tree.
// 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 本身映射需要的项目清除以避免内存泄漏。
Refreshing tree with new xhr-request from store
You need to do exactly as you do with regards to the store. Close it but then rebuild the model. Model contains all the TreeNodes (beneath its root-node) and the Tree itself maps an itemarray which needs to be cleared to avoid memory leakage.
因此，执行以下步骤将重建树 - 但是，如果您已经激活了DnD，则该示例不会被占用，dndSource / dndContainer仍将引用旧的DOM，从而保持活动之前的DOMNode hierachy（隐藏的c）。
So, performing following steps will rebuild the tree - however this sample does not take in account, if you have DnD activated, the dndSource/dndContainer will still reference the old DOM and thereby 'keep-alive' the previous DOMNode hierachy (hidden ofc).
通过告诉模型，它的根节点是 UNCHECKED ，将检查其孩子的变化。一旦树已经完成了 _load（）
By telling the model that its rootNode is UNCHECKED, the children of it will be checked for changes. This in turn will produce the subhierachy once the tree has done its _load()
关闭商店（这样就可以了）商店会做一个新的fetch（））。
Close the store (So that the store will do a new fetch()).
this.model.store.clearOnClose = true;
this.model.store.close();
完全删除dijit.Tree中的每个节点
Completely delete every node from the dijit.Tree
delete this._itemNodesMap;
this._itemNodesMap = {};
this.rootNode.state = "UNCHECKED";
delete this.model.root.children;
this.model.root.children = null;
销毁小部件
this.rootNode.destroyRecursive();
重新创建模型（再次使用模型）
Recreate the model, (with the model again)
this.model.constructor(this.model)
重建树
this.postMixInProperties();
this._load();
Creds ;所有这些都在一起，范围在dijit.Tree：
Creds; All together as such, scoped onto the 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搜索和刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
