그리드 컬럼 이동 가이드

그리드 컬럼 마우스로 드래드 이동 예시 화면이다.

그리드의 column_moveable 속성이 true인 경우에만 마우스 드래그 동작으로 컬럼을 이동할 수 있다.

그리드 movecolumn API를 통해서 컬럼을 이동할 수 있다.

방법1. 그리드 헤더부를 드래그하여 이동하고자 하는 컬럼 헤더부에 드랍하여 컬럼을 이동한다.

방법2. 그리드 컬럼을 클릭하여 컬럼 선택 후, 우측에 있는 버튼을 클릭하여 컬럼을 이동한다.

템플릿 위치: /HTML5/COMPONENT/GRID/grid_column_move

템플릿 파일

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

// "선택된 컬럼 좌로 이동" 버튼 이벤트
function btn_movecolumnleft_on_mouseup(objInst)
{
	var select_column_index;

	// 선택된 컬럼 정보를 구함
	select_column_index = this.grdList.getselectcolumn();

	// 선택된 컬럼을 좌측으로 이동
	this.grdList.movecolumn(select_column_index, select_column_index - 1);
}

// "선택된 컬럼 우로 이동" 버튼 이벤트
function btn_movecolumnright_on_mouseup(objInst)
{
	var select_column_index, nColumnCount;

	// 선택된 컬럼 정보를 구함
	select_column_index = this.grdList.getselectcolumn();

	// 선택된 컬럼을 우측으로 이동
	this.grdList.movecolumn(select_column_index, select_column_index + 1);
}