2012-05-02 24 views
1

私はTelerikのKendoUIを使用してマルチレベルのツリービューを作成していますが、再順序付けされたノードのブランチに正しいIDを取得しようとしています。jQueryでTreeViewの兄弟ブランチのみを選択するにはどうすればいいですか?

<ul id="root"> 
    <li>Item 1 (1)<input type="hidden" name="PresetItemId" value="1" /> 
     <ul> 
      <li>Item 1.1 (5)<input type="hidden" name="PresetItemId" value="5" /></li> 
      <li>Item 1.2 (6)<input type="hidden" name="PresetItemId" value="6" /> 
       <ul> 
        <li>Item 1.2.1 (11)<input type="hidden" name="PresetItemId" value="11" /></li> 
        <li>Item 1.2.2 (12)<input type="hidden" name="PresetItemId" value="12" /></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li>Item 2 (2)<input type="hidden" name="PresetItemId" value="2" /> 
     <ul> 
      <li>Item 2.1 (7)<input type="hidden" name="PresetItemId" value="7" /> 
       <ul> 
        <li>Item 2.1.1 (13)<input type="hidden" name="PresetItemId" value="13" /> 
         <ul> 
          <li>Item 2.1.1.1 (18)<input type="hidden" name="PresetItemId" value="18" /></li> 
         </ul> 
        </li> 
        <li>Item 2.1.2 (14)<input type="hidden" name="PresetItemId" value="14" /></li> 
       </ul> 
      </li> 
      <li>Item 2.2 (8)<input type="hidden" name="PresetItemId" value="8" /> 
       <ul> 
        <li>Item 2.2.1 (15)<input type="hidden" name="PresetItemId" value="15" /></li> 
       </ul> 
      </li> 
      <li>Item 2.3 (27)<input type="hidden" name="PresetItemId" value="27" /></li> 
     </ul> 
    </li> 
    <li>Item 3 (3)<input type="hidden" name="PresetItemId" value="3" /> 
     <ul> 
      <li>Item 3.1 (9)<input type="hidden" name="PresetItemId" value="9" /> 
       <ul> 
        <li>Item 3.1.1 (16)<input type="hidden" name="PresetItemId" value="16" /></li> 
       </ul> 
      </li> 
      <li>Item 3.2 (10)<input type="hidden" name="PresetItemId" value="10" /> 
       <ul> 
        <li>Item.3.2.1 (23)<input type="hidden" name="PresetItemId" value="23" /></li> 
       </ul> 
      </li> 
      <li>Item 3.3 (19)<input type="hidden" name="PresetItemId" value="19" /> 
       <ul> 
        <li>Item.3.3.1 (24)<input type="hidden" name="PresetItemId" value="24" /></li> 
       </ul> 
      </li> 
      <li>Item 3.4 (20)<input type="hidden" name="PresetItemId" value="20" /> 
       <ul> 
        <li>Item.3.4.1 (25)<input type="hidden" name="PresetItemId" value="25" /></li> 
       </ul> 
      </li> 
      <li>Item 3.5 (21)<input type="hidden" name="PresetItemId" value="21" /> 
       <ul> 
        <li>Item.3.5.1 (28)<input type="hidden" name="PresetItemId" value="28" /></li> 
       </ul> 
      </li> 
      <li>Item 3.6 (22)<input type="hidden" name="PresetItemId" value="22" /> 
       <ul> 
        <li>Item.3.6.1 (26)<input type="hidden" name="PresetItemId" value="26" /></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li>Item 4 (4)<input type="hidden" name="PresetItemId" value="4" /></li> 
</ul> 

私の考えは、各親には子が含まれていて、それらの子は独立してTreeView内の他のブランチから並べ替えられています。

だから私は、ノードが上にドロップされるブランチのすべての兄弟を取得し、ノードがソートされているときのみ、そのブランチレベルのためにidを取得する必要があります。それらのノードのいずれかに子がある場合、私はその子をIdコレクションの一部にしたくありません。

私はそれは多少、作業が、それは(正しい)すべての兄弟を返しますが、また(正しくない)、それらの兄弟のすべての子があります。

var treeview; 

function onTreeViewDragEnd(e){ 
    var console = $("#console"); 
    //alert("source: " + treeview.text(e.sourceNode)); 
    //alert("destination: " + treeview.text(e.destinationNode)); 

    var list = $(e.destinationNode).siblings().not($(this).children()); 

    var data = $("input", list).serialize(); 
    console.html(JSON.stringify(data)); 
} 


treeview = $("#root").kendoTreeView({ 
    dragAndDrop : true, 
    dragend: onTreeViewDragEnd 
}).data("kendoTreeView"); 

私はこれにjsfiddleを開始しました:単純にノードを展開し、同じブランチ上の他の場所にドロップし、それがために隠された入力値が表示されます、この例を使用するにはhttp://jsfiddle.net/kahanu/PdaRg/1/

ブランチ(と子供たち、私が欲しいものではない)。

正しい方向に私を指しているすべてのヘルプは高く評価されます。

ありがとうございました。

答えて

1

それはあなたがする必要があるよりも、より多くのノードを取得している、それはあなたがノード以下の任意のレベルでinputを探していることだということではありません。

var list = $(e.destinationNode).siblings(); 
var data = list.children("div").find("input").serialize(); 
+0

デビッド、おかげで、私はあなたが何を意味するか参照してください。あなたの解決策ははるかに近いです。これにより、ほぼ正しいノード(および値)が返されます。 1つのノードが欠落しています。そのノードは、私が前に落としているノードです。また、 ".children(" div ")"は何をしますか?ツリーには「div」はありません。 – Kahanu

+0

私はダビデの助けに必要なものを見つけました。彼のコードは、私が望んでいたレベルのノードだけを返しましたが、そのレベルのすべてのノードを返すわけではありませんでした。どのノードを先にドロップしても、私のリストには表示されません。 .siblings()が現在のノードを除くすべてのノードを返すことがわかりました。私は、親に上がって子供に戻ると、そのレベルのすべてのノードを選択することに気付きました。 'var list = $(e.destinationNode).parent()。children(); < - ない.siblings() VARデータ=のlist.children( "DIV")( "入力")を見つける(シリアライズ);。。。 ' – Kahanu

+0

ます。また' .siblingsを(行うことができます)andSelf() 'していますまさにあなたが要求しているものです。 –

関連する問題