웹 개발 시 페이징이 필요한 경우가 종종 있습니다. 손으로 작성한 코드에 의존하면 코드가 많아지고 스타일도 보기 좋지 않을 수 있습니다. 다음은 jquery easyui 페이지 매김 기능에 대한 소개입니다. 매우 편리하고 간단합니다
그런 다음 필요한 파일이 포함된 "EasyUI Framework 사용 문서 이후의 jquery"를 따라 $(function(){ });에 다음 코드를 삽입하기만 하면 됩니다.
$('#pp').pagination(options);
페이지네이션의 구체적인 사용법을 소개하겠습니다. 먼저 속성을 살펴보겠습니다.
속성 이름 유형 설명 기본값
total Number 페이징이 성립될 때의 총 레코드 수를 설정합니다. 1
pageSize Number 각 페이지에 표시되는 숫자 10
pageNumber Number 페이징이 성립될 때 , 표시되는 페이지 수 1
pageList 배열 사용자는 각 페이지를 수정할 수 있습니다. 페이지 크기,
pageList 속성은 변경할 수 있는 크기 수를 정의합니다. [10,20,30,50]
loading Boolean은 여부를 정의합니다. 데이터가 로드 중입니다. false
buttons 배열은 사용자 정의 버튼을 정의하며 각 버튼에는 두 개의 속성이 포함됩니다.
iconCls: 배경 이미지
를 표시하기 위한 CSS 클래스 핸들러: 버튼을 클릭할 때의 핸들러 함수 null
showPageList 부울은 다음을 정의합니다. 페이지 목록 표시 true
showRefresh 부울은 새로 고침 버튼 표시 여부를 정의합니다. true
beforePageText 문자열은 입력 상자 그룹Page
afterPageText 문자열은 {페이지}의 입력 상자 구성 요소 뒤에 표시되는 레이블입니다
displayMsg 문자열은 페이지 정보를 표시합니다.
{total}개 항목 중 {from}부터 {to}까지 표시 이벤트 이벤트 이름 매개변수 설명 onSelectPage pageNumber, pageSize 사용자가 새 페이지를 선택할 때 트리거되는 Callback 함수에는 두 개의 매개변수가 포함됩니다. pageNumber: 새 페이지의 페이지 번호 pageSize : 새로 고침 버튼을 클릭하기 전에 새 페이지의 크기 onBeforeRefresh pageNumber, pageSize가 트리거됩니다. false가 반환되면 새로 고침 작업이 취소됩니다. onChangePageSize pageSize는 페이지 크기가 변경될 때 트리거됩니다. . 데모
1. 데이터 추출 및 표시.
DataGrid는 url 속성을 통해 데이터를 얻습니다. 예: url:'ListInfo.action', 이런 방식으로 Action에서 메서드를 호출하여 데이터를 얻습니다. 반환되는 것은 JSON 문자열입니다. JSON 문자열은 DataGrid에서 정의한 데이터 형식에 따라 조합되어야 합니다. 이 데이터 형식에 대해서는 이전 기사의 첨부 파일을 참조하세요. 특히 JSON 문자열의 total 필드 값은 데이터 페이징에 사용되는 데이터 항목의 개수라는 점이 강조됩니다.
2. 데이터 페이징.
데이터 페이징은 포그라운드 페이징과 백그라운드 페이징으로 구분되며 DataGrid는 캡슐화되었습니다. DataGrid는 두 개의 매개변수인 행(페이지당 항목 수)과 페이지(현재 페이지 번호)를 정의합니다. 이 두 매개변수는 각각 pageSize 및 pageNumber 속성에 해당합니다. pageSize 및 pageNumber 속성은 사용자가 설정하거나 설정하지 않을 수 있으므로 기본값이 사용됩니다. Action에서 private int 행, private int 페이지 두 개의 변수만 정의한 다음 SQL 문을 통해 필요한 값을 얻으면 됩니다. 페이징 SQL 문(오라클)은 다음과 같습니다.
추출된 데이터의 개수를 전체 필드에 할당하고 이를 조합하여 JSON 문자열로 반환하면 페이징을 구현할 수 있습니다. 물론 pagination:true가 반드시 필요합니다.
3. 데이터 작업.
데이터 작업은 대략 보기, 삭제로 나눌 수 있습니다. 보기 위해서는 onClickRow 또는 onDblClickRow 이벤트를 통해 이를 달성할 수 있습니다. 예:
$(function(){ $('#test').datagrid({ title:'数据列表', width:900, height:500, .......(省略的属性) onDblClickRow: function() { var selected = $('#test').datagrid('getSelected'); if (selected){ window.open("DataView.action?Id="+selected.ID); }}
더블클릭하시면 보실 수 있습니다.
삭제에 관해서는 삭제 버튼을 클릭하고 삭제 메소드를 호출할 수 있습니다. JSON 문자열을 조합할 때 OPERATION 필드에 삭제 버튼을 할당할 수 있습니다. {field:'OPERATION', title: 'Operation', width: 120}을 설정하면 페이지에 삭제 버튼이 표시될 수 있습니다. 삭제 구현은 다음과 같습니다.
function DelAff(){ $.messager.confirm('确认','是否真的删除?',function(r){ if (r){ var selected = $('#test').datagrid('getSelected'); if (selected){ var index = $('#test').datagrid('getRowIndex', selected); $('#test').datagrid('deleteRow', index); DeleteSubmit(selected); } } }); } function DeleteSubmit(selected) { var url="DataDelete.action?Id="+selected.ID; $.post( url ); }
이렇게 하면 페이지 삭제와 데이터베이스 삭제가 모두 구현됩니다.
4. 해결해야 할 문제
반환된 데이터가 비어 있으면 IE 브라우저 아래 페이지에 버그가 있을 것입니다. 내 해결 방법은 각 필드를 ""로 설정하여 빈 콘텐츠 데이터 행이 페이지에 표시되도록 하는 것입니다. 혹시 이 문제를 겪고 해결하신 분이 계시다면 조언 부탁드립니다.
위 내용은 jquery easyui 페이징 튜토리얼 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!