0

这个问题一直困扰着我好几天......我有以下 JSON，我正在尝试使用 Tempo.js 将其呈现为表格，但一直没有呈现任何内容：

[  
   {  
      "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           |
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

请注意家庭单元如何延伸以容纳多个父行，而父单元如何延伸以容纳多个子行。我在一个名为familyTree的变量中准备js中的JSON，然后调用Tempo.prepare('family-list').render(familyTree); No 我已经阅读了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 文件。但我就是无法解决这个问题。如果你们中的任何人都经历过类似的事情......你能分享你的经验吗？提前非常感谢。

4

1 回答 1

1

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

如上所述，我已经修复了您的 HTML 标记以使用 tempo.js 呈现您的 JSON 数据。请参阅以下更改（此处为 jsfiddle）：

<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>
于 2014-12-02T17:56:13.860 回答