최고의 jQuery를 EasyUI 데이터 그리드 - 사용자 정의 페이징 튜토리얼 2024년, 이 튜토리얼에서는 jQuery를 EasyUI 예제를 다운로드,를 배울 수 있습니다.

jQuery를 EasyUI 데이터 그리드 - 사용자 정의 페이징

데이터 그리드 (데이터 그리드는) 좋은 기능 탭은 사용자 정의가 매우 간단합니다 내장. 이 튜토리얼에서, 우리는 데이터 그리드 (데이터 그리드)을 생성하며, 탭 도구 모음에서 일부 사용자 지정 버튼을 추가 할 수 있습니다.

만들기 데이터 그리드 (DataGrid에)

	<표 아이디 = "TT"제목 = "데이터로드"클래스 = "easyui - 데이터 그리드"스타일 = "너비 : 550 픽셀, 높이 250 픽셀"
			URL = "데이터 / datagrid_data.json"
			iconCls는 = "아이콘-저장"매김 = "진정한">
		<THEAD>
			<TR>
				<목 필드 = 너비 = "80", "항목 ID"> 항목 ID </ 일>
				<목 필드 = "제품 ID"너비 = "80"> 제품 ID </ 일>
				<목 필드 = "LISTPRICE"너비 = "80"= "권리"정렬> 리스팅 가격 </ 일>
				단위 비용 <목 필드 = "unitcost"너비 = "80"= "권리"정렬> </ 번째>
				<목 필드 = "ATTR1"너비 = "100"> 속성 </ 일>
				Stauts </ 일> <목 필드 = "상태"너비 = "60"= "센터"정렬>
			</ TR>
		</ THEAD>
	</ 테이블>

설정 '페이지 매김'속성이 true, 기억이 페이징 도구 모음을 생성합니다.

사용자 지정 페이징 도구 모음

	데이터 그리드의 var에 호출기 = $ ( '#의 TT') 데이터 그리드 ( 'getPager'); // 얻을 호출기
	pager.pagination ({
		showPageList : 거짓,
		버튼 : [{
			iconCls '아이콘 검색',
			핸들러 : 함수 () {
				( '검색') 경고;
			}
		}, {
			iconCls '아이콘 - 추가'
			핸들러 : 함수 () {
				( '추가') 경고;
			}
		}, {
			iconCls '아이콘 편집'
			핸들러 : 함수 () {
				경고 ( '편집');
			}
		}],
		onBeforeRefresh : 함수 () {
			경고 ( '새로 고침 전에');
			true를 반환;
		}
	});

당신이 볼 수 있듯이, 우리는 호출기 객체의 첫 번째 데이터 그리드 (데이터 그리드)을 얻을, 다음 페이지 (매김)을 다시 만들어야합니다. 우리는 페이지의 목록을 숨기고, 세 개의 새로운 버튼을 추가 할 수 있습니다.

jQuery를 EasyUI 예제를 다운로드

jeasyui-datagrid-datagrid11.zip

jQuery를 EasyUI 데이터 그리드 - 사용자 정의 페이징
10/30