jqGrid multiselect 한개만 선택 하도록 하는 방법

개요

jqGrid multiselect 한개만 선택 하도록 하는 방법을 찾고 있었으나 제대로 동작하지 않아 절리한다.

 

상세 설명

기본 설정

아래와 같이 jqGrid 설정을 하고 하나만 선택 하다록 하였으나 하나만 체크 박스표시 표시만 변경될 뿐이 었다.

$('#data-grid').jqGrid({
  ...,
  multiselect : true, // 그리드 왼쪽부분에 체크 박스가 생겨 다중선택이 가능해진다.
  multiboxonly : false, // 다중선택을 단일 선택으로 제한
  ...
});

$('#data-grid').jqGrid('setGridParam',{multiboxonly : true});
$('#data-grid').jqGrid('hideCol', 'cb');

다시 검색을 해서 확인을 해보니 beforeSelectRow 함수(이벤트) 를 이용한 방법이 있어 테스트 해보았으나 정상동작을 하지 않았다.

...
beforeSelectRow function(rowid, e){
 var $myGrid = $(this),
 i=$.jgrid.getCellIndex($(e.target).closest("id")[0]),
 cm=$myGrid.jqGrid("getGridParam","colModel");
 
 if(cm[i].name==='cb'}{
$("tab3-grid").jqGrid("resetSeletion"), // 멀티 셀렉트 그리드에서 체크 박스 전체 해제
return true;
} else {
$("#grid").jqGrid("resetSeletion"), // 멀티 셀렉트 그리드에서 체크 박스 전체 해제
return true;
}
},
...

 

반응형

그리드 이벤트 정리

함수 기능을 검색해 보고 삽질을 시작했다.

Event	parameter	Description
beforeSelectRow	rowid, e	사용자가 row 클릭 했을때 선택 직전 발생 rowid - row의 id e - 이벤트객체 true, false 둘중에 하나 반환을 해야 하며, true 리턴 시 선택이 완료, false 리턴 시 행이 선택되지 않고 다른 동작도 발생하지 않음.
onCellSelect	rowid, iCol, cellcontent, e	그리드의 특정 셀을 클릭시 발생 rowid - row의 id iCol - cell의 index cellcontent - cell의 content e - 클릭 Element의 이벤트객체 (PS. 셀편집 모드를 사용하지 않을때 사용할 수 있으며, 셀편집모드를 사용하면 이벤트 발생되지 않음)
onRightClickRow	rowid, iRow, iCol, e	row에서 오른쪽 클릭 직후 발생 rowid - row의 id iRow - row의 index (rowid와 함께사용을 권고하지 않음) iCol - cell의 index e - 이벤트객체 (Opera는 oncontextmenu 이벤트를 지원하지 않아서 Opera에서는 작동하지 않음)
onSelectRow	rowid, status, e	row 클릭 한 직후 발생 rowid - row의 id status - 선택상태 (multiselect옵션 true인경우 사용, 행이 선택된경우 true, 선택되지 않은경우 false) e - 이벤트객체

반응형

결론

아래와 같이 설정하면 하나만 선택할 수 있습니다.

onSelectRow : function(userId, status, e){
	// 선택 항목 표시
	$("#grid-select").jqGrid("getRowData",userId);
	$('#grid-select').getRowData(userId);    
},
beforeSelectRow : function(rowid, e){
	// 모든 체크 박스 해제
	$("#grid-select").jqGrid("resetSelection");
},

덤으로 아래 코드는  해더에 있는 전체 체크 박스 안보이게 하는 방법입니다. 

loadComplete: function () {
	$("#cb_grid-select").off("click").remove();
},