jqGrid 행 추가 및 데이터베이스 저장 구현
jqGrid를 사용하여 동적으로 행을 추가하고, 입력된 폼 데이터를 서버로 전송하여 데이터베이스에 저장하는 방법을 설명합니다. 전체 그리드는 HTML 폼 안에 포함되며, 제출 시 직렬화된 입력 값들이 Spring 기반 백엔드로 전달됩니다.
HTML 폼 구조
jqGrid는 <form> 태그 내부에 위치하며, 폼 제출 시 모든 입력 요소가 함께 전송될 수 있도록 구성합 ...
7월 5일 23:14에 게시됨
jqGrid 기반 데이터 조회 구현 방법
이 문서는 기존의 jqGrid 테이블 구성 및 페이지네이션 설정을 바탕으로, 사용자 입력에 따라 동적 조건 검색을 수행하는 방법을 설명합니다. 앞선 글에서 정의한 엔티티 클래스와 테이블 구조는 동일하게 활용되며, 주요 변경점은 쿼리 기능 확장입니다.
HTML 구성
검색 버튼을 통해 조건 기반 조회를 실행할 수 있도록 다음과 같이 버튼을 추가합니다.
...
6월 30일 03:40에 게시됨
jqGrid 인라인 편집 및 데이터 저장 기능 구현
jqGrid 테이블의 인라인 편집, 저장 및 취소 기능 구현
HTML 구조
<div class="panel-body">
<div id="gridPager"></div>
</div>
JavaScript 코드
$("#gridTable").jqGrid({
colModel: [ //jqGrid 각 열의 구성 정보. 이름, 인덱스, 너비, 정렬 방식 등...
{name: 'id', index: 'id', width: ...
6월 29일 19:05에 게시됨
jqGrid에서 서브그리드 구현 방법
서브그리드 이벤트 핸들링
jqGrid의 서브그리드 기능 구현 시 주요 이벤트:
subGridRowExpanded: '+' 아이콘 클릭 시 발동. 자동 생성된 div 엘리먼트의 ID와 행 ID 획득 가능
subGridRowColapsed: '-' 아이콘 클릭 시 발동. 서브그리드 div 자동 제거
사용자 정의 동작 구현 가능 (예: 서브그리드 대체 기능)
기본 그리드 설정
<div class="container">
<ta ...
5월 28일 17:33에 게시됨