반응형
최근 넥사플랫폼을 버리고, 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 |