-
Notifications
You must be signed in to change notification settings - Fork 0
Grid
Grid의 기능과 사용법에 대해 설명하는 문서입니다.
최종 수정일: 2015-09-30
- [뒤로 가기(사용자 설명서)](사용자 설명서)
Grid는 Paging과 행 개수를 선택하는 Selectbox와 연동하는 것을 기준으로 만들어졌기 때문에
Paging, Selectbox를 필요로 합니다.
/**
*
*/
(function () {
'use strict';
// create instance
var gridTest = new Grid('#grid_test', '#paging_test', '#sb_test');
// configure
gridTest
.rowsPerPage($('#sb_test').val()) // 10
.cols(['No', '제목', '등록자', '등록일', '첨부파일 개수', '팝업여부'])
.maps(['WRITE_SEQ', 'TITLE', 'USER_NAME', 'CTIME', 'FILE_CNT', 'POPUP_USE'])
.mapId('WRITE_SEQ')
;
// load data
$.ajax({
type: 'GET',
url: '/manage/oper/notice/search',
// dataType: 'json',
// data: {},
success: function (data) {
// set data & draw
gridTest
.totalCount(data.length)
.rows(data)
.make();
},
error: function (xhr, status, message) {
console.log(message);
}
});
})();<div>
<div class="fr">
<div class="mu-selectbox" id="sb_test">
<button class="mu-value">10개씩 보기</button>
<ul class="mu-list">
<li value="10">10개씩 보기</li>
<li value="20">20개씩 보기</li>
<li value="50">50개씩 보기</li>
<li value="100">100개씩 보기</li>
</ul>
</div>
</div>
<div>
<table class="mu-grid mu-grid-sort" id="grid_test"></table>
<div class="mu-pagination" id="paging_test"></div>
</div>
</div>Grid(String grid selector[, String paging selector][, String selectbox selector])- JQuery selector에 해당하는 문자열을 생성자의 인자로 입력받습니다.
- paging/selectbox selector는 optional 입니다.
- ex)
var grid = new Grid('#grid_test'); <table id="grid_test"></table>다음과 같은 멤버변수들에 직접 접근하여 사용할 수 있습니다.
- 생성자의 인자로 입력한 JQuery selector 입니다.
- selector를 통해 생성한 JQuery object 입니다. (
$(selector))
- paging selector 를 생성자의 인자로 입력하였을 때 생성되는 Paging instance 입니다.
- selectbox selector 를 생성자의 인자로 입력하였을 때 생성되는 selectbox의 JQuery object 입니다.
아래 기술된 메서드는 arguments를 입력하면 setter로, 입력하지 않으면 getter로 동작합니다. ex)
grid.rows([ ... ]); // setter
var rows = grid.rows(); // gettercheckbox를 첫 번째 열로 추가할 것인지 여부에 대한 메서드입니다.
false로 설정하면 첫 번째 열에 checkbox를 만들지 않습니다.
테이블 헤더를 클릭하여 해당 열을 기준으로 데이터를 정렬할 것인지 여부에 대한 메서드입니다.
false로 설정하거나, 'sort' 이벤트 리스너를 등록하면 정렬 기능이 동작하지 않습니다.
<thead>를 구성 정보에 대한 메서드입니다.
<th> 태그에 들어갈 텍스트 값들로 이루어진 배열을 입력합니다.
<tbody>를 구성 정보에 대한 메서드입니다.
<td> 태그에 들어갈 값들을 rows 데이터에서 어떤 property name으로 가져올지를 지정합니다.
Grid 데이터에 대한 메서드입니다.
maps()와 연계됩니다.
각 행(row)별 데이터에 id property name 값에 대한 메서드입니다.
이 값을 지정하면, <tr> 태그의 data-id 속성으로 property value가 입력됩니다.
Grid 데이터 크기에 대한 메서드입니다.
rows.length 값과는 다르게 지정할 수 있습니다.
Paging을 사용할 때, 한 화면에 몇 개의 행을 출력할 지에 대한 메서드입니다.
Paging을 사용할 때, Paging의 여러 설정값들을 한 번에 설정하거나 가져오는 메서드입니다.
이벤트 listener를 등록하는 메서드입니다.
이벤트는 'move', 'changePerPage' 등이 있으며 하단의 Events 항목을 참조하시길 바랍니다.
설정값과 데이터를 가지고 실제로 테이블을 구성하는 메서드입니다.
지정한 index의 열을 대상으로 하는 iterator를 설정하는 메서드입니다.
다음과 같이, 해당 열의 template를 변경하거나 새로 구성할 때 사용합니다.
ex)
// set data & draw
gridTest
.totalCount(data.length)
.rows(data)
.eachCell(6, function () {
var $td = $(this);
var sid = $td.parent().attr('data-id');
$td.html([
'<a href="#" onclick="editRow(this); return false;" class="mu-btn mu-btn-xs mu-btn-icon mu-btn-icon-only"><i class="mu-icon-img edit"></i></a>',
'<a href="#" onclick="checkRow(this); return false;" class="mu-btn mu-btn-xs mu-btn-icon mu-btn-icon-only" style="display: none"><i class="mu-icon-img check"></i></a>',
'<a href="#" onclick="cancelRow(this); return false;" class="mu-btn mu-btn-xs mu-btn-icon mu-btn-icon-only" style="display: none"><i class="mu-icon-img cancel"></i></a>'
].join(''));
})
.make();아래 메서드들은 checkbox를 구성하였을 때에만 정상 동작합니다.
checked 상태의 <tr>을 선택한 JQuery object를 반환합니다.
checked 상태의 rows 데이터의 mapId 값들을 배열로 반환합니다.
checked 상태의 rows 데이터를 배열로 반환합니다.
checked 상태가 아닌 rows 데이터를 배열로 반환합니다.
Paging을 사용할 때만 발생하는 이벤트입니다.
Paging을 이용하여 페이지를 변경하였을 때 발생합니다.
rowPerPage 값을 변경하는 selectbox를 사용할 때만 발생하는 이벤트입니다.
selectbox의 선택 값을 변경하였을 때 발생합니다.
sorting(true)로 설정되어있을 때만 발생하는 이벤트입니다.
테이블 헤더를 클릭하였을 때 발생하며, 어떤 열을 클릭하였는지를 알려줍니다.