-1

私はこのようなディレクトリ構造を持っています:

Root
 |
 |-Folder 1
 |   |
 |   |--Multiple files.
 |   |
 |   |--Folder 1.a
 |         |
 |-Files   |
           |----Multiple files.
           |----Further tree of more folder's and files.

次のような XML ファイルに保存されます。

<dir name="root">
 <dir name="Folder 1">
  <file name="file1"/>
  <file name="file2"/>
  <dir name="folder1.a>
   <file name="innerfile"/>
  </dir>
 </dir>
 <dir name="folder2">
  .... so on ....

jQueryを使用してこのツリーをトラバースし、インデントを使用しているため、次のようなディレクトリ構造を出力したい:

Root
  Folder1
   file1
   file2
   Folder1.a
    inner file
  Folder2
    file N
    folder N 
       .....

私が使用しているコードは次のとおりです

   $(document).ready(function()
   {
     $.ajax({
       type: "GET",
       url: "root.xml",
       dataType: "xml",
       success: parseXml
     });
   });

   function parseXml(xml)
   {
    $(xml).find("directory").each(function(){
       $("#output").append("<a href = \"" + $(this).attr("absolutePath") + "\">" +                                                          $(this).attr("name") + "</a><br>");
       $(this).find("file").each(function()
       {
         $("#output").append("&nbsp;&nbsp;&nbsp;&nbsp;<a href = \"" + $(this).attr("absolutePath") + "\">" + $(this).attr("name") + "</a><br>");
       });
       $('#output').append("<br>");
     });

私のコードは機能していますが、サブディレクトリ内のすべてのファイルを複数回印刷しているため、ネストされたフォルダーのファイルは冗長です。

4

1 に答える 1

0

見ているノードのレベルを取得できると仮定すると、一連の 2 列のテーブルを使用してこれを行うことができます。各テーブルの最初のセルは、現在のレベル * 間隔を空けたいピクセル数に等しいスペーサーです。このように：

$("output").append("<table><tr><td style=\"width: " + (myLevel * 12).ToString() + "px;\" /><td><a href = \"" + $(this).attr("absolutePath") + "\">" + ...

最終結果は次のようになります。

<table><tr><td style="width: 0px;" /><td>Root</td></tr></table>
<table><tr><td style="width: 12px;" /><td>Folder1</td></tr></table>
<table><tr><td style="width: 24px;" /><td>file1</td></tr></table>
<table><tr><td style="width: 24px;" /><td>file2</td></tr></table>
<table><tr><td style="width: 24px;" /><td>Folder1.a</td></tr></table>
<table><tr><td style="width: 36px;" /><td>inner file</td></tr></table>
<table><tr><td style="width: 12px;" /><td>Folder2</td></tr></table>
<table><tr><td style="width: 24px;" /><td>filen</td></tr></table>
<table><tr><td style="width: 24px;" /><td>Folder1.n</td></tr></table>

申し訳ありませんが、xml の部分についてはお手伝いできませんでしたが、うまくいけば、これにより正しい方向に進むことができます。

于 2013-02-25T19:57:48.033 に答える