Question

我有一个像这样的目录结构：

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

我的代码正在运行，但是嵌套文件夹的文件是多余的，因为我打印子目录中的所有文件多次，我希望一个文件只列出一次，但无法弄清楚它是如何可能的???

Answer 1

假设您可以获得正在查看的节点的级别，您可以使用一系列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部分无能为力，但希望这会让你朝着正确的方向前进。

使用jquery遍历目录xml结构

1 个答案: