페이징 드롭다운을 10에서 20으로 변경한 후 JqGrid 디버깅 뷰의 스냅샷입니다. 무료 jqGrid는 jQuery 플러그인으로 구현, 우리의 플러그인은 스타일링jQuery UI CSS 또는 부트 스트랩 CSS를 사용합니다. 따라서 해당 자바 스크립트 및 CSS 파일을 포함해야합니다. 두 번째 기본 사항, 하나는 알아야 한다, 무료 jqGrid 내부적으로 HTML

사용 하는 사실. 그리드를 만들어야 하는 위치를 예약하려면 빈
요소를 만들어야 합니다. 마지막으로 jQuery(«#tableId»).jqGrid({/*옵션*/})를 호출해야 합니다. 을 사용하여 그리드를 만듭니다. free jqGrid의 다양한 옵션은 테이블 본체의 데이터와 그리드의 외부 부분에 대한 정보를 제공합니다. 예를 들어, 아래 코드 loadonce:true 옵션을 사용 하는 경우 다음 서버 는 한 페이지에 대 한 데이터를 반환 하는 대신 모든 데이터를 반환 해야 합니다. loadonce :true 옵션의 사용은 너무 많은 행 (예 : 1000 행 이하)을 표시해야하는 경우 매우 유용합니다. 따라서 로드폰스:true 옵션을 제거하여 서버 코드를 수정하여 한 번에 모든 페이지를 반환해야 합니다.

페이징, 검색 및 필터링은 많은 양의 정보를 표시하는 경우 매우 중요합니다. 데이터의 수천 또는 행을 표시하는 것은 사용자에 대한 값이 없다는 것을 이해해야 합니다. 사용자는 일부 기준에 따라 정렬된 상위 10개 행과 같이 데이터에서 일부 작은 하위 집합만 알아야 합니다. 페이징의 가능성(상위 20개 에서 다음 10개 행 표시)은 가장 현실적인 시나리오에서 절대적으로 충분합니다. 때로는 하나의 기준(예: 지난 달의 데이터 받기)을 기준으로 데이터를 먼저 필터링한 다음 다른 기준에 따라 결과를 정렬하고 페이징을 사용하여 최종 결과를 표시해야 합니다. 정렬을 지정하는 jqGrid에는 정렬 이름과 정렬 순서의 두 가지 주요 옵션이 있습니다. sortname의 기본값은 빈 문자열이며, 이는 그리드가 정렬되지 않은 상태에서 표시된다는 것을 의미합니다. 이는 행의 순서가 입력 데이터의 항목 배열에 있는 항목의 순서와 일치한다는 것을 의미합니다.

sortname(예: sortname: «invdate»)을 지정하면 그리드는 먼저 입력 데이터의 속성 invdate를 비교하는 데이터를 정렬합니다. 기본적으로 속성의 값은 문자열로 비교됩니다. «2015-10-31″과 같은 ISO 날짜 형식을 사용하면 충분하지만 일반적인 경우에는 잘못될 수 있습니다. 문자열비교는 기본적으로 대/소문자를 구분하지 않지만 사용 무시대문자: false 옵션에 의해 behafior를 변경할 수 있습니다. 기본 정렬 유형인 «text»를 변경하는 미리 정의된 값(«정수», «숫자» 및 «날짜»)의 열 정렬 유형에 포함할 수 있습니다. sorttype을 함수로 정의하거나 콜백 함수 sortfunc를 지정하여 항목 비교를 최대한 제어할 수 있습니다. jqGrid에는 다양한 옵션, 콜백 함수 및 이벤트가 있어 그리드의 동작을 완전히 사용자 정의할 수 있습니다. 예를 들어 사용자 지정 도구 설명 텍스트를 만들거나 제거할 수 있습니다. 하나는 호버링 또는 행을 방지 할 수 있습니다.

하나는 이전에 seceted 행에 두 번째 클릭에 행의 선택을 취소하기 위해, 여러 행을 선택할 수 있도록 방지 할 수 있습니다 … 모든 그리드에 존재하는 기본 기능을 이해하는 것만으로도 중요합니다. 기능의 custumization은 나중에 설명될 것입니다. 언젠가 는 표시 할 수 없습니다 표시 할 수 없습니다 데이터의 너무 많은 항목을 표시해야합니다. 이 경우 페이지의 모든 항목을 표시하는 대신 로컬 페이징을 사용하고 사용자가 세로 스크롤 막대를 사용하여 데이터를 볼 것을 요구하는 것이 훨씬 더 효과적입니다. HTML 페이지에 모든 데이터를 배치하는 데는 상대적으로 많은 시간이 걸리며 페이지가 매우 느려집니다(응답성이 낮습니다). 우리는 toppager를 추가하여 위의 예제를 수정할 수 있습니다 : true, 호출기 : true 및 rowNum : 5는 다음과 같은 그리드를 가지고 : 아래는 위에서 설명한 몇 가지 기능을 사용하는 자바 스크립트 코드의 예입니다 : 부트 스트랩 3 대신 부트 스트랩 3을 사용하려면 교체가 필요합니다. guiStyle : guiStyle에 «부트 스트랩»매개 변수 : «부트 스트랩4″.

Comments are closed.