Grid Filter
오름/내림차순 정렬 필터
<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',
sortingType: 'desc',
sortable: true
},
{
header: '부서명',
name: 'department',
align : 'left',
},
{
header: '기본급',
name: 'salary',
align : 'right',
sortingType: 'asc',
sortable: true
},
{
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>
검색어 필터
<div id="grid2" class="grid"></div>
<script>
const grid2 = new Grid({
el: document.getElementById('grid2'),
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',
sortingType: 'desc',
filter: 'select',
sortable: true,
},
{
header: '부서명',
name: 'department',
align : 'left',
filter: { type: 'text', showApplyBtn: true, showClearBtn: true }
},
{
header: '기본급',
name: 'salary',
align : 'right',
sortingType: 'asc',
filter: 'number'
},
{
header: '입사일',
name: 'date2',
align : 'center',
filter: {
type: 'date',
options: {
format: 'yyyy.MM.dd'
}
}
},
{
header: '이름',
name: 'name',
align : 'center',
},
{
header: '직책',
name: 'position1',
align : 'center',
},
{
header: '직위',
name: 'position2',
align : 'center',
},
{
header: '직급',
name: 'position3',
align : 'center',
}
]
});
</script>
틀고정
<div id="grid3" class="grid"></div>
<script>
const grid3 = new Grid({
el: document.getElementById('grid3'),
data: [
{
date1: "2022-10-20",
department: "기술기획팀",
salary: "5,420,000",
name: "김희영",
position1: "2022-10-20",
position2: "매니저",
position3: "4급",
position: "4급",
date2: "2019-10-01",
},
{
date1: "2022-10-20",
department: "UI개발팀",
salary: "7,553,000",
name: "김정운",
position1: "2022-10-20",
position2: "매니저",
position3: "4급",
date2: "2020-01-05",
},
{
date1: "2022-09-01",
department: "디자인팀",
salary: "3,200,000",
name: "김이나",
position1: "2022-10-20",
position2: "매니저",
position3: "기타",
date2: "2022-05-01",
},
{
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:'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',
},
{
header:'header',
name: 'position2',
align : 'center',
},
{
header:'header',
name: 'position3',
align : 'center',
},
{
header:'header',
name: 'date2',
align : 'center',
},
],
columnOptions: {
frozenCount: 1, // 3개의 컬럼을 고정하고
frozenBorderWidth: 2, // 고정 컬럼의 경계선 너비를 2px로 한다.
minWidth: 210
}
});
</script>
Reference