1. Home
  2. jQuery EasyUI Data Grid - celda combinada

El mejor tutorial de jQuery EasyUI Data Grid - celda combinada en 2024. En este tutorial podrás aprender Descargar ejemplos de jQuery EasyUI,

jQuery EasyUI Data Grid - celda combinada

Data Grid (cuadrícula de datos) a menudo tienen que fusionar algunas de las células. Este tutorial le mostrará cómo combinar celdas en una cuadrícula de datos (DataGrid) en.

Para fundir celular Data Grid (cuadrícula de datos), sólo tiene que llamar al método '' MergeCells, pasando fusionar parámetro de información dice Data Grid (cuadrícula de datos) Cómo fusionar células. En todas las celdas combinadas, además de la primera célula, las células se esconden en otros después de la fusión.

Creación de una cuadrícula de datos (DataGrid) 

	<Tabla id = "tt" title = "Combinar celdas" style = "width: 550px; altura: 250px"
			url = "data / datagrid_data.json"
			singleSelect = "true" iconCls = "icono de guardado" rownumbers = "true"
			campo ID = "Itemid" paginación = "true">
		<Culata en T congelado = "true">
			<Tr>
				<= Th Campo "ProductID" width = "80" formateador = "formatProduct"> Identificación del producto </ th>
				<Campo Th = "Itemid" width = "100"> ID del elemento </ th>
			</ Tr>
		</ Culata en T>
		<Culata en T>
			<Tr>
				<Th colspan = "2"> Precio </ th>
				<Th ROWSPAN = "2" = ancho campo "attr1" = "150"> Atributo </ th>
				<= Th ROWSPAN campo "2" = "status" width = "60" align = "center"> Stauts </ th>
			</ Tr>
			<Tr>
				<Th Campo = "Precio de la lista" width = "80" align = "right"> Lista de Precios </ th>
				<Campo Th = "unitcost" width = "80" align = "right"> Costo unitario </ th>
			</ Tr>
		</ Culata en T>
	</ Table>

celda combinada

Cuando se cargan los datos, nos fusionamos cuadrícula de datos (DataGrid) algunas de las células, por lo que coloque el siguiente código en la función de devolución de llamada onLoadSuccess. 

	$ ( '# Tt'). Datagrid ({
		onLoadSuccess: function () {
			var fusiona = [{
				Índice: 2,
				rowspan: 2
			}, {
				Índice: 5,
				rowspan: 2
			}, {
				Índice: 7,
				rowspan: 2
			}];
			for (var i = 0; i <merges.length; i ++)
				$ ( '# Tt'). Datagrid ( '', {MergeCells
					índice: fusiones [i], .index
					campo: 'idproducto',
					rowspan: fusiones [i] .rowspan
				});
		}
	});

Descargar ejemplos de jQuery EasyUI

jeasyui-datagrid-datagrid13.zip

Hot Tutorials

Contact US

jQuery EasyUI Data Grid - celda combinada
10/30