====== 그리드 기본 가이드 ======
그리드 컴포넌트에 대한 기븐 기능 예시 화면이다.
그리드는 데이터 표시 형태에 따라 그리드, 멀티라인 그리드, 트리그리드 컴포넌트로 구별된다.
그리드는 헤더부, 데이터부로 구성되며, 특정 행/열의 셀은 "아이템"이란 용어를 사용한다.
관련 속성으로 linenumber_show, use_checkrow, column, link_data가 있다.
관련 헤더부 속성으로 title, column이 있다.
관련 데이터부 속성으로 data_type, input_type, editable, text_horzalign, link_data가 있다.
관련 이벤트로 on_itemclick, on_itemdblclick이 있다.
관련 API로 getrowcount, getcolumncount, insertitemtext, additem, addrow, deleterow, deleteall, getitemtext, setitemtext가 있다.
===== 예시 =====
템플릿 위치: /HTML5/COMPONENT/GRID/grid_basic
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/COMPONENT/GRID/grid_basic.xml|grid_basic.xml]]
* [[xf5projecthome>template/screen/HTML5/COMPONENT/GRID/grid_basic.js|grid_basic.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/GRID/grid_basic|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
// "getrowcount" 버튼 이벤트
function btn_getrowcount_on_click(objInst)
{
// 행의 갯수를 표시
screen.alert("행 갯수: " + this.grdList.getrowcount());
}
// "getcolumncount" 버튼 이벤트
function btn_getcolumncount_on_click(objInst)
{
// 행의 갯수를 표시
screen.alert("열 갯수: " + this.grdList.getcolumncount());
}
// "그리드 아이템 Loop" 버튼 이벤트
function btn_itemloop_on_click(objInst)
{
var row, column, row_count, column_count, row_data_arr, column_data_arr;
// 행/열의 갯수를 구함
row_count = this.grdList.getrowcount();
column_count = this.grdList.getcolumncount();
// 행별 데이터를 저장할 배열 생성
row_data_arr = [];
for (row = 0; row < row_count; row++) {
// 특정 행의 컬럼별 데이터를 저장할 배열 생성
column_data_arr = [];
for (column = 0; column < column_count; column++) {
// 한 행의 모든 컬럼 데이터를 배열에 추가
column_data_arr.push(this.grdList.getitemtext(row, column));
}
// 특정행의 컬럼별 데이터를 행별 데이터 베열에 추가
row_data_arr.push(column_data_arr.join(","));
}
factory.consoleprint(row_data_arr.join("\n"));
screen.alert(row_data_arr.join("\n"));
}
// "deleterow" 버튼 이벤트
function btn_deleterow_on_click(objInst)
{
var select_row;
// 현재 선택된 행을 구함
select_row = this.grdList.getselectrow();
factory.consoleprint("select_row = " + select_row);
// 행 삭제
this.grdList.deleterow(select_row);
}
// "deleteall" 버튼 이벤트
function btn_deleteall_on_click(objInst)
{
// 그리드 모든 행 삭제
this.grdList.deleteall();
}
// "additem" 버튼 이벤트
function btn_additem_on_click(objInst)
{
var row_index, ret;
// 방법1.
// 초기 데이터 설정 여부 및 그리드 리프레쉬 여부 지정 기능
row_index = this.grdList.additem();
// 방법2.
// 단순 행 추가.
// 많은 행을 추가하는 경우에는 additemex API를 사용 권고(bRepaint 파라미터 활용)
// row_index = this.grdList.addrow();
// 방법3.
// 행을 특정 위치에 삽입 처리
// ret = this.grdList.insertitemtext(this.grdList.getrowcount(), 0, "");
}
// "getitemtext" 버튼 이벤트
function btn_getitemtext_on_click(objInst)
{
var select_row, select_column;
// 현재 선택된 행/열을 구함
select_row = this.grdList.getselectrow();
select_column = this.grdList.getselectcolumn();
// 특정 아이템의 값을 구하여 표시
screen.alert("아이템 값: " + this.grdList.getitemtext(select_row, select_column));
}
// "setitemtext" 버튼 이벤트
function btn_setitemtext_on_click(objInst)
{
var select_row, select_column;
// 현재 선택된 행/열을 구함
select_row = this.grdList.getselectrow();
select_column = this.grdList.getselectcolumn();
// 특정 아이템의 값을 설정
this.grdList.setitemtext(select_row, select_column, "1");
}