2

ItemFileWriteStore と TreeStoreModel を使用して、dijit.Tree を検索する方法がわかりません。すべてが宣言型です。私は 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>

fruit_store.php によって返される json は次のようになります。

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

ツリーを使用して同じことを達成する方法は? ありがとう ！

4

1 に答える 1

2

dijit.Tree関与するモデルがあるため、 a の更新はもう少し複雑になります (グリッド afaik に組み込まれているため、グリッド コンポーネントはクエリ機能を実装します) 。

ストア経由で検索する

しかし、検索方法は、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 に入れられ、ストア クエリエンジンが、クエリ引数によってフェッチ メソッドに伝えられたものを除外します。json コンテンツの XHR を送信しなくても、いつでもストアでフェッチを呼び出すことができます。クエリ引数を使用したフェッチは、単純なフィルターと見なすことができます。

このクエリについて知らせると、もう少し興味深いものになりModelます。そうすると、treeNode返された結果に基づいて、ツリーを埋めるためののみが作成されます。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-request によるリフレッシュ ツリー

ストアに関しては、正確に行う必要があります。モデルを閉じてから、モデルを再構築します。モデルにはすべての が含まれておりTreeNode(そのルート ノードの下)、Treeそれ自体が、メモリ リークを避けるためにクリアする必要がある itemarray をマップします。

そのため、次の手順を実行するとツリーが再構築されます - ただし、このサンプルでは考慮されていません。DnD がアクティブ化されている場合、dndSource/dndContainer は引き続き古い DOM を参照し、それによって以前の DOMNode 階層 (hidden ofc) を「キープアライブ」します。 .

rootNode がUNCHECKEDであることをモデルに伝えることで、その子の変更がチェックされます。これにより、ツリーが完了するとサブ階層が生成されます_load()

ストアを閉じます (ストアが新しい fetch() を実行するように)。

  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();
    }
});
于 2012-06-06T13:19:32.427 に答える