Вопрос по search, dojo, dijit.tree – поиск и обновление дерева

2

Кажется, я не могу понять, как искать в дереве dijit. Используя 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();
}

Как добиться того же, используя дерево? Спасибо !

Ваш Ответ

1   ответ
2

Освежающийdijit.Tree становится немного сложнее, так как задействована модель (которая встроена в grid afaik, компонент grid реализует функциональность запросов)

Performing search via store

Но как искать, это невероятно легко, используяItemFileReadStore, Синтаксис таков:

myTree.model.store.fetch({
   query: {
      name: 'Oranges'
   },
   onComplete: function(items) { 
     dojo.forEach(items, function(item) { 
        console.log(myTree.model.store.getValue(item, "ID"));
     });
   }
});
Displaying search results only

Как показано выше, хранилище будет извлекаться, вся полезная нагрузка помещается в его _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(); 
Refreshing tree with new xhr-request from store

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

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

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

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

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

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

  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:

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();
    }
});
офигенно, спасибо, что поделились этим!

Похожие вопросы