반응형
최근 넥사플랫폼을 버리고, tui-grid로 개발을 진행하고 있어 참고용으로 기록합니다.
그리드 header에 checkbox를 만들기 위해서는 render를 사용해야합니다.
class checkboxRenderer를 만들어서 모든 행 check / uncheck 기능까지 구현했습니다.
방법은 아래와 같습니다.
<html> <head> <link rel="stylesheet" href="https://uicdn.toast.com/tui-grid/latest/tui-grid.min.css"/> <script src="https://uicdn.toast.com/tui-code-snippet/latest/tui-code-snippet.min.js"></script> <script src="https://uicdn.toast.com/tui.dom/v3.0.0/tui-dom.min.js"></script> <script src="https://uicdn.toast.com/tui-component-popup/v1.5.0/tui-component-popup.min.js"></script> <script src="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.min.js"></script> <script src="https://uicdn.toast.com/tui-date-picker/latest/tui-date-picker.min.js"></script> <script src="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.min.js"></script> <script src="https://uicdn.toast.com/tui-chart/latest/tui-chart.min.js"></script> <script src="https://uicdn.toast.com/tui-grid/latest/tui-grid.min.js"></script> </head> <body> <div id="grid"></div> <script type="text/javascript"> class CheckboxRenderer { constructor(props) { const { grid, rowKey } = props; const label = document.createElement('label'); label.className = 'checkbox tui-grid-row-header-checkbox'; label.setAttribute('for', String(rowKey)); const hiddenInput = document.createElement('input'); hiddenInput.className = 'hidden-input'; hiddenInput.id = String(rowKey); const customInput = document.createElement('span'); customInput.className = 'custom-input'; label.appendChild(hiddenInput); label.appendChild(customInput); hiddenInput.type = 'checkbox'; label.addEventListener('click', (ev) => { ev.preventDefault(); if (ev.shiftKey) { grid[!hiddenInput.checked ? 'checkBetween' : 'uncheckBetween'](rowKey); return; } grid[!hiddenInput.checked ? 'check' : 'uncheck'](rowKey); }); this.el = label; this.render(props); } getElement() { return this.el; } render(props) { const hiddenInput = this.el.querySelector('.hidden-input'); const checked = Boolean(props.value); hiddenInput.checked = checked; } } // Toast UI Grid 생성 const grid = new tui.Grid({ el: document.getElementById('grid'), rowHeaders: [ { type: 'checkbox', header: ` <label for="all-checkbox" class="checkbox"> <input type="checkbox" id="all-checkbox" class="hidden-input" name="_checked" /> <span class="custom-input"></span> </label> `, renderer: { type: CheckboxRenderer } } ], columns: [ {name: 'name', header: 'Name'}, {name: 'age', header: 'Age'}, {name: 'address', header: 'Address'} ], data: [ {name: 'John Doe', age: 30, address: 'New York'}, {name: 'Jane Doe', age: 25, address: 'San Francisco'}, {name: 'Bob Smith', age: 50, address: 'Los Angeles'} ] }); </script> </body> </html>
반응형
'웹 디자인 > JavaScript' 카테고리의 다른 글
| 자바스크립트 배열 내 모든 숫자의 합 구하기 (for, forEach, reduce) (0) | 2023.08.16 |
|---|---|
| Notepad++ 로 자바스크립트 실행해보기 (0) | 2023.06.13 |
| 자바스크립트 변수 선언 키워드 var let const 차이 (0) | 2023.02.11 |
| 자바스크립트 정규표현식(Regular Expression) 기초 패턴 정리 (0) | 2022.08.27 |
| 자바스크립트 문자열 공백 제거하는 방법 (trim, replace) (0) | 2022.08.26 |