GRID
Data table
Default Grid
- Default : 3열 / 팝업 : 2열
- Label 글자수 : 1~9자, 좌측정렬 합니다.
- 입력값이 긴경우 예외적으로 2 cell, 3 cell을 병합하여 사용합니다.
- resizing 시 Label 영역은 고정되며, 입력 영역이 가변됩니다.
<div id="grid" class="grid"></div>
<script>
const grid = new Grid({
el: document.getElementById('grid'),
data: [
{
state: "추가",
date1: "2022-10-20",
department: "기술기획팀",
salary: "5,420,000",
name: "김희영",
position1: "2022-10-20",
position2: "매니저",
position3: "4급",
date2: "2019-10-01",
},
{
state: "입력",
date1: "2022-10-20",
department: "UI개발팀",
salary: "7,553,000",
name: "김정운",
position1: "2022-10-20",
position2: "매니저",
position3: "4급",
date2: "2020-01-05",
},
{
state: "삭제",
date1: "2022-09-01",
department: "디자인팀",
salary: "3,200,000",
name: "김이나",
position1: "2022-10-20",
position2: "매니저",
position3: "기타",
date2: "2022-05-01",
},
{
state: "수정",
date1: "2022-08-20",
department: "총무팀",
salary: "4,530,000",
name: "김경은",
position1: "2022-10-20",
position2: "매니저",
position3: "4급",
date2: "2021-02-12",
}
],
scrollX: false,
scrollY: false,
header : {
height: 44
},
minRowHeight : 44,
rowHeaders: [
{
type: 'checkbox',
header: '<label class="check__label"><input type="checkbox" class="check__input" name="_checked" /><span class="check__style"></span></label>',
width: 44,
renderer: {
type: CheckboxRenderer
},
},
{
header: 'NO',
type: 'rowNum',
width: 49,
},
],
columns: [
{
header: '상태',
name: 'state',
width: 53,
align : 'center',
renderer : {
type : StateRenderer
}
},
{
header: '발령일자',
name: 'date1',
align : 'center',
},
{
header: '부서명',
name: 'department',
align : 'left',
},
{
header: '기본급',
name: 'salary',
align : 'right',
},
{
header: '이름',
name: 'name',
align : 'center',
},
{
header: '직책',
name: 'position1',
align : 'center',
},
{
header: '직위',
name: 'position2',
align : 'center',
},
{
header: '직급',
name: 'position3',
align : 'center',
},
{
header: '입사일',
name: 'date2',
align : 'center',
}
]
});
</script>
Grid : 입력 시 components
팝업 타이틀명
Label
Label
Label
콘텐츠 내용
팝업 타이틀명
팝업 타이틀명
팝업 타이틀명
<div id="grid2" class="grid"></div>
<script>
function buttonRenderer(props){
const el = document.createElement('button');
el.classList.add("btn", "is-primary");
this.el = el;
this.render(props);
}
buttonRenderer.prototype.getElement = function() {
return this.el;
}
buttonRenderer.prototype.render = function(props) {
this.el.innerHTML = String(props.value);
}
function searchButtonRenderer(props){
const formSearch = document.createElement('div');
formSearch.className = "form__search";
const inputSearch = document.createElement('input');
inputSearch.className = "form__searchInput";
const buttonSearch = document.createElement('button');
buttonSearch.className = "btn__search";
formSearch.appendChild(inputSearch);
formSearch.appendChild(buttonSearch);
this.el = formSearch;
this.input = inputSearch;
this.render(props);
}
searchButtonRenderer.prototype.getElement = function() {
return this.el;
}
searchButtonRenderer.prototype.render = function(props) {
this.input.value = String(props.value);
}
function popupButtonRenderer(props){
const el = document.createElement('div');
const span = document.createElement('span');
const link = document.createElement('a');
el.classList.add("tui-grid-cell-content","d-flex","justify-content-between","align-items-center");
link.classList.add("btn", "is-icon");
link.dataset.modalopen = "open";
link.href = props.value[0];
const iconSpan = document.createElement("span");
iconSpan.classList.add("icon", "is-link");
el.appendChild(span);
el.appendChild(link);
link.appendChild(iconSpan);
this.el = el;
this.span = span;
this.render(props);
}
popupButtonRenderer.prototype.getElement = function() {
return this.el;
}
popupButtonRenderer.prototype.render = function(props) {
this.span.innerText = String(props.value[1]);
}
const grid2 = new Grid({
el: document.getElementById('grid2'),
data: [
{
state: "추가",
popup: ["#popup-1","05-IT1234-5"],
combo: "1",
input: "문의드립니다.",
search: "김희영",
date: "2023-01-29",
button: "버튼명",
},
{
state: "입력",
popup: ["#popup-2","05-IT1234-5"],
combo: "1",
input: "긴급히 결재요청 드립니다.",
search: "김희영",
date: "2023-01-29",
button: "버튼명",
},
{
state: "삭제",
popup: ["#popup-3","05-IT1234-5"],
combo: "1",
input: "문의드립니다.",
search: "김희영",
date: "2023-01-29",
button: "버튼명",
},
{
state: "수정",
popup: ["#popup-4","05-IT1234-5"],
combo: "1",
input: "문의드립니다.",
search: "김희영",
date: "2023-01-29",
button: "버튼명",
}
],
scrollX: false,
scrollY: false,
header : {
height: 44
},
minRowHeight : 44,
rowHeaders: [
{
type: 'checkbox',
header: '<label class="check__label"><input type="checkbox" class="check__input" name="_checked" /><span class="check__style"></span></label>',
width: 44,
renderer: {
type: CheckboxRenderer
},
},
{
header: 'NO',
type: 'rowNum',
width: 49,
},
],
columns: [
{
header: '상태',
name: 'state',
width: 53,
align : 'center',
renderer : {
type : StateRenderer
}
},
{
header: 'Popup Button',
name: 'popup',
renderer : {
type : popupButtonRenderer
}
},
{
header: 'Combo box',
name: 'combo',
formatter: 'listItemText',
editor: {
type: 'select',
options: {
listItems: [
{ text: '단순문의1', value: '1' },
{ text: '단순문의2', value: '2' },
{ text: '단순문의3', value: '3' }
]
}
}
},
{
header: 'Input',
name: 'input',
editor: 'text',
},
{
header: 'Search button',
name: 'search',
editor: 'text',
renderer : {
type : searchButtonRenderer,
options: {
text : ""
}
}
},
{
header: 'Date Picker',
name: 'date',
editor: {
type: 'datePicker',
options: {
format: 'yyyy-MM-dd',
language: 'ko',
showToday: true,
}
},
},
{
header: 'Button',
name: 'button',
align : 'center',
renderer : {
type : buttonRenderer,
options: {
text : ""
}
}
}
]
});
</script>
Grid : 데이터가 없을 시
<div id="grid3" class="grid"></div>
<script>
const grid3 = new Grid({
el: document.getElementById('grid3'),
data: [
],
scrollX: false,
scrollY: false,
header : {
height: 44
},
minRowHeight : 44,
rowHeaders: [
{
type: 'checkbox',
header: '<label class="check__label"><input type="checkbox" class="check__input" name="_checked" /><span class="check__style"></span></label>',
width: 44,
renderer: {
type: CheckboxRenderer
},
},
{
header: 'NO',
type: 'rowNum',
width: 49,
},
],
columns: [
{
header: '상태',
name: 'state',
width: 53,
align : 'center',
renderer : {
type : StateRenderer
}
},
{
header:'header',
name: 'date1',
align : 'center',
},
{
header:'header',
name: 'department',
align : 'left',
},
{
header:'header',
name: 'salary',
align : 'right',
},
{
header:'header',
name: 'name',
align : 'center',
},
{
header:'header',
name: 'position1',
align : 'center',
},
]
});
</script>