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

Question

Я не могу понять, как искать в dijit.Tree, используя ItemFileWriteStore и TreeStoreModel. Все декларативно, я использую 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>

Json, возвращаемый fruits_store.php, выглядит так:

{"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 становится немного сложнее, так как задействована модель (которая встроена в grid afaik, компонент grid реализует функциональность запросов)

Выполнение поиска через магазин

Но как искать, это невероятно легко, используя 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, а затем хранилище queryengine отфильтровывает то, что было сказано аргументом запроса, в метод fetch. В любое время мы можем вызвать fetch в хранилище, даже не отправляя XHR для содержимого json - fetch с аргументом запроса может рассматриваться как простой фильтр.

Становится немного интереснее Model знать об этом запросе.. Если вы сделаете это, он будет только создавать treeNodes, чтобы заполнить дерево на основе возвращенных результатов из store.fetch({query:model.query});

Таким образом, вместо отправки 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-запросом из магазина

Вы должны сделать именно то, что вы делаете в отношении магазина. Закройте его, но затем восстановите модель. Модель содержит все TreeNodes (ниже его корневого узла) и Tree сам отображает итерацию, которую необходимо очистить, чтобы избежать утечки памяти.

Таким образом, выполнение следующих шагов восстановит дерево - однако этот пример не учитывает, если у вас активирован DnD, dndSource/dndContainer по-прежнему будет ссылаться на старую DOM и, таким образом, "поддерживать" предыдущую иерархию DOMNode (скрыто от),

Сообщая модели, что ее rootNode UNCHECKEDего дети будут проверены на предмет изменений. Это, в свою очередь, создаст субиерахию, как только дерево выполнит _load()

Закройте магазин (чтобы магазин сделал новую выборку ()).

  this.model.store.clearOnClose = true;
  this.model.store.close();

Полностью удалить каждый узел из дерева dijit.

  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. Дерево:

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