no 잼 no gain

jqGrid를 사용하기 위해서는 먼저 기본 환경 설정을 완료해야 합니다. jqGrid는 jQuery를 기반으로 하므로, jQuery와 jqGrid 관련 CSS 및 JavaScript 파일을 프로젝트에 포함시켜야 합니다. 이를 통해 그리드 UI를 구현하고, 그리드 동작에 필요한 기능을 설정할 수 있습니다. jqGrid는 로컬 설치와 CDN 방식 두 가지 방법으로 설정할 수 있습니다. 여기서는 간단한 CDN 방식을 설명하고, 기본 설정을 통해 그리드를 생성하는 방법을 살펴보겠습니다.1. CDN을 통한 jqGrid 설정jqGrid는 CSS와 JavaScript 파일을 로드하여 작동합니다. 기본적으로 필요한 파일들은 다음과 같습니다:jQuery: jqGrid는 jQuery를 기반으로 동작하기 때문에 필수적으로 ..

jqGrid는 웹 애플리케이션에서 표 형식의 데이터를 효율적으로 관리하고 표시할 수 있도록 도와주는 JavaScript 그리드 플러그인입니다. jQuery를 기반으로 동작하며, JSON, XML 등 다양한 데이터 포맷을 지원합니다. 이를 통해 서버나 클라이언트에서 데이터를 가져와 그리드 형태로 화면에 출력할 수 있습니다. jqGrid는 데이터의 페이징, 정렬, 검색 및 편집과 같은 기본 기능을 제공하며, 사용자가 요구하는 다양한 방식으로 커스터마이징이 가능합니다.jqGrid는 특히 대용량 데이터를 처리하는 데 강점이 있으며, 비동기 방식으로 데이터를 서버와 주고받는 방식으로 성능을 높일 수 있습니다. 이 플러그인은 웹 애플리케이션 개발 시 데이터를 효율적으로 표시하고 관리할 수 있도록 도와주는 강력한 도..

// textbox focus out 시 cell close afterEditCell: function(id,name,val,iRow,iCol){ $("#"+iRow+"_"+name).bind('blur',function(){ $('#jqGrid').saveCell(iRow,iCol); }); }

// 행 추가 rowId = $("#mainGrid").getGridParam("reccount"); // 페이징 처리 시 현 페이지의 Max RowId 값 $("#mainGrid").jqGrid("addRowData", rowId+1, rowData, 'first'); // 첫 행에 Row 추가 $("#mainGrid").jqGrid("addRowData", rowId+1, rowData, 'last'); // 마지막 행에 Row 추가 // 행 삭제 $("#mainGrid").jqGrid("delRowData", rowId); // 행 삭제

url:'/list.do', // 데이터 리턴 받을 URL datatype: 'json', // 리턴받을 데이터 타입 jsonReader: { id:'id', // 키 컬럼 명 root:rows, // 그리드에 로드 할 Json 형태의 데이터 page:'page', // 현재 페이지 total:'total', // 총 페이지 Count records:'records' // 총 Row Count } rowNum: 20, // 한 페이지에 로드할 Row 수 rowList: [20, 30, 40], // 한 페이지에 로드할 Row 수 설정 (Pager 우측에 SelectBox 우측에 선택 가능) editurl:'clientArray', width: 500, // 넓이 설정 ('auto' 자동설정 가능) hei..

// 아래 스타일을 추가 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ .ui-jqgrid tr.jqgrow td { text-overflow : ellipsis; -o-text-overflow : ellipsis; }

// 헤더 명의 텍스트 길이 만큼 헤더 높이 조절 // 아래 스타일을 추가 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ th.ui-th-column div { white-space:normal !important; height:auto !important; }

$("#mainGrid").jqGrid('setGroupHeaders', { useColSpanStyle: true, groupHeaders:[{ startColumnName: "col1" // 병합을 시작 할 헤더 명 , numberOfColumns: 3 // 병합 헤더 개수 , titleText: 'merge' // 병합 후 상위 레벨의 헤더 명 }] }); ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ────────────────────────── merge ────────────────────────── col1 │ col2 │ col3 ──────────────────────────

$("#mainGrid").setSelection(rowId); // 로우 선택 시 음영 처리 $("#"+rowId).removeClass("ui-state-highlight"); //해제 $("#"+rowId).addClass("ui-state-highlight"); //선택