dijitツリーに最上位のノード項目をドラッグ＆ドロップで配置する方法

Question

dijit.Treeには、カスタムデータストアを使用してデータを提供するForestStoreModelがあります。それはうまくいきますが、私は、ユーザーが道場のドラッグアンドドロップ機能でトップレベルのアイテム（および最上位レベルのアイテム）を並べ替える機能を提供したいと考えています。

問題は、ForestStoreModel::pasteItem関数がルートの子であるかどうかを確認してからnullをTreeStoreModel::pasteItemに渡すという問題です。渡された親項目がnullの場合TreeStoreModel

pasteItem: function(/*Item*/ childItem, /*Item*/ oldParentItem, /*Item*/ newParentItem, /*Boolean*/ bCopy, /*int?*/ insertIndex){ 
     // summary: 
     //  Move or copy an item from one parent item to another. 
     //  Used in drag & drop 
     if(oldParentItem === this.root){ 
      if(!bCopy){ 
       // It's onLeaveRoot()'s responsibility to modify the item so it no longer matches 
       // this.query... thus triggering an onChildrenChange() event to notify the Tree 
       // that this element is no longer a child of the root node 
       this.onLeaveRoot(childItem); 
      } 
     } 
     dijit.tree.TreeStoreModel.prototype.pasteItem.call(this, childItem, 
      oldParentItem === this.root ? null : oldParentItem, 
      newParentItem === this.root ? null : newParentItem, 
      bCopy, 
      insertIndex 
     ); 
     if(newParentItem === this.root){ 
      // It's onAddToRoot()'s responsibility to modify the item so it matches 
      // this.query... thus triggering an onChildrenChange() event to notify the Tree 
      // that this element is now a child of the root node 
      this.onAddToRoot(childItem); 
     } 
    } 

は、基礎となるデータストアを更新しないとonLeaveRootとonAddToRootイベントはinsertIndexに通過しないので、私はのように思える私のデータストアを（更新するためにそれらを使用することはできませんとにかく少し後ろになるだろう）。私が唯一の現実的な選択肢は、私は互換性のあるデータストアオブジェクトに合成$root$項目を設定し、ForestStoreModelがTreeStoreModelに至るまで、変更せず、それを渡すことができるようにすることを可能にするためにForestStoreModelを拡張することだと思います。この時点で

。

この問題には他の方法がありますか？

更新

最終的な解決策を提案よりもさらに簡単であることが判明しました。私のForestStoreModelは、実際にdojo 1.6 ObjectStoreをデータソースとして使用しているので、すでにカスタムクラスです。オブジェクトストアputメソッドのoptions引数に目的のインデックスを渡すことができます。

pasteItem: function(/*Item*/ childItem, /*Item*/ oldParentItem, /*Item*/ newParentItem, /*Boolean*/ bCopy, /*int?*/ insertIndex){ 
    // Handle drag & drop at the root level 
    if (oldParentItem === this.root && newParentItem === this.root){ 
     this.store.put(childItem, { index: insertIndex }); 
    } 
    this.inherited(arguments); 
} 

Answer 1

あなたはそれを免れることはできない、ForestTreeModelをサブクラス化する必要があります。私は親クラスがonLeaveRootとonAddRootを呼び出すの世話を聞かせて修正がちょうどワンライナーでした。ただし、pasteItemを上書きするだけで済みます。合成ルートをTreeStoreModelに渡すことはできません。なぜなら、それについては何も知らないからです。

基礎となるデータストアを変更する必要がある場合は、this.store.setValues()に直接電話する方がよいでしょう。これによりonSetItemイベントがトリガーされ、_requeryTop()が呼び出されます。これにより、並べ替え順序に関係なく、基礎となるストアからルーツがフェッチされるため、変更内容に必ず反映されます。

dojo.declare('MyForestTreeModel', [ dijit.tree.ForestTreeModel ], { 
    pasteItem: function(childItem, oldParentItem, newParentItem, bCopy, insertIndex) { 
    if (oldParentItem == this.root && newParentItem == this.root) { 
     if (!bCopy) { this.onLeaveRoot(childItem); } 
     // modify the underlying store somehow so the call to _requeryTop() fetches 
     // the items in the correct order. 
     // (you decide what's 'order' and what new_order() returns) 
     this.store.setValues(childItem, 'order', new_order(insertIndex)); 
     this.onAddRoot(childItem); 
    } else { 
     // call super 
     this.inherited(arguments); 
    } 
    } 
}); 

他、簡単な方法、this.root.childrenを自分で操作して、ビューを通知するイベントonChildrenChangeを放出することです。注意してください、その方法は、注文を維持しません。

dojo.declare('MyForestTreeModel', [ dijit.tree.ForestTreeModel ], { 
    pasteItem: function(childItem, oldParentItem, newParentItem, bCopy, insertIndex) { 
    if (oldParentItem == this.root && newParentItem == this.root) { 
     if (!bCopy) { this.onLeaveRoot(childItem); } 
     // manipulate this.root.children to reorder childItem 
     // remove child from the current position 
     var children = dojo.filter(this.root.children, function(x) { 
     return x != childItem; 
     }); 
     // and insert it into the new index 
     children.splice(insertIndex, 0, childItem); 
     this.root.children = children; 
     // notify views 
     this.onChildrenChanged(this.root, children); 
     this.onAddRoot(childItem); 
    } else { 
     // call super 
     this.inherited(arguments); 
    } 
    } 
});