반응형

전체 글 768

[jqGrid] 7. 기능 확장

jqGrid는 그리드 내 데이터 관리를 위한 필터링 및 검색, 정렬 및 페이징, 그리고 사용자 정의 버튼 및 액션 추가 기능을 통해 더욱 강력한 사용자 경험을 제공합니다. 이 글에서는 이러한 기능들을 구현하는 방법과 예제 소스를 소개합니다.필터링 및 검색 기능 구현jqGrid는 그리드 데이터를 필터링하고, 검색할 수 있는 강력한 기능을 제공합니다. 기본적으로 그리드 상단에 검색 필드를 추가하여 사용자가 원하는 데이터를 쉽게 찾아볼 수 있습니다.필터링 및 검색 기능 예제  설명: 이 코드는 필터링 및 검색 기능을 구현한 예제입니다. filterToolbar 메서드를 통해 검색창을 그리드 상단에 추가할 수 있으며, 각 열에 대해 필터링 옵션을 제공합니다. 그리드 정렬 및 페이징 설정jqG..

JS/jqGrid 2024.09.11

[jqGrid] 6. 데이터 편집 및 수정

jqGrid는 데이터 편집과 수정을 위한 여러 가지 유연한 방법을 제공합니다. 이 중 가장 많이 사용되는 방식은 인라인 편집과 폼 편집입니다. 또한, 데이터 관리 작업을 위한 CRUD 작업(Create, Read, Update, Delete)과 유효성 검사 기능을 쉽게 구현할 수 있습니다. 이 글에서는 인라인 편집과 폼 편집, CRUD 작업 구현, 유효성 검사 및 커스터마이징에 대해 설명하고, 각 부분에 대해 동작 가능한 예제 코드를 제공합니다.인라인 편집과 폼 편집인라인 편집은 그리드의 각 셀에서 데이터를 직접 수정할 수 있는 방식입니다. 사용자는 셀을 클릭하면 즉시 수정할 수 있고, 수정 후 다른 셀로 이동하면 자동으로 저장됩니다. 폼 편집은 팝업 폼을 통해 그리드에서 데이터를 수정하는 방식입니다. ..

JS/jqGrid 2024.09.10

[jqGrid] 5. 옵션 및 설정

jqGrid는 다양한 옵션과 설정을 통해 그리드의 레이아웃과 기능을 사용자에 맞게 최적화할 수 있습니다. 그리드의 크기, 페이징 설정부터 컬럼의 정렬, 수정 가능 여부, 데이터 형식까지 세밀하게 제어할 수 있습니다. 이번 글에서는 그리드 옵션(height, width, pager 등), 컬럼 설정(sortable, editable, hidden 등), 셀 포맷팅과 데이터 형식 지정에 대해 상세히 설명하고, 각 섹션에 예제 코드를 포함해 설명하겠습니다.그리드 옵션 (height, width, pager 등)그리드의 크기(height, width)와 페이징(pager)는 화면에 표시되는 그리드의 전반적인 레이아웃을 정의하는 중요한 설정입니다. 이러한 옵션들은 그리드가 응답형 레이아웃을 지원하거나, 화면 크기..

JS/jqGrid 2024.09.09

[jqGrid] 4. 데이터 로드 및 바인딩

jqGrid에서 데이터를 로드하고 바인딩하는 방식은 매우 유연합니다. 로컬 데이터와 서버 데이터를 각각 로드할 수 있으며, AJAX를 통해 서버와 비동기적으로 통신하여 데이터를 가져오는 방법도 지원합니다. 또한, JSON과 XML 같은 다양한 데이터 포맷을 사용할 수 있어, 데이터 소스에 맞는 유연한 설정이 가능합니다. 이 글에서는 로컬 데이터와 서버 데이터 로딩, AJAX를 통한 서버 데이터 로딩, JSON 및 XML 데이터 포맷 사용에 대해 자세히 설명하고, 예제 소스 코드도 함께 제공합니다.로컬 데이터 vs 서버 데이터 로딩로컬 데이터는 클라이언트 측에서 미리 정의된 데이터를 로드할 때 사용합니다. 주로 정적 데이터를 다룰 때 사용되며, 서버에 추가 요청을 하지 않고 로컬에 있는 배열이나 JSON ..

JS/jqGrid 2024.09.09

