Dijit Tree фильтрация и поиск не работают на ObjectStoreModel

Question

Я создал диджитное дерево и текстовое поле и хочу отфильтровать узлы дерева по ключевым словам, предоставленным в текстовом поле. Я реализовал решение, представленное в другом вопросе, но, похоже, оно не работает. Когда пользователь вводит какое-либо слово в текстовое поле, дерево повторно заполняется теми же данными.

dijit.Tree поиска и обновления

Ниже приведен мой код:

require(["dijit/form/TextBox","dojo/store/Memory","dijit/tree/ObjectStoreModel","dijit/Tree","dojo/domReady!"],     function(TextBox, MemoryStore, ObjectStoreModel, Tree) {

var searchBox = new TextBox({
    placeHolder: "[  Type here to search  ]"
}, "searchBox");

searchBox.on("blur", function() {
    tree.model.store.query({
        name: "*" + searchBox.value + "*"
    });

 /*the below approach has been taken from the other question*/
    tree.model.store.clearOnClose = true;
    /*tree.model.store.close(); //This is not working?*/
    delete tree._itemNodesMap;
    tree._itemNodesMap = {};
    tree.rootNode.state = "UNCHECKED";
    delete tree.model.root.children;
    tree.model.root.children = null;
    tree.rootNode.destroyRecursive();
    tree.model.constructor(tree.model)
    tree.postMixInProperties();
    tree._load();

});

var store = new MemoryStore({
    idProperty: "id",
    getChildren: function(object) {
        return this.query({
            parent: object.id
        });
    },
    data: [{
        id: "0",
        name: "Root Node",
        parent: null
    }, {
        id: "1",
        name: "File",
        parent: "0"
    }, {
        id: "2",
        name: "System",
        parent: "0"
    }, {
        id: "3",
        name: "Diagnosis",
        parent: "0"
    }, {
        id: "4",
        name: "Management",
        parent: "0"
    }]
});

var model = new ObjectStoreModel({
    store: store,
    query: {
        id: "0"
    }
});

var tree = new Tree({
    model: model,
    showRoot: false
}, "treeDiv");

tree.startup();

});

Смотрите пример кода на JSFIDDLE: http://jsfiddle.net/xLfdhnrf/16/

Дерево и текстовое поле рендеринга нормально, только поиск не работает, какие-либо предложения? Кроме того, почему знак EXPAND (+) отображается с листовыми узлами?

Answer 1

Я добавил пользовательское свойство к данным модели. Это называется keep и он отвечает за фильтрацию. Каждый элемент данных имеет это свойство. Если keep является true элемент будет виден. если keep является false предмет будет спрятан.
Когда вход размывается, keep обновляется и дерево воссоздается.
Чтобы сохранить древовидную структуру, если элемент соответствует тексту, мы рекурсивно помечаем все его родительские элементы как keep, даже если они не совпадают (иначе вы не увидите сам элемент)
Я прокомментировал некоторые ненужные строки для воссоздания дерева.

Как видите, keep используется в

    getChildren: function(object) {
        return this.query({
            parent: object.id,
            keep: true
        });
    },

Вот как дерево фильтруется.

Я создал метод mayHaveChildren в модели. Если этот метод вернуть true у вас есть расширяемый узел. Если он вернется false у вас нормальный узел. См. http://dojotoolkit.org/reference-guide/1.10/dijit/tree/Model.html для получения подробной информации.
mayHaveChildren возвращаемое значение основано на запросе магазина.

Наконец, я использовал регулярное выражение вместо простой строки, поэтому совпадение не чувствительно к регистру.

require(["dijit/form/TextBox", "dojo/store/Memory", "dijit/tree/ObjectStoreModel", "dijit/Tree", "dojo/domReady!"], function(TextBox, MemoryStore, ObjectStoreModel, Tree) {
    var searchBox = new TextBox({
        placeHolder: "[  Type here to search  ]"
    }, "searchBox");
    searchBox.on("blur", function() {
        var includeParent = function(itemId) {
          tree.model.store.query({
            id: itemId
          }).forEach(function(item) {
            item.keep = true;
            //and we include all parent tree
            includeParent(item.parent);
        });
        }
      
        //reset all node, first we exlude them all
        tree.model.store.query().forEach(function(item) {
          item.keep = false;
        });
        //then we include only the one matching
        tree.model.store.query({
           name: new RegExp('.*' + searchBox.value + '.*', 'i')
        }).forEach(function(item) {
          item.keep = true;
          //and we include all parent tree
          includeParent(item.parent);
        });
        

        //delete tree._itemNodesMap;
        //tree._itemNodesMap = {};
        //tree.rootNode.state = "UNCHECKED";
        //delete tree.model.root.children;
        //tree.model.root.children = null;
        tree.rootNode.destroyRecursive();
        tree.model.constructor(tree.model)
        tree.postMixInProperties();
        tree._load();
    });

    var store = new MemoryStore({
        idProperty: "id",
        getChildren: function(object) {
            return this.query({
                parent: object.id,
                keep: true
            });
        },
        data: [{
            id: "0",
            name: "Root Node",
            parent: null,
            keep: true
        }, {
            id: "1",
            name: "File",
            parent: "0",
            keep: true
        }, {
            id: "2",
            name: "System",
            parent: "0",
            keep: true
        }, {
            id: "3",
            name: "Diagnosis",
            parent: "0",
            keep: true
        }, {
            id: "4",
            name: "Management",
            parent: "0",
            keep: true
        },
        {
            id: "5",
            name: "New",
            parent: "1",
            keep: true
        },
        {
            id: "6",
            name: "Open",
            parent: "1",
            keep: true
        },
        {
            id: "7",
            name: "Import",
            parent: "1",
            keep: true
        }]
    });

    var model = new ObjectStoreModel({
        store: store,
        query: {
            id: "0"
        },
        mayHaveChildren: function (item) { return store.query({parent: item.id}).length > 0; }
    });

    var tree = new Tree({
        model: model,
        showRoot: false
    }, "treeDiv");

    tree.startup();

});

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css">


<body class="claro">
<div id="searchBox"></div>
<div id="treeDiv"></div>        
</div>