1. Home
  2. jQuery EasyUI danych Siatka - scalona komórka

Najlepszy samouczek jQuery EasyUI danych Siatka - scalona komórka W 2024 r. W tym samouczku możesz dowiedzieć się Pobierz przykłady jQuery EasyUI,

jQuery EasyUI danych Siatka - scalona komórka

Siatka danych (DataGrid) często trzeba połączyć kilka komórek. Ten poradnik pokaże Ci, jak scalić komórki w siatce danych (DataGrid) w.

Do scalania danych kratka (datagrid) komórkę, wystarczy wywołać metodę "mergeCells ', przechodząc połączyć parametr mówi o danych siatki (datagrid) Jak scalić komórki. We wszystkich połączonych komórek, oprócz pierwszej komórki, inne komórki ukryć się po fuzji.

Tworzenie siatki danych (DataGrid) 

	<Id Tabela = "tt" title = "Scal komórki" style = "width: 550px; height: 250px"
			url = "data / datagrid_data.json"
			singleSelect = "true" iconCls = "icon-save" rownumbers = "true"
			idField = "itemid" stronicowanie = "true">
		<THEAD mrożone = "true">
			<Tr>
				<Th pole = "productid" width = "80" formater = "formatProduct"> ID produktu </ th>
				<Pole Th = "itemid" width = "100"> Item ID </ th>
			</ Tr>
		</ THEAD>
		<THEAD>
			<Tr>
				<Th colspan = "2"> Cena </ th>
				<Th rowspan = "2" field = "attr1" width = "150"> Atrybut </ th>
				<Th rowspan = "2" field = "status" width = "60" align = "center"> Stauts </ th>
			</ Tr>
			<Tr>
				<Th pole = "ListPrice" width = "80" align = "right"> Cennik </ th>
				<Pole Th = "unitcost" width = "80" align = "right"> jednostkowy koszt </ th>
			</ Tr>
		</ THEAD>
	</ Table>

Połączony komórkę

Gdy dane są ładowane, łączymy siatki danych (datagrid) niektóre komórki, więc umieścić następujący kod w onLoadSuccess funkcji zwrotnej. 

	$ ( '# Tt "). DataGrid ({
		onLoadSuccess: function () {
			var scala = [{
				index: 2,
				rowspan: 2
			}, {
				index: 5,
				rowspan: 2
			}, {
				index: 7,
				rowspan: 2
			}];
			for (var i = 0; i <merges.length; i ++)
				$ ( '# Tt "). DataGrid (" mergeCells', {
					index: scala [I] .Index,
					Pole: "productid"
					rowspan: scala [I] .rowspan
				});
		}
	});

Pobierz przykłady jQuery EasyUI

jeasyui-datagrid-datagrid13.zip

Hot Tutorials

Contact US

jQuery EasyUI danych Siatka - scalona komórka
10/30