jquery easyui 페이징 튜토리얼 예

웹 개발 시 페이징이 필요한 경우가 종종 있습니다. 손으로 작성한 코드에 의존하면 코드가 많아지고 스타일도 보기 좋지 않을 수 있습니다. 다음은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!