[JS] jquery_jqGrid / ajax

https://coding-plant.tistory.com/97

[Javascript] jqGrid 사용법 총 정리

 

 

( jqGrid 옵션들 )

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

[jqGrid] 다양한 옵션 및 사용법 모음 (colmodel, option, event, methods)

 

 

(jqGrid 기본옵션들 22)

https://1004lucifer.blogspot.com/2019/04/jqgrid_65.html

[jqGrid] 기본 옵션 설명

 

---

[ jqGrid 옵션 ]

 

* onCellSelect : function (rowid, iCol, cellcontent, e) {  }  _ 셀 클릭 이벤트

  - rowid : 행번호

 - iCol : 열번호

 - cellcontent : 셀의 값

 - e : event

 

* gridComplete  

그리드의 모든 데이터 로드 & HTML 테이블이 완전히 빌드된 직후 호출. 

=> 그리드 로드 이후 DOM 요소 조작을 위해 사용.

 

* loadComplete

gridComplete 이벤트 직후에 호출, 서버로부터 데이터를 성공적으로 받아온 직후에 실행.

=> 로딩된 데이터를 기반으로 추가작업을 위해 사용.

 

---

[ jqGrid 메소드 ]

 

* getGridParam ( selrow / selarrow )   _ 선택된행 가져오기 _ rowId를 반환

('$jqGrid').getGridParam('selrow');
('$jqGrid').jqGrid('getGridParam', 'selrow');

선택된 복수행 가져오기 ( jqGrid의 multiselect 옵션이 true 일때 ) _ rowId 배열을 반환

('$jqGrid').getGridParam('selarrow');
('$jqGrid').jqGrid('getGridParam', 'selarrow');

 

* getRowData (rowId)   _ 행 가져오기

('$jqGrid').getRowData(rowid);
('$jqGrid').jqGrid('getRowData', rowid);

 

* setRowData (rowId, data, cssProp)   _ 데이터수정

('$jqGrid').setRowData(rowid, false, { background : '#F5EFC2' });
('$jqGrid').jqGrid('setRowData', rowid, false, { background : '#F5EFC2' });

data 수정없이 CSS만 적용하려는 경우에는 data에 false값을 넣어주면 된다.

 

* addRowData (rowId, data, position*, srcRowId*)  _행추가

 - position : 추가될 위치 => first, last, before, after

 - srcRowId : opsition이 before, after 일때 id값

$("#jqGrid").jqGrid("addRowData", (rowId+1), data, 'last');

 

* clearGridData ()  _ 해당 grid에 불러온 데이터 초기화

('$jqGrid').clearGridData();
('$jqGrid').jqGrid('clearGridData');

 

* delRowData (rowId)  _ 행삭제

('$jqGrid').delRowData();
('$jqGrid').jqGrid('delRowData ');

 

* getCell (rowId, iCol) _ 특정 셀 데이터 추출

('$jqGrid').getCell(rowId, 'name');
('$jqGrid').jqGrid('getCell', rowId, 'name');

 

 

---

 

[ ajax ]

* success : 요청 후 성공시 로직

* error : 요청 후 실패시 로직

* beforeSend  : 요청 보내기 직전 실행될 로직

* complete : 요청 이후 실행할 로직 (success, error 여부 관계없음)

=> beforeSend 와 complete로 보통 로딩관련 처리하는듯

---

[ beforeSend ]  

jqXHR 객체를 매개변수로 받는다. 즉, 통신 직전에 jqXHR에 헤더값을 추가하여 전송하는 것.

$.ajax({
  url: "  ",
  type: "POST",
  data: { key: "value" },
  beforeSend: function(xhr) {
    // 요청에 커스텀 HTTP 헤더 추가
    xhr.setRequestHeader("X-Custom-Header", "CustomValue");
    
  },
  success: function(data) {
    // 성공
  },
  error: function(xhr, status, error) {
    // 실패(오류)
  }
});

 

---

 

* Content-Type : 서버로 보내는 데이터 타입

default 는 application/x-www-form-urlencoded; charset=UTF-8  이 지정되어 있어 생략가능.

보통은 json 형태로 데이터를 주고받기 때문에 json형태의 데이터를 서버로 보내려면 아래처럼 지정.

contentType : 'application/json; charset-utf-8'
dataType   : "json"
data       : JSON.stringify(data)

=> data 옵션에 객체가 아니라 특정 데이터 타입을 전달하는 경우, 

즉, 위처럼 JSOM문자열을 전달하는 경우 contentType을 'application/json' 이라고 명시적으로 지정해줘야 한다.

 

요청에 여러개의 헤더를 추가하는 경우 아래처럼 header 옵션에 직접 써주면 된다. 

header : { "Content-Type": 'application/json; charset-utf-8' }
dataType   : "json"
data : data 

=> 위처럼 data(객체)를 전달하는 경우 contentType 생략가능.

---

* dataType : 서버로 보내는 데이터 타입

default 는 text.

json의 형태로 받고 싶다면 dataType 을 "json"으로 지정해주면 되고 

text로 받아서 success 단계에서 json객체로 역직렬화 해주는 방법도 있다. 

 

아니면 서버에서 json객체를 생성하고 json.toString() 형태로 리턴하는 방법도 있다.