jquery 그리드 예제

무료 jqGrid는 jQuery 플러그인으로 구현, 우리의 플러그인은 스타일링jQuery UI CSS 또는 부트 스트랩 CSS를 사용합니다. 따라서 해당 자바 스크립트 및 CSS 파일을 포함해야합니다. 두 번째 기본 사항, 하나는 알아야 한다, 무료 jqGrid 내부적으로 HTML

사용 하는 사실. 그리드를 만들어야 하는 위치를 예약하려면 빈

요소를 만들어야 합니다. 마지막으로 jQuery(“#tableId”).jqGrid({/*옵션*/})를 호출해야 합니다. 을 사용하여 그리드를 만듭니다. free jqGrid의 다양한 옵션은 테이블 본체의 데이터와 그리드의 외부 부분에 대한 정보를 제공합니다. 예를 들어 선택 가능한 행 아래의 코드: 그리드행을 클릭하여 선택/선택을 취소하고 셀을 제자리에서 편집할 수도 있습니다. 이 튜토리얼은 몇 가지 사용자 정의 CSS를 사용하여 jQgrid의 아름다운 UI를 만드는 데 도움이됩니다. jQgrid, jQuery UI 및 부트스트랩을 사용하고 있습니다.

또한 테이블 내용의 글꼴 을 스타일링하기 위해 Google 글꼴을 사용합니다. 위의 예제에서 전체 HTML 페이지는 다음과 같이 볼 수 있습니다: 위의 코드는 iconSet을 사용: “fontAwesome” 그리고 포함 글꼴 Awesome 4.x 글꼴 awesome.min.css 이전 예제에 포함 된 CSS에 추가. 당신은 아래의 결과 그리드를 볼 수 있습니다 : 부트 스트랩 대신 부트 스트랩 4를 사용하려면 3 하나는 guiStyle을 대체 할 필요가 : “부트 스트랩”매개 변수 guiStyle : “부트 스트랩4”. jqGrid는 부트 스트랩 CSS와 부트 랩의 자바 스크립트 파일을 사용하지 않지만, 부트 스트랩.min.js가 필요한 경우 popper.min.js와 부트 스트랩.min.js를 모두 포함해야합니다. jqGrid는 jQuery의 슬림 버전과 함께 사용할 수 없습니다. 하나는 대신 전체 버전을 포함해야합니다. 결과 코드는 다음과 같습니다: 정렬을 지정하는 jqGrid의 두 가지 주요 옵션( 정렬 이름 및 정렬 순서)이 있습니다. sortname의 기본값은 빈 문자열이며, 이는 그리드가 정렬되지 않은 상태에서 표시된다는 것을 의미합니다. 이는 행의 순서가 입력 데이터의 항목 배열에 있는 항목의 순서와 일치한다는 것을 의미합니다. sortname(예: sortname: “invdate”)을 지정하면 그리드는 먼저 입력 데이터의 속성 invdate를 비교하는 데이터를 정렬합니다. 기본적으로 속성의 값은 문자열로 비교됩니다. “2015-10-31″과 같은 ISO 날짜 형식을 사용하면 충분하지만 일반적인 경우에는 잘못될 수 있습니다.

문자열비교는 기본적으로 대/소문자를 구분하지 않지만 사용 무시대문자: false 옵션에 의해 behafior를 변경할 수 있습니다. 기본 정렬 유형인 “text”를 변경하는 미리 정의된 값(“정수”, “숫자” 및 “날짜”)의 열 정렬 유형에 포함할 수 있습니다. sorttype을 함수로 정의하거나 콜백 함수 sortfunc를 지정하여 항목 비교를 최대한 제어할 수 있습니다. 얼마나 아름다운 jQuery 부트 그리드이며, 당신이 그것으로 무엇을 할 수 있는지! Kendo UI 그리드는 테이블 표현을 통해 데이터를 시각화하고 편집할 수 있는 강력한 위젯입니다. 페이징, 정렬, 필터링, 그룹화, 편집 등과 같은 기본 데이터에 대한 작업을 표시하고 수행하는 방법에 대한 다양한 옵션을 제공합니다. 그리드에 데이터를 공급하려면 중재자로 사용되는 Kendo UI DataSource 구성 요소를 통해 로컬 또는 원격 데이터를 제공할 수 있습니다. 두 경우 모두 그리드가 jQuery 플러그인으로 등록되어 빈

div및 테이블의 비교적 복잡한 구조로 변환된다는 것을 이해하는 것이 중요합니다. 예를 들어 Chrome 개발자 도구를 사용하여 만든 후 그리드를 검사할 수 있습니다.

예를 들어, “가운데” 또는 정렬: “오른쪽”을 지정하여 셀에서 텍스트의 기본 정렬을 변경할 수 있습니다. 너비 속성(예: 너비: 300)을 사용하여 열의 기본 너비(150px)를 변경할 수 있습니다.

Spread the love