98 lines
4.7 KiB
HTML
98 lines
4.7 KiB
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.0">
|
|
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
|
<link href="../../css/sb-admin-2.min.css" rel="stylesheet">
|
|
<link href="../../css/sb-custom-1.css" rel="stylesheet">
|
|
<script type="text/javascript" src="../../js/sb-custom-1.js"></script>
|
|
<title>Grid 활용: 기본기능</title>
|
|
</head>
|
|
<body>
|
|
<div class="div-Title01">Grid 활용: 기본기능</div>
|
|
|
|
<div class="div-margin01 div-border01">
|
|
<div class="div-header01 div-border01">Information</div>
|
|
<div class="div-content01">
|
|
Grid의 기본기능 사용법
|
|
<ul>
|
|
<li><a class="href-collapse" href="#sort">Sort</a></li>
|
|
<li><a class="href-collapse" href="#groupby">Group By</a></li>
|
|
<li><a class="href-collapse" href="#filter">Filter</a></li>
|
|
<li><a class="href-collapse" href="#contextmenu">Context Menu(팝업메뉴)</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="div-border01 div-margin01">
|
|
<div class="div-header01 div-border01"><a name="sort">Sort</a></div>
|
|
<div class="div-content01" id="sort">
|
|
Grid의 Header Column을 1회 클릭할때 마다 아래와 같이 정렬이 됩니다.<br />
|
|
오름차순 ➝ 내림차순 ➝ 정렬해제<br />
|
|
하나 이상의 컬럼을 정렬할때에는 [Shift key]를 누른상태에서 Header Column을 클릭합니다.<br />
|
|
선택된 Header Column 순서대로 정렬을 실행합니다.<br />
|
|
<div class="div-padding01">
|
|
<img src="Image/UG_item01_Sort1.png" onclick="OnloadImg(this.src)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="div-border01 div-margin01">
|
|
<div class="div-header01 div-border01"><a name="groupby">Group By</a></div>
|
|
<div class="div-content01" id="groupby">
|
|
Header Column을 Group by: 영역으로 드래그하면 컬럼값으로 그룹화가 실행됩니다.<br />
|
|
<div class="div-padding01">
|
|
<img src="Image/UG_item01_GroupBy1.png" onclick="OnloadImg(this.src)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="div-border01 div-margin01">
|
|
<div class="div-header01 div-border01"><a name="filter">Filter</a></div>
|
|
<div class="div-content01" id="filter">
|
|
Grid는 다양한 Filter 기능을 제공하며, 옵션 및 기능에는 일괄해제(Clear Filter) 기능이 있습니다.<br />
|
|
<div class="div-padding01">
|
|
<img src="Image/UG_item01_Filter1.png" onclick="OnloadImg(this.src)" />
|
|
<br />
|
|
[옵션 및 기능] Clear Filter<br />
|
|
<img src="Image/UG_item01_Filter2.png" onclick="OnloadImg(this.src)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="div-border01 div-margin01">
|
|
<div class="div-header01 div-border01"><a name="contextmenu">Context Menu (팝업메뉴)</a></div>
|
|
<div class="div-content01" id="contextmenu">
|
|
<br />
|
|
<ul>
|
|
<li>[Column Chooser] 컬럼을 숨기거나 표시를 설정합니다.</li>
|
|
<li>[Copy Cell Text] 선택된 Cell의 값을 클립보드에 저장합니다.</li>
|
|
<li>[Copy Row Text] 선택된 Row의 값들을 클립보드에 저장합니다.</li>
|
|
<li>[Copy Message] 선택된 항목의 메시지를 클립보드에 저장합니다.</li>
|
|
<li>[Export Excel] Grid의 내용을 엑셀문서로 저장합니다.</li>
|
|
</ul>
|
|
<div class="div-padding01">
|
|
<img src="Image/UG_item01_ContextMenu.png" onclick="OnloadImg(this.src)" />
|
|
<br />
|
|
[Column Chooser] 숨겨진 컬럼목록 ⟷ Grid Header<br />
|
|
<img src="Image/UG_item01_ColumnChooser1.png" onclick="OnloadImg(this.src)" />
|
|
<br />
|
|
[Copy Message]를 사용하여 메모장에 복사된 메시지<br />
|
|
<img src="Image/UG_item01_CopyMessage1.png" onclick="OnloadImg(this.src)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const items = document.querySelectorAll('.div-header01');
|
|
items.forEach(item => item.addEventListener('click', ToggleNextElement_Div));
|
|
|
|
const items0 = document.querySelectorAll('.href-collapse');
|
|
items0.forEach(item => Close_IDofHref(item));
|
|
items0.forEach(item => item.addEventListener('click', Open_IDofHref));
|
|
</script>
|
|
|
|
</body>
|
|
</html> |