jqgrid 사용 예제

샘플 프로젝트의 경우 직원 관리에 대한 간단한 사례 연구를 사용하고 있습니다. 솔루션 자체에서 마스터 페이지를 사용하고 있음을 식별할 수 있습니다. 따라서 HTML 페이지의 헤드 섹션에서 마스터 페이지 자체의 모든 필수 파일을 호출해야 합니다. 이 튜토리얼은 몇 가지 사용자 정의 CSS를 사용하여 jQgrid의 아름다운 UI를 만드는 데 도움이됩니다. jQgrid, jQuery UI 및 부트스트랩을 사용하고 있습니다. 또한 테이블 내용의 글꼴 을 스타일링하기 위해 Google 글꼴을 사용합니다. 페이징, 검색 및 필터링은 많은 양의 정보를 표시하는 경우 매우 중요합니다. 데이터의 수천 또는 행을 표시하는 것은 사용자에 대한 값이 없다는 것을 이해해야 합니다. 사용자는 일부 기준에 따라 정렬된 상위 10개 행과 같이 데이터에서 일부 작은 하위 집합만 알아야 합니다.

페이징의 가능성(상위 20개 에서 다음 10개 행 표시)은 가장 현실적인 시나리오에서 절대적으로 충분합니다. 때로는 하나의 기준(예: 지난 달의 데이터 받기)을 기준으로 데이터를 먼저 필터링한 다음 다른 기준에 따라 결과를 정렬하고 페이징을 사용하여 최종 결과를 표시해야 합니다. 또한 jqgrid 내의 큰 주제를 언급하고 관련 주제에 연결해야합니다. jqgrid에 대한 설명서는 새 문서이므로 해당 관련 항목의 초기 버전을 만들어야 할 수 있습니다. 페이지 의 머리에 (jquery.jqgrid.min.js s 후 이전). 열 표시 텍스트, 너비 및 정렬 가능한 속성을 구성할 수 있습니다. 정렬 가능:false를 바디 열에 사용하므로 본문 열을 정렬할 수 없습니다. 당신이 볼 수 있듯이, 나는 나머지 서비스를 사용하여 jQgrid에 json 데이터를 전달하고 있습니다. 모든 json 데이터를 한 번에 로드하고 있으며 클라이언트 측에서 페이지 매김을 수행합니다.

updatePagerIcons() 메서드와 통과된 테이블 인스턴스를 사용하여 페이지 조정 아이콘을 사용자 지정합니다. 우리는 updatePagerIcons 방법을 정의하고 같은 사용자 정의 페이지 아이콘 아이콘을 설정합니다, 다음, prev 등. 서식 지정, 정렬 편집 등과 관련된 동작을 지정하는 colModel 추가 속성에 포함될 수 있습니다. 예를 들어, ”가운데” 또는 정렬: ”오른쪽”을 지정하여 셀에서 텍스트의 기본 정렬을 변경할 수 있습니다. 너비 속성(예: 너비: 300)을 사용하여 열의 기본 너비(150px)를 변경할 수 있습니다. 정렬 형식을 사용할 수 있습니다. ”번호”는 현재 로캘에 대해 특정 소수점 및 수천 개의 구분 기호를 사용하여 숫자를 표시하는 ”숫자”와 같은 추가 속성 formatter를 사용할 수 있습니다. jquery.jqgrid.min.js에 포함된 기본 로캘은 en-US입니다. i18n 폴더에는 38개의 로캘이 포함되어 있습니다.

Kommentarer inaktiverade.