如何将多维数组显示为表格？

Question

这个问题一直困扰我好几天了......我有我想要呈现为使用Tempo.js一个表，但不断收到没有呈现以下JSON：

[ 
    { 
     "id":"xxxxxxxxxxxxxxxxxxxxxxxxxx", 
     "name":"Family One", 
     "parents":[ 
    { 
     "id":"yyyyyyyyyyyyyyyyyyyyyyyyyy", 
     "name":"John Doe", 
     "children":[ 
      { 
       "id":"zzzzzzzzzzzzzzzzzzzzzzzzz", 
       "name":"Fabrice A", 
       "description":"Good kid", 
       "Age":"20", 
       "Weight":"60" 
      } 
     ] 
    }, 
    { 
     "id":"hhhhhhhhhhhhhhhhhhhhhhhhhh", 
     "name":"Jane Doe", 
     "children":[ 
      { 
       "id":"wwwwwwwwwwwwwwwwwwwwwwww", 
       "name":"Maurice A", 
       "description":"Bad kid", 
       "Age":"22", 
       "Weight":"50" 
      } 
     ] 
    } 
    ] 
    }, 
    { 
     "id":"xxxxxxxxxxxxxxxxxxxxxxxxxx2", 
     "name":"Family Two", 
     "parents":[ 
    { 
     "id":"yyyyyyyyyyyyyyyyyyyyyyyyyy2", 
     "name":"Sonny Doe", 
     "children":[ 
      { 
       "id":"zzzzzzzzzzzzzzzzzzzzzzzzz2", 
       "name":"Juan B", 
       "description":"Good kid", 
       "Age":"30", 
       "Weight":"70" 
      }, 
      { 
       "id":"zzzzzzzzzzzzzzzzzzzzzzzzz3", 
       "name":"Alberto B", 
       "description":"Fine kid", 
       "Age":"20", 
       "Weight":"60" 
      }, 
      { 
       "id":"zzzzzzzzzzzzzzzzzzzzzzzzz4", 
       "name":"Roberto B", 
       "description":"Medium kid", 
       "Age":"10", 
       "Weight":"50" 
      } 
     ] 
    } 
    ] 
    } 
] 

表应该看起来像这样：

_______________________________________________________________________________________ 
| FAMILY NAME | PARENTS | CHILD NAME | CHILD DESCRIPTION | CHILD AGE | CHILD WEIGHT | 
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' 
| Family One | John Doe | Fabrice A | Good kid   | 20  | 60   | 
|    |'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' 
|    | Jane Doe | Maurice A | Bad kid   | 22  | 50   | 
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' 
| Family Two | Sonny Doe | Juan B  | Good kid   | 30  | 70   | 
|    |    | Alberto B | Fine kid   | 20  | 60   | 
|    |    | Roberto B | Medium kid  | 10  | 50   | 
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' 

请注意家庭细胞如何延伸到容纳多个父行，而母细胞口延伸，以容纳一个以上的孩子行。 我在js中准备了一个名为familyTree的变量，然后调用Tempo.prepare('family-list').render(familyTree); 不，我已经阅读了tempo.js的所有文档（这不是太长），但我仍然没有找到一种方法正确渲染表格。这是我走到这一步：

<div id="family-list"> 
    <table id="families"> 
     <tr data-before-template='data-before-template'> 
     <th> 
      FAMILY NAME 
     </th> 
     <th> 
      PARENTS 
     </th> 
     <th> 
      CHILD NAME 
     </th> 
     <th> 
      CHILD DESCRIPTION 
     </th> 
     <th> 
      CHILD AGE 
     </th> 
     <th> 
      CHILD WEIGHT 
     </th> 
    </tr> 
    <tr data-template='data-template'> 
     <td id="family-column"> 
      {{name}} 
     </td> 
     <td id="parent-column" data-template-for='parents'> 
      {{name}} 
     </td> 
     <td colspan="4"> 
      <table id='children-table' data-template-for="children"> 
       <tr> 
        <td> 
         {{name}} 
        </td> 
        <td> 
         {{description}} 
        </td> 
        <td> 
         {{age}} 
        </td> 
        <td> 
         {{weight}} 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 

我以前使用的速度。我甚至将它与wkhtmltopdf混合来渲染一些漂亮的pdf文件。但我无法解决这个问题。如果你们有任何人经历过类似的事情，请分享你的经验？非常感谢提前。

Answer 1

使用tempo.js并不理想在表中呈现分层数据。为了呈现分层数据，tempo.js要求HTML元素也存在于层次结构中。这在处理表格时并不理想，因为在表格单元格内创建表格最终会导致列对齐问题。通过固定每列的宽度，您可以在一定程度上关注对齐问题，但这不是一个完美的解决方案。

上面已经说过了，我已经修复了您的HTML标记以使用tempo.js呈现您的JSON数据。看到下面的变化（jsfiddle here）：

<div id="family-list"> 
    <table id="families"> 
    <tr data-before-template='data-before-template'> 
     <th width="100px"> 
     FAMILY NAME 
     </th> 
     <th width="100px"> 
     PARENTS 
     </th> 
     <th width="100px"> 
     CHILD NAME 
     </th> 
     <th width="150px"> 
     CHILD DESCRIPTION 
     </th> 
     <th width="50px"> 
     CHILD AGE 
     </th> 
     <th width="50px"> 
     CHILD WEIGHT 
     </th> 
    </tr> 
    <tr data-template='data-template'> 
     <td id="family-column"> 
     {{name}} 
     </td> 
     <td colspan="5"> 
     <table cellpadding="0"> 
      <tr data-template-for='parents'> 
      <td width="100px"> 
       {{name}} 
      </td> 
      <td> 
       <table id='children-table' cellpadding="0"> 
       <tr data-template-for="children"> 
        <td width="100px"> 
        {{name}} 
        </td> 
        <td width="150px"> 
        {{description}} 
        </td> 
        <td width="50px"> 
        {{Age}} 
        </td> 
        <td width="50px"> 
        {{Weight}} 
        </td> 
       </tr> 
       </table> 
      </td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
    </table> 
</div>