다차원 배열을 테이블로 표시하는 방법은 무엇입니까?

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   | 
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' 

가족 셀이 하나 개 이상의 부모 행을 집에 뻗어 방법을주의하십시오, 부모 셀은 하나 개 이상의 자녀 행을 집에 streches. js에서 familyTree라는 변수로 JSON을 준비한 다음 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 요소가 계층 구조에도 존재해야합니다. 테이블을 처리 할 때 이상적이지는 않습니다. 왜냐하면 테이블 셀 내부의 테이블이 결국 열 정렬 문제로 이어지기 때문입니다. 각 열의 너비를 고정하여 정렬 문제를 어느 정도 처리 할 수 ​​있지만 완벽한 해결책은 아닙니다.

위에서 말한 것처럼 tempo.js를 사용하여 JSON 데이터를 렌더링하기 위해 HTML 마크 업을 수정했습니다. 아래 변경 사항을 참조하십시오 (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>