728x90
반응형

 

다음 예제는 데이터가있는 테이블  렌더링하는 두 가지 다른 흥미로운 조각 사용법을 보여줍니다 . 

 

이것은 변경할 수있는 테이블 헤더와 데이터가 렌더링되는 본문의 두 가지 중요한 부분으로 구성된 재사용 가능한 테이블 조각입니다.

<table>
    <thead th:fragment="fields(theadFields)">
        <tr th:replace="${theadFields}">
        </tr>
    </thead>
    <tbody th:fragment="tableBody(tableData)">
        <tr th:each="row: ${tableData}">
            <td th:text="${row.id}">0</td>
            <td th:text="${row.name}">Name</td>
        </tr>
    </tbody>
    <tfoot>
    </tfoot>
</table>

 

 

 

 

이 테이블을 사용하려면 필드 함수를 사용하여 자체 테이블 헤더를 전달할 수 있습니다 . 

 

헤더는 myFields 클래스  참조됩니다 . 테이블 본문은 데이터를 매개 변수로 tableBody 함수 에 전달하여로드됩니다 .

<body>
    <header th:replace="fragments/general.html :: header"> </header>
    <table>
        <thead th:replace="fragments/tables.html
              :: fields(~{ :: .myFields})">
            <tr class="myFields">
 
                <th>Id</th>
                <th>Name</th>
            </tr>
        </thead>
        <div th:replace="fragments/tables.html
          :: tableBody(tableData=${data})">
        </div>
    </table>
    <div th:replace="fragments/general.html :: footer"></div>
</body>

 

 

 

이것이 최종 페이지의 모양입니다.

<body>
    <div>
        <h1>Thymeleaf Fragments sample</h1>
    </div>
    <div>Data received</div>
    <table>
        <thead>
            <tr class="myFields">
 
                <th>Id</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1001</td>
                <td>John Smith</td>
            </tr>
            <tr>
                <td>1002</td>
                <td>Jane Williams</td>
            </tr>
        </tbody>
    </table>
    <footer>
        <a href="/spring-thymeleaf/fragments">Fragments Index</a> |
        <a href="/spring-thymeleaf/markup">Markup inclussion</a> |
        <a href="/spring-thymeleaf/params">Fragment params</a> |
        <a href="/spring-thymeleaf/other">Other</a>
    </footer>
</body>

 

 

 

템플릿 관리를 쉽게 할 수있는 강력한 도구 인 Thymeleaf Fragments를 사용하여보기 구성 요소를 재사용하는 방법을 살펴 보았습니다.

 

728x90
반응형

+ Recent posts