在dijit中搜索树

Question

在我的一个项目中，我使用了dijit。树控制。我需要在树中添加一个搜索，并只显示那些包含搜索项的节点/叶。然而，我似乎不知道如何才能做到这一点。有人能帮我吗？

Answer 1

我不完全确定你的问题是否完整，但它应该给出提示。

让我们使用参考文档示例作为偏移，有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;

接下来，在模型上设置一个新的查询-使用中的对象混合来保留旧的查询

treeModel.query = dojo.mixin(oQuery, { name: '*'+searchByName+'*' });

最后，通知模型及其树发生了更改，并重新查询可见项。

treeModel._requeryTop();

NB如果顶层项（用于ForestModel）不可见，则不会显示其任何子元素，即使搜索字符串与这些子元素匹配。（例如，如果查询不匹配美国大陆，则不显示阿拉巴马州）

编辑

由于OP的议程是"NB"，这可能不适合100%的需求，但这是dojo通过dijit提供的。树由于在root之前重新编码模型/存储查询以包括parentbranch将是一个相当漫长的过程，因此我不会在这里这样做，但仍有一些技巧；）

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