[bootstrapTable] 부트스트랩 테이블 특정 클래스 적용하기
1. 필요한 라이브러리
-JavaScript
<!-- Jquery 가져오기 -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- bootstrap 가져오기 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<!-- bootstrap table 가져오기 -->
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script> - CSS
<!-- 부트스트랩 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- 부트스트랩 테이블 -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css">
2. 테이블 생성하기
- Table에 적용힐 CSS를 작성한다.
<style>
.largeText {
font-size: 20px;
color: blue;
}
.smallText {
font-size: 10px;
color: red;
}
.largePadding {
padding: 10px;
}
.smallPadding {
padding: 2px;
}
table{
width: 100%;
}
</style>- Html 테이블에 적용할 class들을 checkbox로 구현해둔다.
<div class="container">
<div>
<label for="">테이블 테두리</label>
<input type="checkbox" data-value="table-bordered">
</div>
<div>
<label for="">테이블 호버 클래스</label>
<input type="checkbox" data-value="table-hover"></div>
<div>
<label for="">테이블 줄무늬</label>
<input type="checkbox" data-value="table-striped"></div>
<div>
<label for="">테이블 어두운 테마 적용</label>
<input type="checkbox" data-value="table-dark"></div>
<div>
<label for="">테이블 테두리 없애기</label>
<input type="checkbox" data-value="borderless"></div>
<div>
<label for="">테이블 커스텀 큰 글자와 색깔</label>
<input type="checkbox" data-value="largeText"></div>
<div>
<label for="">테이블 커스텀 작은 글자와 색깔</label>
<input type="checkbox" data-value="smallText"></div>
</div>- JavaScript에서 checkbox의 변화가 있을 때, 테이블에 적용한다.
// input 값의 변화 있을 경우
$('input').change(function () {
// console.log(this)
var classes = [];
// check된 input 값의 data-value의 값을 통해서 class를 적용
$('input:checked').map(function () {
classes.push($(this).data("value"));
});
// array Classes를 join으로 class 형식으로 맞춰서 넣어준 후 , refresh 한다
$table.bootstrapTable('refreshOptions', {
classes: classes.join(' ')
})
});3. 결과화면
- checkbox 값 변화시 테이블 적용 결과
4. 전체코드
<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>테이블 클래스 적용하기</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css">
<style>
.largeText {
font-size: 20px;
color: blue;
}
.smallText {
font-size: 10px;
color: red;
}
.largePadding {
padding: 10px;
}
.smallPadding {
padding: 2px;
}
table{
width: 100%;
}
</style>
</head>
<body>
<div id="wrap">
<div class="pt-3"></div>
<div class="container">
<div>
<label for="">테이블 테두리(table-bordered) </label>
<input type="checkbox" data-value="table-bordered">
</div>
<div>
<label for="">테이블 호버 클래스(table-hover) </label>
<input type="checkbox" data-value="table-hover"></div>
<div>
<label for="">테이블 줄무늬(table-striped) </label>
<input type="checkbox" data-value="table-striped"></div>
<div>
<label for="">테이블 어두운 테마 적용(table-dark) </label>
<input type="checkbox" data-value="table-dark"></div>
<div>
<label for="">테이블 테두리 없애기(borderless) </label>
<input type="checkbox" data-value="borderless"></div>
<div>
<label for="">테이블 커스텀 큰 글자와 색깔(largeText) </label>
<input type="checkbox" data-value="largeText"></div>
<div>
<label for="">테이블 커스텀 작은 글자와 색깔(smallText) </label>
<input type="checkbox" data-value="smallText"></div>
</div>
<div class="container">
<!-- 테이블 생성 부분 -->
<table id="table" data-width="460">
<thead>
<tr>
<!-- JSON 값과 매칭될 field를 명시 -->
<th data-field="subject">학과</th>
<th data-field="name">이름</th>
<th data-field="number">학번</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script> -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>
<script>
// document ready
$(function () {
var $table = $("#table");
// 테이블 표현할 데이터 표현
var data = [
{
"subject": "경영학과",
"name": "가나다",
"number": "20191234"
},
{
"subject": "체육학과",
"name": "알란",
"number": "20194567"
},
{
"subject": "심리학과",
"name": "구론",
"number": "20171227"
},
{
"subject": "국문학과",
"name": "트레비",
"number": "20097892"
}
];
$table.bootstrapTable({ data: data });
// input 값의 변화 있을 경우
$('input').change(function () {
// console.log(this)
var classes = [];
// check된 input 값의 data-value의 값을 통해서 class를 적용
$('input:checked').map(function () {
classes.push($(this).data("value"));
});
// array Classes를 join으로 class 형식으로 맞춰서 넣어준 후 , refresh 한다
$table.bootstrapTable('refreshOptions', {
classes: classes.join(' ')
})
});
});
</script>
</body>
</html>
'[Bootstrap]' 카테고리의 다른 글
| [bootstrapTable] 부트스트랩 테이블 JSON 값으로 만들기 (0) | 2019.12.13 |
|---|---|
| [Bootstrap Table] bootstrapTable Html로 생성하기 (0) | 2019.12.13 |
| [BOOTSTRAP] nav 왼쪽, 가운데, 끝 정렬 하기(justify-content-* 사용하기: start, end, center, between, around) (0) | 2019.10.20 |
| [Bootstrap] nav 사용법 알아보기 (0) | 2019.10.20 |
| [Bootstrap] 점보트론(jumbotron) 사용하기 (jumbotron, jumbotron-fluid, container, container-fluid) (0) | 2019.10.20 |
미나미나미
