[jqGrid] 선택한 row의 id 및 값(RowData) 가져오기 (feat. selrow, selarrrow, getRowData)

- 선택한 row의 id 및 데이터 가져오기 -

---

jqGrid를 사용한다면 선택한 row의 id나 데이터를 가져와야만 하는 경우가 생기는데 어떻게 하는지 알아보자.

 

사실 가장 간단한 방법은 jqGrid event option을 설정해서 사용하는 것이다.

 

option은 아래 글을 확인해서 사용해보자.

https://mine-it-record.tistory.com/290

[JavaScript] jqGrid 다양한 옵션 모음 (colmodel, option, event)

---

▷ 예제1) onSelectRow 옵션을 사용해 rowData 가져오기

$("#mainGrid").jqGrid({
  //... 각종 옵션 설정
  ,onSelectRow : function(rowId, status, e){ 
    $("#mainGrid").jqGrid("getRowData",rowId);
    $('#mainGrid').getRowData(rowId);
  },
});

.jqGrid('getRowData') 와 .getRowData()는 같은 기능을 제공한다.

 

▷ 예제2) 스크립트로 rowId 가져오기 (ft. selrow, selarrrow)

//selrow
var rowid = $("#mainGrid").jqGrid("getGridParam","selrow");
var rowid = $("#mainGrid").getGridParam("selrow");

//selarrrow
var rowid = $("#mainGrid").jqGrid("getGridParam","selarrrow");
var rowid = $("#mainGrid").getGridParam("selarrrow");

따로 jqGrid 옵션을 사용하지 않고 선 선택 후 나중에 후 처리를 하고자 할때 스크립트로만 사용해주면 되는데,

두가지 방법 selrow 와 selarrow에 대해 알아보자.

 

selrow는 grid에서 마지막으로 선택된 열의 id를 가져오는데, 왜 마지막이라는 표현을 썼냐면 selrow는 하나만 가져오는것이나 grid는 다중선택도 지원하기 때문이다.

selarrrow는 이름 자체도 중간에 배열(arr)이 들어가서 알겠지만 선택한 모든 열의 rowId를 가져오는 것이다.

그치만 역시 하나만 선택해도 무조건 배열로 담기니 사용할때 잘 사용해주도록하자.

 

▷ 예제3) 스크립트로 rowData 가져오기

//모든 열의 데이터 가져오기
var allRowData = $("#mainGrid").jqGrid("getRowData");
var allRowData = $("#mainGrid").getRowData();
 
//선택한 열의 데이터 가져오기
var selRowData = $("#mainGrid").jqGrid("getRowData",rowId);
var selRowData = $("#mainGrid").getRowData(rowId);

 

예제1번에서도 다룬것처럼 똑같은 방식으로 가져오면 된다.

만약 rowId가 생략된다면 모든 열의 데이터를 가져온다.