그리드 기본 가이드

그리드 컴포넌트에 대한 기븐 기능 예시 화면이다.

그리드는 데이터 표시 형태에 따라 그리드, 멀티라인 그리드, 트리그리드 컴포넌트로 구별된다.

그리드는 헤더부, 데이터부로 구성되며, 특정 행/열의 셀은 “아이템”이란 용어를 사용한다.

관련 속성으로 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

템플릿 파일

• grid_basic.xml
• grid_basic.js
• 새창으로 실행

// "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");
}