[개발일지#001] 나만의 그리드 일명 '뚜루리그리드' 만들기 Ver1

728x90

나는 회사에서 리얼그리드를 쓴다. 그러다 문득 과장님이 제안하신다. 바닐라JS와 Html만을 이용하여 리얼그리드 같은걸 만들어보는 건 어떻겠냐고. 너무....재밌겠다 싶어 바로 만들기 시작했다.

근데 바로 뚝딱 만들 자신은 없어서 일단 버전을 나눠서 업그레이드를 해보기로 했다.
의 그 첫번째!

[개발 목표]

이번 개발일지에서는 자바스크립트의 function 기능을 이용해서

정말 기본적으로 행추가, 행삭제, 체크박스 선택기능까지 만들어 보기로 한다.

html

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>SB Admin 2 - Tables</title>

    <!-- Custom fonts for this template -->
    <link href="../vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
        rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../css/sb-admin-2.min.css" rel="stylesheet">

    <!-- Custom styles for this page -->
    <link href="../vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">

</head>

<body id="page-top">
 ///생략///
                    <!-- DataTales Example -->
                    <div class="card shadow mb-4" style="margin-top: 20px;">
                        <div class="card-header py-3">
                            <div style="float: left;">
                                <h6 class="m-0 font-weight-bold text-primary">Total : <span id="totalCount">0</span></h6>
                            </div>
                            <div class="btnArea" style="text-align: right; float: right;">
                                <button type="button" class="btn btn-primary" id="addBtn">추가</button>
                                <button type="button" class="btn btn-danger" id="delBtn">삭제</button>
                            </div>

                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <div style="height: 400px;">
                                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                        <thead>
                                            <tr>
                                                <th><input type="checkbox" id="allCheckBox"/></th>
                                                <th>No</th>
                                                <th>Name</th>
                                                <th>Position</th>
                                                <th>Office</th>
                                                <th>Age</th>
                                                <th>Start date</th>
                                                <th>Salary (만원)</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><input type="checkbox" id="checkbox_1"/></td>
                                                <td style="text-align: center;"><span id="gridNo_1">1</span></td>
                                                <td><input class="form-control" type="text" id="name_1" class="name" placeholder="이름"></td>
                                                <td><input class="form-control" type="text" id="position_1" class="position" placeholder="직급"></td>
                                                <td><input class="form-control" type="text" id="office_1" class="office" placeholder="부서"></td>
                                                <td><input class="form-control" type="text" id="age_1" class="age" placeholder="나이"></td>
                                                <td><input class="form-control" type="text" id="startDate_1" class="startDate" placeholder="입사일"></td>
                                                <td><input class="form-control" type="text" id="salary_1" class="salary" placeholder="연봉"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

		///생략///

    <script src="../js/grid_ver1.js"></script>

</body>

</html>

생각보다 복잡해보이지만 나름 깔끔하게 한다고 부트스트랩 적용했더니 좀 복잡해보이는 것임.
테이블, tr, td 태그로 이루어진 아주 단순한 Html임.

js - gridAddrow()


function gridAddRow(){
    let newRow = document.createElement('tr');
    let rowCount = document.getElementById('dataTable')
        .getElementsByTagName('tbody')[0].getElementsByTagName('tr').length + 1;
    newRow.innerHTML =
          '<td><input type="checkbox" id="checkbox_' + rowCount + '"></td>'
        + '<td style="text-align: center;"><span id="gridNo_' + rowCount + '">' + rowCount + '</span></td>'
        + '<td><input class="form-control" type="text" id="name_' + rowCount + '" placeholder="이름"></td>'
        + '<td><input class="form-control" type="text" id="position_' + rowCount + '" placeholder="직급"></td>'
        + '<td><input class="form-control" type="text" id="office_' + rowCount + '" placeholder="부서"></td>'
        + '<td><input class="form-control" type="text" id="age_' + rowCount + '" placeholder="나이"></td>'
        + '<td><input class="form-control" type="text" id="startDate_' + rowCount + '" placeholder="입사일"></td>'
        + '<td><input class="form-control" type="text" id="salary_' + rowCount + '" placeholder="연봉"></td>';

    document.getElementById('dataTable').getElementsByTagName('tbody')[0].appendChild(newRow);
    gridTotalCount();
}

[추가] 버튼을 클릭하면, 행이 추가되는 함수.
별다른 건 없지만 나중에 작업에 필요하도록 각 행의 input마다 id를 name_1, name_2 요런식으로 주기로 함.
그리고 함수의 마지막에는 행추가를 하게 되면 추가된 행 카운트를 반영함. 이 함수는 좀 더 뒤에 작성해서 넣을 예정.

js - delRow()

function gridDelRow(){
    let checkedCount = document.querySelectorAll('[id*="checkbox_"]:checked').length;
    let rowCount = document.getElementById('dataTable')
        .getElementsByTagName('tbody')[0].getElementsByTagName('tr').length;

    if(rowCount === 0){
        alert("삭제할 행이 없습니다.");
    }

    if (checkedCount === 0){
        alert("삭제할 행을 체크해주세요.");
    } else {
        let checkedCheckboxes = document.querySelectorAll('[id^="checkbox_"]:checked');

        if (checkedCheckboxes.length > 0) {
            checkedCheckboxes.forEach(function(checkbox) {
                let row = checkbox.closest('tr');
                row.parentNode.removeChild(row);
            });

            let gridNoSpans = document.querySelectorAll('[id^="gridNo_"]');
            gridNoSpans.forEach(function(span, index) {
                span.textContent = index + 1;
            });
        } else {
            alert("선택된 행이 없습니다.");
        }
    }

    gridTotalCount();
}

삭제는 체크박스가 체크된 행만 삭제하도록 하고 그럼 다중 삭제도 가능하게끔 해야 함. 그래서 함수의 앞부분에서 행 자체가 아예 없거나 체크박스를 체크한 행이 아예 없는 경우를 체크하고 통과하면 삭제 하도록 했다.
그리고 삭제하면 no부분의 넘버링을 처음부터 다시 하는 부분이 포인트. 나머지 id에 붙은 _1 _2 은 그대로 두는 게 좋을 것 같아서 둠.
그리고 삭제함수의 마지막에도 행 카운트를 다시 한번 해줌.

js - gridTotalCount()

function gridTotalCount(){
    let rowCount = document.getElementById('dataTable')
        .getElementsByTagName('tbody')[0].getElementsByTagName('tr').length;
    document.getElementById("totalCount").textContent = rowCount;
}

행카운트를 해서 상단에 토탈 카운트를 보여주는 부분.
행추가, 행삭제 그리고 화면 로드 시에 작동되도록 함.

js - checkAllcehckboxes(), attachCheckboxEvents()

function checkAllCheckboxes(){
    let isChecked = this.checked;
    let checkboxes = document.querySelectorAll('[id^="checkbox_"]');
    checkboxes.forEach(function(checkbox) {
        checkbox.checked = isChecked;
    });
}

function attachCheckboxEvents() {
    document.querySelectorAll('[id^="checkbox_"]').forEach(function(checkbox) {
        checkbox.addEventListener('click', function() {
            let allCheckBox = document.getElementById('allCheckBox');
            allCheckBox.checked = [...document.querySelectorAll('[id^="checkbox_"]')].every(checkbox => checkbox.checked);
        });
    });
}

전체 상단에 체크박스를 체크하면 나머지 행의 체크박스가 체크되고 전체체크박스를 해제하면 나머지 행의 체크박스도 해제되게끔 만들었다.
attachCehckboxEvents() 함수는 전체체크박스와 나머지 행 체크박스를 동일하게 만들어주는 함수이고, checkAllcehckboxes()함수는 행 체크박스가 모두 체크되었을 때 전체체크박스가 체크되도록 하는 함수로 만들었다.

document.addEventListener('DOMContentLoaded', function() {
    gridTotalCount();
    document.getElementById('addBtn').addEventListener('click', function (){
        gridAddRow();
        attachCheckboxEvents();
    });
    document.getElementById('delBtn').addEventListener('click', gridDelRow );
    document.getElementById('allCheckBox').addEventListener('click', checkAllCheckboxes);
    attachCheckboxEvents();
    
});

구현되는 순서는 요러케 했다.

[구현된 화면은 요렇게~!]

728x90

저작자표시 비영리 변경금지

'💻 뚝딱뚝딱 > 뚜루리그리드' 카테고리의 다른 글

[개발일지#002] 나만의 그리드 일명 '뚜루리그리드' 만들기 Ver2 (0)	2024.04.11

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

조금씩, 꾸준히, 차곡차곡.

[개발일지#001] 나만의 그리드 일명 '뚜루리그리드' 만들기 Ver1

[개발 목표]

html

js - gridAddrow()

js - delRow()

js - gridTotalCount()

js - checkAllcehckboxes(), attachCheckboxEvents()

[구현된 화면은 요렇게~!]

'💻 뚝딱뚝딱 > 뚜루리그리드' 카테고리의 다른 글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역

[개발일지#001] 나만의 그리드 일명 '뚜루리그리드' 만들기 Ver1

[개발 목표]

html

js - gridAddrow()

js - delRow()

js - gridTotalCount()

js - checkAllcehckboxes(), attachCheckboxEvents()

[구현된 화면은 요렇게~!]

'💻 뚝딱뚝딱 > 뚜루리그리드' 카테고리의 다른 글

관련글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역