투케이2K

7. (spring/스프링) [thymeleaf/타임리프] each 사용해 table 테이블 데이터 동적으로 추가 실시 본문

Spring

7. (spring/스프링) [thymeleaf/타임리프] each 사용해 table 테이블 데이터 동적으로 추가 실시

투케이2K 2021. 7. 9. 10:37

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : inteli j

개발 언어 : spring

/* =========================== */

​

/* =========================== */

[폴더 및 파일 추가]

​

​

​

/* =========================== */

​

/* =========================== */

[소스 코드 : model >> Insert_Table_Model]

package com.project.solutionpackage.model;

import lombok.Data;

@Data
public class Insert_Table_Model {

    /**
     * [클래스 설명]
     * 1. insert 포맷 형태 정의 클래스
     * 2. controller 에서 사용한다
     * */

    private String idx;
    private String name;
    private String dept;
    private String date;

    public Insert_Table_Model(String idx, String name, String dept, String date) {
        this.idx = idx;
        this.name = name;
        this.dept = dept;
        this.date = date;
    }

}

​

​

​

[소스 코드 : controller >> ThymeLeafController]

package com.project.solutionpackage.controller;

import com.project.solutionpackage.model.Font;
import com.project.solutionpackage.model.Insert_Table_Model;
import com.project.solutionpackage.model.Return_DB_Json_Model;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

// [rest 방식 컨트롤러 / Controller = view 연결]
@Controller
public class ThymeLeafController {

    /**
     * [클래스 설명]
     * 1. thymeleaf 타임리프 view 지정 부분 (html 지정)
     * */



    // [get 방식 : 즉시 데이터 삽입 방식]
    // [경로 지정 : http://localhost:7000/testTableThymeleafOne]
    // [get 로직 : tableList 라는 key에 Insert_Table_Model 객체 데이터 리스트를 testTableThymeleaf.html로 리턴합니다]
    // [html 로직 : testTableThymeleaf.html은 리턴 받은 tableList key 값을 불러와서 데이터를 표시해줍니다]
    @GetMapping("/testTableThymeleafOne")
    public String testTableThymeleafOne(@RequestParam Map<String, String> param, Model model){
        //input으로 들어온 파라미터 데이터 확인 실시
        System.out.println("\n");
        System.out.println(Font.GREEN+"======================================="+Font.RESET);
        System.out.println("[ThymeLeafController] : [testTableThymeleafOne]");
        System.out.println(Font.GREEN+"======================================="+Font.RESET);
        System.out.println("\n");

        //html에 객체 지정 실시
        List<Insert_Table_Model> tables = new ArrayList<>();
        for(int i=1; i<=5; i++){ //반복문을 수행하면서 리스트에 데이터 삽입
            String idx = Integer.toString(i);
            String name = String.valueOf(i) + "[name]";
            String dept = String.valueOf(i) + "[dept]";
            String date = String.valueOf(i) + "[date]";

            //객체를 리스트에 삽입
            Insert_Table_Model insert_table_model = new Insert_Table_Model(idx, name, dept, date);
            tables.add(insert_table_model);
        }

        model.addAttribute("tableList", tables); //value 값에 객체 지정 실시
        return "testTableThymeleaf"; //testTableThymeleaf.html 호출
    }

}

​

​

​

​

[소스 코드 : templates >> testTableThymeleaf.html]

<!DOCTYPE html>
<!-- 타임리프를 사용하기 위한 태그 선언 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <!-- 내부 css -->
  <style>

    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }

    td, th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }

    tr:nth-child(even) {
      background-color: #dddddd;
    }

  </style>

  <!-- 내부 js -->
  <script>
    window.onload = function() {
      console.log("");
      console.log("[window onload] : [start]");
      console.log("");
    };
  </script>

</head>

<body>

<!-- 테이블 선언 실시 -->
<table>

  <thead>
  <tr>
    <th>번호</th>
    <th>이름</th>
    <th>부서</th>
    <th>날짜</th>
  </tr>
  </thead>

  <tbody>
  <!-- tr th:each : 행 반복문을 수행하겠다는 의미입니다 [여러 데이터 출력] -->
  <tr th:each="list : ${tableList}">
    <td><span th:text="${list.idx}"></span></td>
    <td><span th:text="${list.name}"></span></td>
    <td><span th:text="${list.dept}"></span></td>
    <td><span th:text="${list.date}"></span></td>
  </tr>
  </tbody>

</table>

</body>

</html>

​

/* =========================== */

​

/* =========================== */

[결과 출력]

​

/* =========================== */

반응형
저작자표시

'Spring' 카테고리의 다른 글

9. (spring/스프링) api 생성 - DB 데이터 조회 및 model 객체 매핑 데이터 확인 실시  (0) 2021.07.13
8. (spring/스프링) [thymeleaf/타임리프] DB 데이터 조회 후 each 사용해 table 테이블 데이터 동적으로 추가 실시  (0) 2021.07.13
6. (spring/스프링) [JSP] spring 스프링 프로젝트에 JSP 적용 실시  (0) 2021.07.08
5. (spring/스프링) [thymeleaf/타임리프] spring 스프링 프로젝트에 thymeleaf 타임 리프 적용 실시  (0) 2021.07.08
4. (spring/스프링) [파일 첨부] 기본 api 생성 및 오라클 DB 접속, 쿼리 실행 프로젝트  (0) 2021.07.08
'Spring' Related Articles more
Comments