jQueryのEasyUIデータグリッド - 仮想スクロールビューを使用すると、大量のデータが表示されます

データグリッド（データグリッド）仮想スクロール機能は、ページングなしに大量のレコードを表示するために使用することができます。 垂直スクロールバーをロードし、既存のレコードを更新するためのデータグリッド（データグリッド）エグゼクティブAJAXリクエストをスクロールしたとき。 アクションのコース全体が滑らかに点滅していないリフレッシュ。 このチュートリアルでは、データグリッド（データグリッド）を作成し、サーバーからデータをロードするために、仮想スクロール機能を使用します。

作成データグリッド（DataGridの）

仮想スクロール機能を使用して、グリッドデータ（データグリッド）は、「表示」プロパティが「scrollview」として設定する必要があります。 ユーザーは、データグリッド（データグリッド）から延長scrollviewをダウンロードし、参照scrollviewファイルのページヘッダする必要があります。

ます。<script type = "text / javascriptの" SRC = "/try/jeasyui/datagrid-detailview.js"> </スクリプト>

<表のid = "TT"クラス= "easyui-データグリッド"スタイル= "幅：700px;高さ：300ピクセル"
		タイトル= "データグリッド -  VirtualScrollView」
		データ・オプション= "ビュー：scrollview、rownumbers：、真singleSelect：trueの場合、
			URL： 'datagrid27_getdata.php'、autoRowHeight：偽、pageSizeを：50 ">
	<THEAD>
		<TR>
			<Thのフィールド= "INV"幅= "80"> Invの無</目>
			<Thのフィールド= "日付"幅= "100">日付</目>
			<Thのフィールド= "名前"幅= "80">名前</目>
			<Thのフィールド= "量"幅= "80" = "右"を揃える>金額</目>
			<Thのフィールド= "価格"幅= "80" = "右"を揃える>価格</目>
			<Thのフィールド= "コスト"幅= "100" = "右"を揃える>費用</目>
			<Thのフィールド= "ノート"幅= "110">注</目>
		</ TR>
	</ THEAD>
</表>

私たちは、サーバーから指定した数のレコードのためのページネーションプロパティを使用する必要はありませんが、のpageSize属性は必要とされ、その結果、実行Ajaxの要求データ・グリッド（データグリッド）のでご注意ください。

サーバー側のコード

datagrid27_getdata.php

？$ページ= ISSET（$ _ POST [ 'ページ']）INTVAL（$ _ POST [ 'ページ']）：1;
$行の=のISSET（$ _ POST [ '行']）INTVAL（$ _ POST [ '行']）:? 50。

$アイテム=配列（）;
date_default_timezone_set（ 'UTC'）;
{（;; $ I <= $行$ iが++ $ I = 1）のために
	$インデックス= $ I +（$ページ-1）* $行;
	$金額=ランド（50100）;
	$価格=ランド（10000,20000）/ 100;
	$アイテム[] =配列（
		「Invの '=>はsprintf（ "INVの％04D」、$インデックス）、
		'日' =>日付（ 'YM-D'、時間（）* 3600 + 24 * $ I）、
		「名前 '=>'名前 '。$インデックス、
		'注意' => '注意'。$インデックス、
		「金額」=> $量、
		'価格' =>はsprintf（ '％の01.2f'、$価格）、
		「コスト '=>はsprintf（'％の01.2f '、$量* $価格）
	）;
}
$結果=配列（）;
$ [ '合計'] = 8000結果。
$ [ '行'] = $アイテムを結果。
エコーjson_encode（$結果）;

jQueryのEasyUI例をダウンロード

jeasyui-datagrid-datagrid27.zip