1. Rumah
  2. jQuery EasyUI data Grid - Membuat Pembagian

Tutorial jQuery EasyUI data Grid - Membuat Pembagian Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari Ambil jQuery EasyUI contoh,

jQuery EasyUI data Grid - Membuat Pembagian

Rincian tampilan menggunakan data grid (datagrid), pengguna dapat memperluas baris untuk menampilkan rincian tambahan. Setiap konten dapat dimuat sebagai rinci baris, sub-grid juga dapat dimuat secara dinamis. Tutorial ini akan menunjukkan cara untuk membuat sub-grid di grid utama.

Langkah 1: Buat grid utama 

<Table id = "dg" style = "width: 700px; height: 250px"
		url = "datagrid22_getdata.php" 
		title = "datagrid - subgrid"
		singleSelect = "true" fitColumns = "true">
	<Thead>
		<Tr>
			<Bidang Th = "Itemid" width = "80"> ID Item </ th>
			<Th field = "productid" width = "100"> ID Produk </ th>
			<Th field = "listprice" align = "right" width = "80"> Daftar Harga </ th>
			<Th field = "unitcost" align = "right" width = "80"> Satuan Biaya </ th>
			<Th field = "attr1" width = "220"> Atribut </ th>
			<Bidang Th = "status" width = "60" align = "center"> Status </ th>
		</ Tr>
	</ Thead>
</ Table>

Langkah 2: Set untuk menunjukkan tampilan rinci dari Pembagian

Untuk menggunakan tampilan rinci, harap ingat untuk merujuk ke file skrip view di header halaman. 

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

$ ( '# Dg'). Datagrid ({
	lihat: detailview,
	detailFormatter: function (index, baris) {
		kembali '<div style = "padding: 2px"> <table class = "DDV"> </ table> </ div>';
	},
	onExpandRow: function (index, baris) {
		var DDV = $ (ini) .datagrid ( 'getRowDetail', indeks) .find ( 'table.ddv');
		ddv.datagrid ({
			url: '? datagrid22_getdetail.php itemid =' + row.itemid,
			fitColumns: benar,
			singleSelect: benar,
			rownumbers: benar,
			loadMsg: '',
			height: 'auto',
			kolom: [[
				{Bidang: 'orderID', judul: 'Pesanan ID', width: 100},
				{Bidang: 'kuantitas', judul: 'Jumlah', width: 100},
				{Bidang: 'UNITPRICE', judul: 'Harga Satuan', width: 100}
			]],
			OnResize: function () {
				$ ( '# Dg') datagrid ( 'fixDetailRowHeight', indeks) .;
			},
			onLoadSuccess: function () {
				setTimeout (function () {
					$ ( '# Dg') datagrid ( 'fixDetailRowHeight', indeks) .;
				}, 0);
			}
		});
		$ ( '# Dg') datagrid ( 'fixDetailRowHeight', indeks) .;
	}
});

Ketika pengguna mengklik tombol bentangkan ( '+'), acara 'onExpandRow' akan dipicu. Kami membuat kotak baru dengan tiga subnet. Ketika data sub-mesh ketika dimuat berhasil atau mengubah ukuran, harap ingat untuk memanggil grid utama metode 'fixDetailRowHeight'.

Langkah 3: The kode sisi server

datagrid22_getdata.php 
$ Hasil = array ();

termasuk 'conn.php';

$ Rs = mysql_query ( "select * from barang mana itemid di (pilih itemid dari LineItem)");

$ Items = array ();
sementara ($ row = mysql_fetch_object ($ rs)) {
	array_push ($ item, $ row);
}

json_encode echo ($ item);
datagrid22_getdetail.php 
termasuk 'conn.php';

$ Itemid = mysql_real_escape_string ($ _ REQUEST [ 'Itemid']);

$ Rs = mysql_query ( "select * from LineItem mana itemid = '$ itemid'");
$ Items = array ();
sementara ($ row = mysql_fetch_object ($ rs)) {
	array_push ($ item, $ row);
}
json_encode echo ($ item);

Ambil jQuery EasyUI contoh

jeasyui-datagrid-datagrid22.zip

Tutorial Panas

Hubungi kami

jQuery EasyUI data Grid - Membuat Pembagian
10/30