- 다중 선택 기능 적용하고 기능 on/off 시키기 -


jqGrid를 옵션을 통해 multiselect(다중 선택) 기능을 적용시켜 보자.

 

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

 

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

- jqGrid 다양한 옵션 모음 - 옵션에 대해 알아보기 이전에 일단 아래와 같은 기본 구조를 가지고 시작한다 치고 진행 하도록 한다. ▷ 기본 구조 var searchResultColNames = ['게시글관리번호', '번호', '제

mine-it-record.tistory.com

 

위 게시글을 들어가보면 알겠지만 기본적으로 제공해주는 옵션이 존재하는데 그게 multiselect이다.

하나하나 알아가 보도록 하자.


▷ 1. multiselect 옵션 설정

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

 

우선 jqgrid option을 설정해 줄때 multiselect 옵션을 true로 설정해준다.

여기서 보면 multiboxonly 를 설정해 주었는데, 이는 굳이 설정해주지않아도 기본적으로 false로 잡혀있으니 상관안해도 되나 이 옵션은 multiselect 기능을 on/off 시켜줄때 아주 큰 역할을 한다.

 

▷ 옵션 적용 결과

 

결과를 보면 알겠지만 그리드 좌측에 체크박스가 생성된다.

다중 선택한 row 데이터를 가져오는 방법은 아래 게시글을 참고하자.

 

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

 

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

- 선택한 row의 id 및 데이터 가져오기 - jqGrid를 사용한다면 선택한 row의 id나 데이터를 가져와야만 하는 경우가 생기는데 어떻게 하는지 알아보자. 사실 가장 간단한 방법은 jqGrid event option을 설정

mine-it-record.tistory.com

 

▷ 2. multiselect 기능 on/off 시키기

사실상 multiselect 옵션을 끄는건 불가능하다.

그렇지만 이는 여러가지 옵션을 통해 없는 기능처럼 만들어 버릴수가 있다.

 

우선 첫번째로 multiboxonly 옵션을 실행시켜줄것인데 이는 jqGrid 메서드를 통해 제어가 가능하다.

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

multiboxonly 옵션은 저 1번 설명글의 결과 이미지처럼 좌측에 나오는 체크박스를 하나밖에 선택할 수 없게 만들어주는 옵션이다. 다중 선택 기능때문에 체크박스가 생겼지만 이 옵션이 true라면 하나씩만 선택이 가능하다.

 

이제 두번째로는 체크박스 컬럼을 눈에서 지워주는 것이다. multiselect 기능으로 인해 생겨났으니 일단 눈에서 지워주자.

$('#data-grid').jqGrid('hideCol', 'cb');

자세한건 아래 게시글을 참조하자.

 

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

 

[JavaScript] jqGrid - 특정 컬럼 보여주고(show)/ 숨겨주기(hide)

- 특정 컬럼 숨기고 보이기 - jqGrid 표준 메서드를 사용하여 특정 컬럼을 보여주고 숨겨주는 방법에 대해 알아보자. ▷ 예제를 위한 그리드 테이블 ▷ 특정 컬럼 숨기기 (hideCol) $('#data-grid').jqGrid('h

mine-it-record.tistory.com

 

첫번째와 두번째 방법을 같이 실행하면 이는 multiselect 기능이 없는것과 동일하게 사용이 가능하다.

(기능을 on/off 시키고싶었지만 multiselect자체를 setGridParam으로 true/false시킬수가 없어서 찾다찾다 발견할 수가 없어서 위 방법들을 사용해서 on/off 처럼 구현해놨다.)

반응형

- 특정 컬럼 숨기고 보이기 -


jqGrid 표준 메서드를 사용하여 특정 컬럼을 보여주고 숨겨주는 방법에 대해 알아보자.

 

▷ 예제를 위한 그리드 테이블


▷ 특정 컬럼 숨기기 (hideCol)

$('#data-grid').jqGrid('hideCol', 'x'); //단일
$('#data-grid').jqGrid('hideCol', ['x','y']); //복수

 

▷ 결과

 

▷ 특정 컬럼 보여주기 (showCol)

$('#data-grid').jqGrid('showCol', 'x'); //단일
$('#data-grid').jqGrid('showCol', ['x','y']); //복수

 

▷ 결과

 

반응형

- setCell을 사용한 특정 컬럼의 값, 클래스, 스타일 등 속성 변경하기 -


jqGrid에는 특정한 컬럼의 셀을 수정하는데에 사용되는 다용도의 메서드가 존재한다.

setCell이라는 jqGrid 내장 메서드에 대해 알아보도록 하자.

 

이 setCell 메서드는 신기하게도 특정 컬럼 셀의 값을 변경하거나 스타일을 변경 등이 가능하여 자주 사용된다.

하나하나 사용법에 대해 알아보자.


▷ 특정 컬럼의 값 변경하기 (ft. 빈값으로 만들기)

// 기본 사용법
$('#mainGrid').jqGrid('setCell', rowid, cellname, data);

// jqg14의 id를 가진 row의 mine 컬럼/셀의 값을 record로 변경한다.
$('#mainGrid').jqGrid('setCell', 'jqg14', 'mine', 'record');

// jqg14의 id를 가진 row의 mine 컬럼/셀의 값을 비운다.
$('#mainGrid').jqGrid('setCell', 'jqg14', 'mine');

여기서 좀 당황스러운게 특정 컬럼의 값을 비우기 위해 data 매개변수 부분을 빈 쿼터('') 로 넣어주면 에러는 않나지만 아무 일도 일어나지 않아서 당황스럽다.

 

위 예제처럼 비우기 위해서는 그냥 비워두면 된다.

 

▷ 특정 컬럼의 스타일 추가/변경하기 (ft. 배경색 주기)

// 기본 사용법 (스타일을 줄때는 data 부분을 빈 쿼터로 넘겨준다.)
$('#mainGrid').jqGrid('setCell', rowid, cellname, data, properties);

// mine 컬럼의 배경 색상을 변경한다.
$('#mainGrid').jqGrid('setCell', 'jqg14', 'mine', '', {'background':'#fcfdfd'});

// mine 컬럼의 배경 색상과 글자 색을 변경한다.
$('#mainGrid').jqGrid('setCell', 'jqg14', 'mine', '', {'background':'#fcfdfd', 'color':'red'});

 

▷ 특정 컬럼의 클래스 추가하기

// 기본 사용법 (클래스를 줄때는 data 부분을 빈 쿼터로 넘겨준다.)
$('#mainGrid').jqGrid('setCell', rowid, cellname, data, class);

// mine 컬럼에 it 클래스를 추가한다.
$('#mainGrid').jqGrid('setCell', 'jqg14', 'mine', '', 'it');

// mine 컬럼에 record 클래스를 추가한다.
$('#mainGrid').jqGrid('setCell', 'jqg14', 'mine', '', 'record');

클래스 예제를 보면 의아한게 하나 있을텐데 스타일을 추가해줄때 사용한 위치에 그대로 클래스명을 주어 사용한다는 것이다. 아마 받는 매개변수 타입이 달라서 가능한 것인지도 모른다.

 

그리고 클래스를 추가했으면 삭제를 해줘야하는데 이는 표준 메서드에는 존재하지 않고 직접적으로 접근해서 지워줘야하는 번거로움이 존재한다.


참고 : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

 

wiki:methods - jqGrid Wiki

 

www.trirand.com

 

반응형

- colNames 손쉽게 설정하기 -


jqGrid를 설정할때 colNames와 colModel 옵션을 넣어주는 부분이 있는데,

보통 아래와 같이 따로 변수로 관리를 해두고 옵션에 넣어두는 식으로 사용하고는 한다.

var colNames =  ['게시글관리번호', '번호', '제목', '작성자', '날짜', '조회수'];
var colModel =         
  [{name:'bbsMgtNo', index:'bbsMgtNo',  align:'center', hidden:true},
  {name:'bbsNum',    index:'bbsNum',    align:'left',   width:'12%'},
  {name:'bbsTitle',  index:'bbsTitle',  align:'center', width:'50%'},
  {name:'bbsWriter', index:'bbsWriter', align:'center', width:'14%'},
  {name:'bbsDate',   index:'bbsDate',   align:'center', width:'12%'},
  {name:'bbsHit',    index:'bbsHit',    align:'center', width:'12%'}];
 
$(function() {
  $("#mainGrid").jqGrid({
    height: 261,
    width: 1019,
    colNames: colNames,
    colModel: colModel,
    rowNum : 10,
    pager: "pager" 
  });
});

 

하지만 구조가 바뀔때마다 colName과 colModel을 두곳을 계속해서 바꾸는게 귀찮기도 하고 실수가 발생할 여지가 있기때문에 그냥 쉽게 아래와 같이 array.map 메서드를 활용해주면 간편하다.

 

var colOptions =  [
    {colName : '게시글관리번호', name:'bbsMgtNo', index:'bbsMgtNo', align:'center', hidden:true},
    {colName : '번호', name:'bbsNum',    index:'bbsNum',    align:'left',   width:'12%'},
    {colName : '제목', name:'bbsTitle',   index:'bbsTitle',  align:'center', width:'50%'},
    {colName : '작성자', name:'bbsWriter',   index:'bbsWriter',  align:'center', width:'14%'},
    {colName : '날짜', name:'bbsDate',     index:'bbsDate',    align:'center', width:'12%'},
    {colName : '조회수', name:'bbsHit',    index:'bbsHit',   align:'center', width:'12%'}
];
 
$(function() {
  $("#mainGrid").jqGrid({
    height: 261,
    width: 1019,
    colNames: colOptions.map(function(item){return item.colName;}),
    colModel: colOptions,
    rowNum : 10,
    pager: "pager" 
  });
});

 

근데 이 방법 외에도 colmodel option 에는 label 옵션이 존재하는데,

어쩌면 label 옵션을 사용하는게 더 나을수도 있다.

 

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

 

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

- jqGrid 다양한 옵션 모음 - 옵션에 대해 알아보기 이전에 일단 아래와 같은 기본 구조를 가지고 시작한다 치고 진행 하도록 한다. ▷ 기본 구조 var searchResultColNames = ['게시글관리번호', '번호', '제

mine-it-record.tistory.com

반응형

- jqGrid 다양한 옵션 모음 -


옵션에 대해 알아보기 이전에 일단 아래와 같은 기본 구조를 가지고 시작한다 치고 진행 하도록 한다.

 

▷ 기본 구조

<body>
     <div class="tableWrap">
        <table id="mainGrid"></table>
        <div id="pager"></div>    
    </div>
 </body>
var searchResultColNames =  ['게시글관리번호', '번호', '제목', '작성자', '날짜', '조회수'];
var searchResultColModel =         
                [{name:'bbsMgtNo',       index:'bbsMgtNo',      align:'center', hidden:true},
                {name:'bbsNum',         index:'bbsNum',        align:'left',   width:'12%'},
                {name:'bbsTitle',       index:'bbsTitle',      align:'center', width:'50%'},
                {name:'bbsWriter',      index:'bbsWriter',     align:'center', width:'14%'},
                {name:'bbsDate',        index:'bbsDate',       align:'center', width:'12%'},
                {name:'bbsHit',         index:'bbsHit',        align:'center', width:'12%'}];

 

이제 옵션에 대해 하나씩 알아보자.


▷ colmodel option

 : 위 기본 구조에서 사용한 searchResultColModel이 이에 해당하며 그 안에는 다양한 옵션이 존재한다.

colModel : [{
  name : "name",
  index : "name",
  width : "20%",
  align : center
  ...
}];
 ○ name : 해당 column 에 출력해야할 데이터의 이름이다. 서버로부터 넘어오는 데이터명을 명시
 ○ index : 데이터 출력과는 연관이 없으며 정렬에 사용할 때 서버로 전송 시 넘어가는 데이터명이다.
 ○ width : column 의 가로 사이즈
 ○ align  : column 내에서의 데이터 정렬 (left, right, center 등?)
 ○ sortable : 해당 컬럼이 정렬될수 있는지를 지정한다. 일반적으로 true 설정이며 특정 컬럼의 정렬을 허용하지 않을때 사용함.
 ○ hidden : 특정 컬럼의 내용을 보이지 않게 하기 위해 설정한다. (input type hidden 과 용도 동일하다 생각하면 될듯.)
 ○ format : intefer, number, currency, data 등의 컬럼 데이터의 format을 설정하기 위해 사용된다.
 ○ label : colNames 가 비어있을 때 컬럼의 제목을 정의한다. (단. colName 배열과 label 속성이 없을 경우 name으로 대체한다.)
 ○ edittype : 편집가능한 필드 타입을 정의하며 사용한다.  (edit 관련 속성 상세 설명)
(text, textarea, select, checkbox, password, button, image, file, custom) 타입을 정의할 수 있으며 기본값은 'text'이다 

참고 : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options

 

wiki:colmodel_options - jqGrid Wiki

 

www.trirand.com

 

▷ jqGrid option

 : jqGrid를 선언해줄때 사용하는 옵션이다.

$("#mainGrid").jqGrid({
  url : "/board/searchData.do", // ajax 처럼 데이터를 주고받을 서버 url 주소이다.
  datatype : "JSON", // local, xml, xmlstring, json, jsonstring, javascript 등의 데이터 타입 기재
  postData : {  // ajax와 마찬가지로 넘겨줄 데이터
    "key1" : value1
    "key2" : value2
    ...
  },                                    
  mtype : "POST", // POST or GET 형식 선택
  colNames : searchResultColNames, // 그리드 헤더의 제목 배열 (colModel 개수와 맞아야함)
  colModel : searchResultColModel,// 그리드 행 데이터 (꼭 컬럼(VO)과 매칭을 시켜줘야하며 colName 개수와 일치)
  rowNum : 10,  // 보여줄 행의 개수 설정
  rowList : [10,20,30], // 한 화면에 보여줄 row의 수(rowNum의 수) 를 조절 가능하도록 기능 제공            
  pager : "#pager",  // 일반적으로 페이징 처리할 태그의 id 값을 넣어줌 (대부분 pager로 통일함)
  height : 261, // 그리드 높이 설정
  width : 1019, // 그리드 넓이 설정 (auto 설정가능)
  autowidth : true, // width 속성과 동시 사용 불가
  sortname : "bbsDate",  // 처음 그리드를 불러올 때 정렬에 사용할 기준 컬럼
  sortorder : "desc", // 정렬 기준
  sortable : true, // colmodel 에기능을 사용하려 true 설정
  multiselect : true, // 그리드 왼쪽부분에 셀렉트 박스가 생겨 다중선택이 가능해진다.
  emptyrecode : "작성된 글이 없습니다.", // 뿌려줄 데이터가 없을 경우 보여줄 문자열 지정
  rownumber : true,   // 각 row의 맨 앞줄에 각 행의 번호가 자동으로 부여 되도록 설정
});

참고 : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

 

wiki:options - jqGrid Wiki

 

www.trirand.com

 

▷ jqGrid event option

: jqGrid 를 사용할 때 발생하는 이벤트 제어 옵션이다. (jqGrid option 사용처럼 jqGrid 안에 넣어서 사용하면 된다.)

loadError : function(xhr, status, error){ // 불러오기 실패했을 경우 발생하는 이벤트
	//xhr : XMLHttpRequest object , status : type of error , error : exception object
},
onSelectRow : function(rowid, status, e){ //row를 선택했을 때 발생하는 이벤트
	//rowid: id of the row , status : status of the selection , e: event object
},
beforeRequest : function(){ // 서버로 데이터를 요청하기 직전에 발생하는 이벤트
	//
},
gridComplete : function(){ // 그리드가 완전히 모든 작업을 완료한 후 발생하는 이벤트
	//
},
loadComplete : function(){ // 서버에 요청을 보낸 직후 바로 발생하는 이벤트
	//
},
onPaging : function(pgButton){ // 페이징이 변경되는 경우에 발생하는 이벤트
	//pgButton : [page button] and also page number in the page input box (press Enter) , etc
},
onRightClickRow : function(rowid, iRow, iCol, e){ // 마우스 우클릭 했을경우 발생하는 이벤트
	//rowid : id of the row , iRow : index of the row , iCol : index of the cell , e : event object
},
onSelectAll : function(aRowids, status){ // 체크박스를 눌러 모든 row를 선택할 경우 발생하는 이벤트 (multiselection 옵션 활성화 필수)
	//aRowids : array of the selected rowid's , status : header check box return true or false (true if checked, false if not checked)
},
onCellSelect : function(rowid, iCol, cellcontent, e){// cell 즉 column 선택을 처리하기위해 사용되는 이벤트 (cell 식별 시 사용)
	//rowid : id of the row , iCol : index of the cell , cellcontent : content of the cell , e : event object
},

참고 : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events

 

wiki:events - jqGrid Wiki

 

www.trirand.com

 

▷ jqGrid methods

: jqGrid를 사용할때 갖가지 방식으로 사용이 가능한 내장되어 있는 메서드이며, 직접적으로 jqGrid를 jQuery로 접근하여 사용이 가능하다.

$('#mainGrid').jqGrid('setCell',...);

 

 

참고 : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

 

wiki:methods - jqGrid Wiki

 

www.trirand.com

 

반응형

- No such method: GridUnload ERROR -


jqGrid를 사용하다가 갑자기 No such method : GridUnload 에러가 발생했는데,

다른 원인이 있을 수 있으나 진행하고 있던 프로젝트에서 발생한 원인은 .jqGrid('GridUnload')를 사용한게 원인이 되었다.

 

아마 jqGrid 버전에 따른 오류로 생각되는데, 해결방법은 아주 간단하다.

$.jqgrid.gridUnload("#mainGrid");

같은 기능을 다른 방식으로 적용시켜주면 된다.

 

반응형