Dojo 在dijit.Tree中搜索
在我的一个项目中,我使用了dijit.Tree控件。我需要在树中添加一个搜索,只显示那些包含搜索词的节点/叶。然而,我似乎不知道如何才能做到这一点。有人能帮我吗?我不完全确定你的问题是否完全正确,但它应该能提示你该走了 让我们使用参考文档示例作为偏移量,有1个存储2个模型和3个树Dojo 在dijit.Tree中搜索,dojo,dijit.tree,Dojo,Dijit.tree,在我的一个项目中,我使用了dijit.Tree控件。我需要在树中添加一个搜索,只显示那些包含搜索词的节点/叶。然而,我似乎不知道如何才能做到这一点。有人能帮我吗?我不完全确定你的问题是否完全正确,但它应该能提示你该走了 让我们使用参考文档示例作为偏移量,有1个存储2个模型和3个树 var store = new ItemFileReadStore({ url: "{{dataUrl}}/dijit/tests/_data/countries.json" });
var store = new ItemFileReadStore({
url: "{{dataUrl}}/dijit/tests/_data/countries.json"
});
var treeModel = new ForestStoreModel({
store: store,
query: {"type": "continent"}, // note, this bit
rootId: "root",
rootLabel: "Continents",
childrenAttrs: ["children"]
});
new Tree({
model: treeModel
}, "treeOne");
对上述内容进行解释;您已经加载了所有已知的国家和大陆,但“用户”选择仅通过使用模型上的查询来显示大陆,然后层次结构以树结构表示
你想要一个具有搜索能力的文本框,所以我们将钩住onChange
new dijit.form.TextBox({
onChange: function() {
...
}
});
第一位,获取变量
var searchByName = this.get("value");
var oQuery = treeModel.query;
接下来,在模型上设置一个新查询-使用对象mixin保留旧查询
treeModel.query = dojo.mixin(oQuery, { name: '*'+searchByName+'*' });
最后,通知模型及其树已发生更改,并重新查询可见项
treeModel._requeryTop();
注意:如果ForestModel的顶级项不可见,则其所有子元素都不会显示,即使搜索字符串与这些子元素匹配。例如,如果查询不匹配美国大陆,则不显示阿拉巴马州
编辑
由于OP的议程是按“NB”进行的,这可能不适合100%的需求,但这是dojo通过dijit.Tree提供的。。由于重新编码模型/存储查询以包含parentbranchs将需要相当长的过程,直到root,所以我在这里不做这件事,但仍然有一些技巧
var tree = new dijit.Tree( {
/**
* Since TreeNode has a getParent() method, this abstraction could be useful
* It sets the dijit.reqistry id into the item-data, so one l8r can get parent items
* which otherwise only can be found by iterating everything in store, looking for item in the parent.children
*
*/
onLoad : function() {
this.forAllNodes(function(node) {
// TreeNode.item <-- > store.items hookup
node.item._NID = node.domNode.id
});
},
/* recursive iteration over TreeNode's
* Carefull, not to make (too many) recursive calls in the callback function..
* fun_ptr : function(TreeNode) { ... }
*/
forAllNodes : function(parentTreeNode, fun_ptr) {
parentTreeNode.getChildren().forEach(function(n) {
fun_ptr(n);
if(n.item.children) {
n.tree.forAllNodes(fun_ptr);
}
})
}
});
未经测试,但可能只起作用示例:
// var 'tree' is your tree, extended with
tree.forAllNodes = function(parentTreeNode, fun_ptr) {
parentTreeNode.getChildren().forEach(function(n) {
fun_ptr(n);
if(n.item.children) {
n.tree.forAllNodes(fun_ptr);
}
})
};
// before anything, but the 'match-all' query, run this once
tree.forAllNodes(tree.rootNode, function(node) {
// TreeNode.item <-- > store.items hookup
node.item._NID = node.domNode.id
});
// hopefully, this in end contains top-level items
var branchesToShow = []
// run fetch every search (TextBox.onChange) with value in query
tree.model.store.fetch(query:{name:'Abc*'}, onComplete(function(items) {
var TreeNode = null;
dojo.forEach(items, function(item) {
TreeNode = dijit.byId(item._NID+'');
while(TreeNode.getParent()
&& typeof TreeNode.getParent().item._RI == 'undefined') {
TreeNode = TreeNode.getParent();
}
branchesToShow.push(TreeNode.item);
});
}});
// Now... If a success, try updating the model via following
tree.model.onChildrenChange(tree.model.root, branchesToShow);
我不完全确定你的问题是否完全正确,但它应该给你一个暗示 让我们使用参考文档示例作为偏移量,有1个存储2个模型和3个树
var store = new ItemFileReadStore({
url: "{{dataUrl}}/dijit/tests/_data/countries.json"
});
var treeModel = new ForestStoreModel({
store: store,
query: {"type": "continent"}, // note, this bit
rootId: "root",
rootLabel: "Continents",
childrenAttrs: ["children"]
});
new Tree({
model: treeModel
}, "treeOne");
对上述内容进行解释;您已经加载了所有已知的国家和大陆,但“用户”选择仅通过使用模型上的查询来显示大陆,然后层次结构以树结构表示
你想要一个具有搜索能力的文本框,所以我们将钩住onChange
new dijit.form.TextBox({
onChange: function() {
...
}
});
第一位,获取变量
var searchByName = this.get("value");
var oQuery = treeModel.query;
接下来,在模型上设置一个新查询-使用对象mixin保留旧查询
treeModel.query = dojo.mixin(oQuery, { name: '*'+searchByName+'*' });
最后,通知模型及其树已发生更改,并重新查询可见项
treeModel._requeryTop();
注意:如果ForestModel的顶级项不可见,则其所有子元素都不会显示,即使搜索字符串与这些子元素匹配。例如,如果查询不匹配美国大陆,则不显示阿拉巴马州
编辑
由于OP的议程是按“NB”进行的,这可能不适合100%的需求,但这是dojo通过dijit.Tree提供的。。由于重新编码模型/存储查询以包含parentbranchs将需要相当长的过程,直到root,所以我在这里不做这件事,但仍然有一些技巧
var tree = new dijit.Tree( {
/**
* Since TreeNode has a getParent() method, this abstraction could be useful
* It sets the dijit.reqistry id into the item-data, so one l8r can get parent items
* which otherwise only can be found by iterating everything in store, looking for item in the parent.children
*
*/
onLoad : function() {
this.forAllNodes(function(node) {
// TreeNode.item <-- > store.items hookup
node.item._NID = node.domNode.id
});
},
/* recursive iteration over TreeNode's
* Carefull, not to make (too many) recursive calls in the callback function..
* fun_ptr : function(TreeNode) { ... }
*/
forAllNodes : function(parentTreeNode, fun_ptr) {
parentTreeNode.getChildren().forEach(function(n) {
fun_ptr(n);
if(n.item.children) {
n.tree.forAllNodes(fun_ptr);
}
})
}
});
未经测试,但可能只起作用示例:
// var 'tree' is your tree, extended with
tree.forAllNodes = function(parentTreeNode, fun_ptr) {
parentTreeNode.getChildren().forEach(function(n) {
fun_ptr(n);
if(n.item.children) {
n.tree.forAllNodes(fun_ptr);
}
})
};
// before anything, but the 'match-all' query, run this once
tree.forAllNodes(tree.rootNode, function(node) {
// TreeNode.item <-- > store.items hookup
node.item._NID = node.domNode.id
});
// hopefully, this in end contains top-level items
var branchesToShow = []
// run fetch every search (TextBox.onChange) with value in query
tree.model.store.fetch(query:{name:'Abc*'}, onComplete(function(items) {
var TreeNode = null;
dojo.forEach(items, function(item) {
TreeNode = dijit.byId(item._NID+'');
while(TreeNode.getParent()
&& typeof TreeNode.getParent().item._RI == 'undefined') {
TreeNode = TreeNode.getParent();
}
branchesToShow.push(TreeNode.item);
});
}});
// Now... If a success, try updating the model via following
tree.model.onChildrenChange(tree.model.root, branchesToShow);
你好,谢谢你的帮助!情况是,在树模型的原始定义中,我有查询:{type:parent},而在搜索时,我需要根据节点和叶的名称获取查询。在当前情况下,当我按叶名称搜索时,它不会返回任何节点。存储查询本身将返回结果。。仅此而已,树无法显示它们,因为它们的叶子分支已被“切断”,即更高级别的项值与查询不匹配。您需要查询存储,然后手动迭代子节点以设置完整的分支visible/hiddenit将变得相当混乱。。。模型没有双重链接项目,所以孩子们不知道他们的父母是谁。所以,这基本上是不可能的?没有什么是不可能的:p但尽管如此,我建议使用同一个存储设置一个FilteringSelect输入字段-然后花3-4个小时加上编码实现。或者使store.fetch{query:{namebasedonly:'??'},onComplete:functionitems{items…ids…tree…nodes..在项匹配时切换高亮显示CSS};功能您好,谢谢您的帮助!情况是,在树模型的原始定义中,我有查询:{type:parent},而在搜索时,我需要根据节点和叶的名称获取查询。在当前情况下,当我按叶名称搜索时,它不会返回任何节点。存储查询本身将返回结果。。仅此而已,树无法显示它们,因为它们的叶子分支已被“切断”,即更高级别的项值与查询不匹配。您需要查询存储,然后手动迭代子节点以设置完整的分支visible/hiddenit将变得相当混乱。。。模型没有双重链接项目,所以孩子们不知道他们的父母是谁。所以,这基本上是不可能的?没有什么是不可能的:p但尽管如此,我建议使用同一个存储设置一个FilteringSelect输入字段-然后花3-4个小时加上编码实现。或生成store.fetch{query:{namebasedonly:'??',onComplete:functionitems{items…ids…tree…nodes..在项匹配时切换高亮显示CSS } }; 功能