본문 바로가기
반응형

jqgrid10

[jqGrid] 특정 셀 편집(editable) 유무 설정하기 (ft. editable-cell, not-editable-cell) - 특정 셀 편집(editable) 유무 설정하기 - jqGrid를 사용하다보면 cellEdit 옵션을 통해 편집모드를 사용하여 셀을 편집하게 되는 경우가 있는데, 이때 "editable-cell", "not-editable-cell" 이라는 클래스 속성을 통해 편집 유무를 설정할 수 있다. 예제를 통해 몇가지 방법에 대해 배워보자. ▷ 1. cellattr 옵션을 통한 편집 유무 설정하기 (ft. 편집 방지) cellattr : function(rowid, value, rawObject, cm, rdata){ //필요에 따라서 if 조건문을 걸어 조건에 맞는 cell만 편집 방지 return "class='not-editable-cell'"; }, cellattr 옵션은 jqgrid에서 사용되는 col.. 2021. 12. 30.
[jqGrid] 다중 선택(multiselect) 적용하기 (ft. 기능 on/off) - 다중 선택 기능 적용하고 기능 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 위 게시글을 들어가보면 알겠지만 기본적으로 제공해주는 옵션이 존재하는데 그게 multis.. 2021. 10. 21.
[jqGrid] 특정 컬럼 보여주고(show)/ 숨겨주기(hide) - 특정 컬럼 숨기고 보이기 - 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']); //복수 ▷ 결과 2021. 10. 21.
[jqGrid] 특정 컬럼/셀(Cell)의 값, 클래스, 스타일 등 변경하기 (ft. setCell) - setCell을 사용한 특정 컬럼의 값, 클래스, 스타일 등 속성 변경하기 - jqGrid에는 특정한 컬럼의 셀을 수정하는데에 사용되는 다용도의 메서드가 존재한다. setCell이라는 jqGrid 내장 메서드에 대해 알아보도록 하자. 이 setCell 메서드는 신기하게도 특정 컬럼 셀의 값을 변경하거나 스타일을 변경 등이 가능하여 자주 사용된다. 하나하나 사용법에 대해 알아보자. ▷ 특정 컬럼의 값 변경하기 (ft. 빈값으로 만들기) // 기본 사용법 $('#mainGrid').jqGrid('setCell', rowid, cellname, data); // jqg14의 id를 가진 row의 mine 컬럼/셀의 값을 record로 변경한다. $('#mainGrid').jqGrid('setCell', '.. 2021. 10. 19.
[jqGrid] 다양한 옵션 및 사용법 모음 (colmodel, option, event, methods) - 다양한 옵션 모음 - 옵션에 대해 알아보기 이전에 일단 아래와 같은 기본 구조를 가지고 시작한다 치고 진행 하도록 한다. ▷ 기본 구조 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:'bb.. 2020. 3. 14.
[jqGrid] No such method: GridUnload ERROR - No such method: GridUnload ERROR - jqGrid를 사용하다가 갑자기 No such method : GridUnload 에러가 발생했는데, 다른 원인이 있을 수 있으나 진행하고 있던 프로젝트에서 발생한 원인은 .jqGrid('GridUnload')를 사용한게 원인이 되었다. 아마 jqGrid 버전에 따른 오류로 생각되는데, 해결방법은 아주 간단하다. $.jqgrid.gridUnload("#mainGrid"); 같은 기능을 다른 방식으로 적용시켜주면 된다. 2020. 3. 8.
[jqGrid] 변경된 값 리로드(재조회)가 안될때 해결하기 (feat. GridUnload) - 조회 시 변경된 값으로 조회가 안될 때 해결방법 - 조회를 시도할 때 변경된 값으로 조회가 안되고, 첫번째 조회 했던 그 값으로만 조회 되는 기이한 현상이 발생하는 경우가 있다. 이럴때 간단하게 해결하는 방법은 그냥 한줄만 추가해주면 되는데, 그냥 단순하게 데이터를 날려버리고 다시 그려주는 방식이라 생각하면된다. $("#mainGrid").jqGrid("GridUnload"); function searchData(mode) { var postData = objConvertJson($("#fieldSurvForm")); $("#mainGrid").jqGrid("GridUnload"); $("#mainGrid").jqGrid({ url : "/board/searchData.do", datatype : ".. 2020. 3. 7.
[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) - jqGrid 다양한 옵션 모음 - 옵션에 대해 알아보기 이전에 일단 아래와 같은 기본 구조를 가지고 시작한다 치고 진행 하도록 한다. ▷ 기본 구조 var searchResultColNames = ['게시글관리번호', '번호', '제 min.. 2020. 3. 7.
[jqGrid] 기본 사용법 (ft. 기본 설정) - jqGrid 기본 사용법 - jqGrid를 표시하는 정도의 기본 사용법에 대해 알아보자. 우선 사용하기에 앞서 jqGrid를 다운로드하고 .js와 .css를 잡아주어야한다. https://mine-it-record.tistory.com/283 [JavaScript] jqGrid 사용하기 1 - 플러그인 다운로드 및 환경 설정 - JqGrid 플러그인 다운로드 및 설정 - jqGird는 데이터를 그리드 형식으로 보여주는 jQuery 플러그인 이다. 이번에 처음으로 접하게 되었는데 확실히 다양한 기능들을 제공해 주어 생각보다 편리한 mine-it-record.tistory.com 1. dom 영역 설정 body영역에서 jqGrid를 표출할 영역을 설정해주어야한다. 2. jqGrid 설정 jqGrid를 설.. 2020. 3. 7.
반응형
TOP