jqgrid paging 예제

jqGrid에는 다양한 옵션, 콜백 함수 및 이벤트가 있어 그리드의 동작을 완전히 사용자 정의할 수 있습니다. 예를 들어 사용자 지정 도구 설명 텍스트를 만들거나 제거할 수 있습니다. 하나는 호버링 또는 행을 방지 할 수 있습니다. 하나는 이전에 seceted 행에 두 번째 클릭에 행의 선택을 취소하기 위해, 여러 행을 선택할 수 있도록 방지 할 수 있습니다 … 모든 그리드에 존재하는 기본 기능을 이해하는 것만으로도 중요합니다. 기능의 custumization은 나중에 설명될 것입니다. 대신 부트 스트랩 4를 사용하려면 부트 스트랩 3 하나는 단지 guiStyle을 대체 할 필요가 : “부트 스트랩”매개 변수 guiStyle : “부트 스트랩4”. jqGrid는 부트 스트랩 CSS와 부트 랩의 자바 스크립트 파일을 사용하지 않지만, 부트 스트랩.min.js가 필요한 경우 popper.min.js와 부트 스트랩.min.js를 모두 포함해야합니다. jqGrid는 jQuery의 슬림 버전과 함께 사용할 수 없습니다. 하나는 대신 전체 버전을 포함해야합니다. 결과 코드는 다음과 같이 될 수 있습니다: 위의 예제에서 전체 HTML 페이지는 다음과 같이 볼 수 있습니다: 우리는 formatter의 세부 사항을 포함: “날짜” 및 formatter: “선택” 미리 정의 된 formatters의 예로. 모든 포맷터는 형식옵션으로 지정할 수 있는 고유한 특정 옵션을 지원합니다. 일반적으로 함께 사용되는 몇 가지 일반적인 열 속성 집합이 있습니다.

예를 들어 매우 일반적인 설정은 formatter: “번호”, 정렬: “오른쪽”, sorttype: “번호” 입력 데이터로 사용 번호의 경우. 속성 템플릿: “번호”는 모든 옵션(및 검색 및 편집에 사용되는 다른 옵션)을 한 번에 지정할 수 있는 바로 가기입니다. 우리는 열 금액, 금액 및 합계에 대한 템플릿을 사용합니다. 언젠가 는 표시 할 수 없습니다 표시 할 수 없습니다 데이터의 너무 많은 항목을 표시해야합니다. 이 경우 페이지의 모든 항목을 표시하는 대신 로컬 페이징을 사용하고 사용자가 세로 스크롤 막대를 사용하여 데이터를 볼 것을 요구하는 것이 훨씬 더 효과적입니다. HTML 페이지에 모든 데이터를 배치하는 데는 상대적으로 많은 시간이 걸리며 페이지가 매우 느려집니다(응답성이 낮습니다). 우리는 toppager를 추가하여 위의 예제를 수정할 수 있습니다 : true, 호출기 : true 및 rowNum : 5에서 참조 – http://www.trirand.com/jqgridwiki/doku.php?id=wiki:first_grid 디버깅보기 스냅 샷 에서 JqGrid 다음 페이징을 추가 한 후 우리는 필요 새 고객을 만들기 위한 아이콘을 추가하려면 고객을 편집하고 고객을 삭제하고 이 그리드를 검색해야 합니다.