'부트스트랩 테이블 클래스 적용하기'에 해당되는 글 1건

[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-size20px;

            colorblue;

        }

 

        .smallText {

            font-size10px;

            colorred;

        }

 

        .largePadding {

            padding10px;

        }

 

        .smallPadding {

            padding2px;

        }

        table{

            width100%;

        }

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

블로그 이미지

미나미나미

,