0

Martin Wendt によって書かれたFancytree jQuery プラグインを使用してきましたが、これは素晴らしいものです。しかし、私はある特定の側面に苦労してきました。ツリーのデータ構造に JSON ではなく HTML を使用していますが、ノードが欠落してレンダリングされることがわかりました。

これを Fancytree コントロールが単一の<UL>構造体を想定しているに違いないという事実に絞り込むのにかなりの時間を費やしました。構造内の他のものは、 の下にネストする必要があります<LI>。しかし、私はその理由を理解していません。説明させてください。

サンプル HTML を次に示します。

<div id="tree">
   <UL id="browser" class="filetree">
      <LI class="folder">
         Folder 1
         <UL>
            <LI>Nested Folder 1
               <UL>
                  <LI>Subitem1</LI>
                  <LI>Subitem2</LI>
               </UL>
            </LI>
         </UL>
         <UL>
            <LI>Nested Folder 2
               <UL>
                  <LI>Subitem1</LI>
                  <LI>Subitem2</LI>
               </UL>
            </LI>
        </UL>
      </LI>
   </UL>
</div>

この HTML を IE、Chrome、またはほとんどすべてのブラウザーでレンダリングすると、アイテムがネストされた 2 つの連続する順序付けられていないリストとして正しく表示されます。ただし、Fancytree を適用すると、ノード「Nested Folder 2」が完全に消えます。実際、プラグイン フレームワークからの JavaScript エラーや警告はありません。

したがって、私の質問はやや二重です。

  1. W3C 標準に基づいて、上記の適切にフォーマットされた HTML 構文はありますか? 私はイエスと思う。

  2. Fancytree が 2 番目のフォルダーをレンダリングしないのはなぜですか? Fancytree のバグですか？これをレンダリングするために簡単にできるカスタマイズはありますか?

この HTML のソースは動的であり、かなり複雑な XSLT が含まれているため、HTML 構造をリファクタリングする必要がないことを願っています。

提供できる洞察をいただければ幸いです。

4

1 に答える 1

0

この努力を続けた後、私は自分自身の質問に答えることができました.

複数<UL>の要素

行内の複数の < 要素の HTML 構文はUL>、確かに完全に有効です。ただし、データがこの形式で構造化されている場合、2 番目の順不同リストは実際には独自のエンティティになります。構造の全体的なポイントは、単一のツリー構造として完全に表現できるものを構築することであり、したがって単一のルート要素<UL>と子ノードを含みます。もちろん、子ノードには<UL>、リスト項目を持つネストされた順序なしリストになる他の子が含まれる場合があります<LI>。

以下に例を示します。

  • テスト
  • 別のテスト

FancyTree jQuery プラグイン

FancyTree は、上記の回答に基づいた設計により、このように動作しています。

コンテナーに格納された個々のテンプレートを呼び出すように XSLT を調整すると、<UL>各 XSL テンプレートは、必要に応じて独自のリスト項目を正しく追加します。最終結果は、HTML データ構造を表すツリー ビューです。

また、明らかになった 1 つのことは、ノードをレンダリングする前に、XSLT が論理的なチェックを実行する必要があるということでした。その理由は、構造に追加するリスト アイテムがテンプレートにない場合、空の作成によって<UL>ツリー ビューのレンダリングが失敗したためです。この場合、ツリー ノードが間違った親要素の子になる原因となっていました。

于 2014-04-01T18:55:02.350 に答える