[jqGrid] 3. 기본 그리드 구성

jqGrid의 기본 그리드 구성은 데이터를 표 형태로 시각화하고 관리하는 데 필요한 다양한 기능을 제공합니다. 그리드의 기본 구성에는 컬럼 정의, 데이터 소스 설정, 페이징, 정렬 등의 기능이 포함되며, 사용자는 이러한 옵션을 통해 데이터 그리드를 손쉽게 설정할 수 있습니다. 여기에서는 jqGrid의 기본 그리드를 설정하는 방법과 각 구성 요소에 대한 설명을 예제와 함께 알아보겠습니다.1. 데이터 소스 설정jqGrid에서 데이터 소스는 서버에서 가져오거나, 로컬에서 사용할 수 있습니다. 기본적으로 url 옵션을 사용하여 서버에서 데이터를 불러올 수 있으며, datatype을 통해 데이터를 JSON 또는 XML 형식으로 받을 수 있습니다. 로컬 데이터를 사용할 경우, datatype을 local로 설정하고..

JS/jqGrid 2024.09.09

[jqGrid] 2. 환경 설정 및 기본 설정

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

JS/jqGrid 2024.09.09

[jqGrid] 1. jqGrid 소개

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

JS/jqGrid 2024.09.08

#25 자바스크립트 jQuery, Ajax, 에니메이션

1. jQuery란?jQuery는 JavaScript 라이브러리로, 웹 개발자들이 JavaScript를 더욱 쉽게 작성할 수 있도록 도와주는 도구입니다. HTML 문서 탐색, 이벤트 처리, 애니메이션, Ajax 처리 등을 간단한 API로 지원하여, 복잡한 JavaScript 코드를 간결하게 작성할 수 있습니다.주요 특징:크로스 브라우저 호환성: jQuery는 다양한 브라우저에서 일관된 동작을 보장합니다.코드 간소화: 긴 JavaScript 코드를 짧고 간결하게 작성할 수 있습니다.플러그인 확장성: 수많은 jQuery 플러그인이 있어 다양한 기능을 쉽게 추가할 수 있습니다.2. jQuery의 기본 사용법jQuery를 사용하기 위해서는 먼저 jQuery 라이브러리를 HTML 파일에 포함해야 합니다. 일반적으..

JS/JavaScript 2024.09.08

#24 자바스크립트 async/await

비동기 프로그래밍은 자바스크립트에서 매우 중요한 개념입니다. 네트워크 요청, 파일 입출력, 타이머 설정 등 시간이 걸리는 작업을 처리할 때 비동기 작업은 사용자 경험을 향상시키는 데 큰 역할을 합니다. 특히 async/await는 자바스크립트의 비동기 작업을 보다 직관적이고 쉽게 처리할 수 있도록 도와주는 ES6 이후 추가된 기능입니다. 이 글에서는 **async/await**의 개념과 그 사용법을 예제와 함께 설명하겠습니다.async/await란?async/await는 자바스크립트에서 비동기 코드를 동기 코드처럼 작성할 수 있게 해줍니다. 비동기 작업을 처리하는 기존의 Promise나 콜백 함수보다 가독성이 좋으며, 코드의 유지보수성도 높아집니다.async 함수: 함수 앞에 async 키워드를 붙이면,..

JS/JavaScript 2024.09.06

#23 자바스크립트 ES6

ES6(ECMAScript 2015) 이후 자바스크립트에는 여러 새로운 기능과 문법이 추가되어 더 강력하고 간결한 코드를 작성할 수 있게 되었습니다. 이 글에서는 자바스크립트의 최신 기능들인 let, const, 화살표 함수, 클래스, 모듈 등에 대해 설명하고, 각각의 특징과 예제 코드를 통해 새로운 문법을 익히는 방법을 소개하겠습니다.1. let과 const: 블록 범위 변수 선언ES6 이전에는 자바스크립트에서 변수를 선언할 때 var를 사용했습니다. 그러나 var는 함수 범위만을 가지며, 블록 범위(block scope)를 지원하지 않아 의도하지 않은 변수 중복이나 값 변경이 발생할 수 있었습니다. 이를 해결하기 위해 let과 const가 도입되었습니다.let: 재할당이 가능한 블록 범위 변수let은..

JS/JavaScript 2024.09.06
반응형