1. Rumah
  2. jQuery EasyUI data Grid - Menggunakan tampilan gulir maya menampilkan data massa

Tutorial jQuery EasyUI data Grid - Menggunakan tampilan gulir maya menampilkan data massa Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari Ambil jQuery EasyUI contoh,

jQuery EasyUI data Grid - Menggunakan tampilan gulir maya menampilkan data massa

Data Grid (datagrid) fitur scrolling virtual dapat digunakan untuk menampilkan sejumlah besar catatan tanpa paging. Ketika scroll bar vertikal untuk menggulir permintaan ajax grid data (datagrid) Eksekutif untuk memuat dan menyegarkan catatan yang ada. Menyegarkan seluruh tindakan yang halus tidak berkedip. Dalam tutorial ini, kita akan membuat data grid (datagrid), dan menggunakan fitur bergulir virtual untuk memuat data dari server.

Membuat data Grid (datagrid)

Data Grid (datagrid) menggunakan fitur scrolling virtual, 'lihat' properti harus ditetapkan ke 'scrollview'. Pengguna harus men-download scrollview diperpanjang dari data grid (datagrid), dan halaman file referensi scrollview sundulan. 

<Script type = "text / javascript" src = "/try/jeasyui/datagrid-detailview.js"> </ script>

<Table id = "tt" class = "easyui-datagrid" style = "width: 700px; height: 300px"
		title = "datagrid - VirtualScrollView"
		Data-opsi = "lihat: scrollview, rownumbers: true, singleSelect: benar,
			url: 'datagrid27_getdata.php', autoRowHeight: palsu, PageSize: 50 ">
	<Thead>
		<Tr>
			<Th field = "inv" width = "80"> Inv ada </ th>
			<Th field = "date" width = "100"> Tanggal </ th>
			<Th field = "nama" width = "80"> Nama </ th>
			<Th field = "jumlah" width = "80" align = "right"> Jumlah </ th>
			<Th field = "harga" width = "80" align = "right"> Harga </ th>
			<Th field = "biaya" width = "100" align = "right"> Biaya </ th>
			<Bidang Th = "dicatat" width = "110"> Catatan </ th>
		</ Tr>
	</ Thead>
</ Table>

Harap dicatat bahwa kami tidak perlu menggunakan properti pagination, namun atribut PageSize diperlukan, sehingga jaringan permintaan eksekusi ajax data (datagrid) untuk jumlah tertentu catatan dari server.

kode sisi server

datagrid27_getdata.php 

? $ Halaman = isset ($ _ POST [ 'page']) intval ($ _ POST [ 'page']): 1;
$ Rows = isset ($ _ POST [ 'baris']) intval ($ _ POST [ 'baris']) :? 50;

$ Items = array ();
date_default_timezone_set ( 'UTC');
untuk ($ i = 1; $ i <= $ baris; $ i ++) {
	$ Index = $ i + ($ halaman-1) * $ baris;
	$ Jumlah = rand (50.100);
	$ Harga = rand (10000,20000) / 100;
	$ Produk [] = array (
		'Inv' => sprintf ( "INV% 04D", indeks $),
		'Tanggal' => tanggal ( 'Ym-d', time () + 24 * 3600 * $ i),
		'Nama' => 'Nama'. $ Index,
		'Catatan' => 'Catatan'. $ Index,
		'Jumlah' => $ jumlah,
		'Harga' => sprintf ( '% 01.2f', $ harga),
		'Biaya' => sprintf ( '% 01.2f', $ jumlah * $ harga)
	);
}
$ Hasil = array ();
$ Result [ 'total'] = 8000;
$ Result [ 'baris'] = $ item;
gema json_encode ($ hasil);

Ambil jQuery EasyUI contoh

jeasyui-datagrid-datagrid27.zip

Tutorial Panas

Hubungi kami

jQuery EasyUI data Grid - Menggunakan tampilan gulir maya menampilkan data massa
10/30