1. Rumah
  2. jQuery EasyUI data Grid - sel gabungan

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

jQuery EasyUI data Grid - sel gabungan

Data Grid (datagrid) sering perlu untuk menggabungkan beberapa sel. Tutorial ini akan menunjukkan cara untuk menggabungkan sel di grid data (datagrid) di.

Untuk Gabungkan Data Grid sel (datagrid), hanya memanggil metode 'mergeCells', lewat menggabungkan parameter informasi mengatakan data Grid (datagrid) Cara menggabungkan sel. Di semua sel bergabung, selain sel pertama, sel-sel lain bersembunyi di setelah merger.

Membuat data Grid (datagrid) 

	<Table id = "tt" title = "Merge Cells" style = "width: 550px; height: 250px"
			url = "data / datagrid_data.json"
			singleSelect = "true" iconCls = "icon-save" rownumbers = "true"
			idfield = "Itemid" pagination = "true">
		<Thead beku = "true">
			<Tr>
				<Th field = "productid" width = "80" formatter = "formatProduct"> ID Produk </ th>
				<Bidang Th = "Itemid" width = "100"> ID Item </ th>
			</ Tr>
		</ Thead>
		<Thead>
			<Tr>
				<Th colspan = "2"> Harga </ th>
				<Th rowspan = "2" field = "attr1" width = "150"> Atribut </ th>
				<Th rowspan = "2" field = "status" width = "60" align = "center"> Stauts </ th>
			</ Tr>
			<Tr>
				<Th field = "listprice" width = "80" align = "right"> Daftar Harga </ th>
				<Bidang Th = "unitcost" width = "80" align = "right"> Satuan Biaya </ th>
			</ Tr>
		</ Thead>
	</ Table>

sel gabungan

Bila data yang dimuat, kami menggabungkan data grid (datagrid) beberapa sel, sehingga menempatkan kode berikut dalam fungsi callback onLoadSuccess. 

	$ ( '# Tt'). Datagrid ({
		onLoadSuccess: function () {
			var menggabungkan = [{
				Indeks: 2,
				rowspan: 2
			}, {
				Indeks: 5,
				rowspan: 2
			}, {
				Indeks: 7,
				rowspan: 2
			}];
			for (var i = 0; i <merges.length; i ++)
				$ ( '# Tt'). Datagrid ( 'mergeCells', {
					Indeks: gabungan [i] .index,
					Bidang: 'productid',
					rowspan: gabungan [i] .rowspan
				});
		}
	});

Ambil jQuery EasyUI contoh

jeasyui-datagrid-datagrid13.zip

Tutorial Panas

Hubungi kami

jQuery EasyUI data Grid - sel gabungan
10/30