guide:component:grid:grid_column_move [xFrame5 TechNet]

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== 그리드 컬럼 이동 가이드 ======

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

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

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


===== 예시 =====

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

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

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

템플릿 파일
  * [[xf5projecthome>template/screen/HTML5/COMPONENT/GRID/grid_column_move.xml|grid_column_move.xml]]
  * [[xf5projecthome>template/screen/HTML5/COMPONENT/GRID/grid_column_move.js|grid_column_move.js]]
  * [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/GRID/grid_column_move|새창으로 실행]]

<php>
echo '<html>';
echo '<iframe src="';
echo $conf['plugin']['xf5']['xf5projecthome'], 'template/template.html?';
echo 'xframe_screen_url=/HTML5/COMPONENT/GRID/grid_column_move"';
echo ' class="_xf5_iframe"';
echo ' style="';
echo $conf['plugin']['xf5']['xf5iframestyle'];
echo '">';
echo '</iframe>';
echo '</html>';
</php>

==== 화면 스크립트 ====

<sxh javascript>
// "선택된 컬럼 좌로 이동" 버튼 이벤트
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);
}
</sxh>