1. Home
  2. jQuery를 EasyUI 데이터 그리드 - 가상 스크롤 뷰를 사용하면 대량의 데이터를 표시

최고의 jQuery를 EasyUI 데이터 그리드 - 가상 스크롤 뷰를 사용하면 대량의 데이터를 표시 튜토리얼 2024년, 이 튜토리얼에서는 jQuery를 EasyUI 예제를 다운로드,를 배울 수 있습니다.

jQuery를 EasyUI 데이터 그리드 - 가상 스크롤 뷰를 사용하면 대량의 데이터를 표시

데이터 그리드 (데이터 그리드) 가상 스크롤 기능 페이징없이 많은 수의 레코드를 표시 할 수있다. 세로 스크롤 막대로드하고 기존의 기록을 갱신하는 데이터 그리드 (DataGrid를) 집행 아약스 요청을 스크롤합니다. 작업의 전체 과정은 부드러운 깜박이지 새로 고칩니다. 이 튜토리얼에서, 우리는 데이터 그리드 (데이터 그리드)을 생성하고 서버에서 데이터를로드 할 가상 스크롤 기능을 사용합니다.

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

가상 스크롤 기능을 사용하여 그리드 데이터 (데이터 그리드)을 '보기'속성 '이있는 ScrollView'로 설정해야합니다. 사용자는 데이터 그리드 (DataGrid를) 연장있는 ScrollView를 다운로드 및 참조있는 ScrollView 파일 페이지 헤더한다. 

<스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "/try/jeasyui/datagrid-detailview.js"> </ script>

<표 아이디 = "TT"클래스 = "easyui - 데이터 그리드"스타일 = "너비 : 700 픽셀, 높이 300 픽셀"
		제목 = "데이터 그리드 - VirtualScrollView"
		데이터 옵션 = "보기 :있는 ScrollView, rownumbers : 사실 singleSelect : 사실,
			URL : 'datagrid27_getdata.php', autoRowHeight : 거짓, pageSize가 : 50 ">
	<THEAD>
		<TR>
			<목 필드 = "반전"너비 = "80"> 인보이스 없음 </ 일>
			<목 필드 = "날짜"너비 = "100"> 날짜 </ 일>
			<목 필드 = "이름"너비 = "80"> 이름 </ 일>
			<제 /> 금액 <목 필드 = "양"너비 = "80"= "권리"정렬>
			가격 </ 일> <목 필드 = "가격"너비 = "80"= "권리"정렬>
			<제 /> 비용 <목 필드 = "비용"너비 = "100"= "권리"정렬>
			참고 <목 필드 = 너비 = "110"를 "주의"> </ 번째>
		</ TR>
	</ THEAD>
</ 테이블>

우리는 페이지 매김 속성을 사용할 필요가 없습니다 있습니다,하지만, pageSize로서 속성이 필요하세요 서버에서 레코드의 지정된 번호에 대한 실행이 아약스 요청 데이터 그리드 (DataGrid를) 그렇게.

서버 측 코드

datagrid27_getdata.php 

? $ 페이지 =에는 isset ($ _ POST [ '페이지']) INTVAL ($ _ POST [ '페이지']) : 1;
$ 행의 =의에는 isset ($ _ POST [ '행']) INTVAL ($ _ POST [ '행']) :? 50;

$ 항목 = 배열 ​​();
date_default_timezone_set ( 'UTC');
{(; $ 내가 <= $ 행 $ 난 + + $ I = 1)에 대한
	$ 인덱스 = $ I + ($ 페이지-1) * $ 행;
	$ 금액 = 랜드 (50, 100);
	$ 가격 = 랜드 (10000,20000) / 100;
	$ 항목 [] = 배열 ​​(
		'인보이스'=>의 sprintf ( "INV의 %의 04D", $ 지수)
		'날짜'=> 날짜 ( '내지 Ym-D', 시간 () * 3600 + 24 * $ I)
		'이름'=> '이름'. $ 인덱스,
		'참고'=이> '주'. $ 인덱스,
		'금액'=> $ 금액,
		'가격'=>의 sprintf ( '%의 01.2f', $ 가격)
		'비용'=>의 sprintf ( '%의 01.2f', $ 금액 * $의 가격)
	);
}
$ 결과 = 배열 ​​();
$ [ '총'] = 8000 결과;
$ [ '행'] = $ 항목을 결과;
에코하여 json_encode ($ 결과);

jQuery를 EasyUI 예제를 다운로드

jeasyui-datagrid-datagrid27.zip

핫 튜토리얼

Contact US

jQuery를 EasyUI 데이터 그리드 - 가상 스크롤 뷰를 사용하면 대량의 데이터를 표시
10/30