1. Home
  2. jQuery EasyUI Data Grid - Usando la vista de desplazamiento virtual muestra los datos de masas

El mejor tutorial de jQuery EasyUI Data Grid - Usando la vista de desplazamiento virtual muestra los datos de masas en 2024. En este tutorial podrás aprender Descargar ejemplos de jQuery EasyUI,

jQuery EasyUI Data Grid - Usando la vista de desplazamiento virtual muestra los datos de masas

Data Grid (cuadrícula de datos) característica de desplazamiento virtual se puede utilizar para mostrar un gran número de registros sin paginación. Cuando la barra de desplazamiento vertical para desplazarse por la petición ajax Ejecutivo cuadrícula de datos (cuadrícula de datos) para cargar y actualizar los registros existentes. Volver a cargar todo el curso de acción es lisa, que no parpadea. En este tutorial, vamos a crear una cuadrícula de datos (cuadrícula de datos), y utilizar la función de desplazamiento virtual para cargar datos desde el servidor.

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

Data Grid (Cuadrícula de datos) con función de desplazamiento virtual, la propiedad "vista" se debe establecer en 'ScrollView'. Los usuarios deben descargar ScrollView extendido de la cuadrícula de datos (cuadrícula de datos) y el encabezado del archivo de página ScrollView referencia. 

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

<Id = clase "tt" Tabla = estilo "easyui-cuadrícula de datos" = "width: 700px; altura: 300px"
		title = "DataGrid - VirtualScrollView"
		-Opciones de datos = "Ver: ScrollView, rownumbers: true, singleSelect: true,
			url: 'datagrid27_getdata.php', autoRowHeight: falso, pageSize: 50 ">
	<Culata en T>
		<Tr>
			<= Th Campo anchura "inv" = "80"> Inv n </ th>
			<= Th Campo ancho "fecha" = "100"> Fecha </ th>
			<Th Campo = "nombre" width = "80"> Nombre </ th>
			<= Th Campo ancho "cantidad" = "80" align = "right"> Importe </ th>
			<= Th Campo ancho "precio" = "80" align = "right"> Precio </ th>
			<= Th Campo ancho "costo" = "100" align = "right"> Costo </ th>
			<Campo Th = "note" width = "110"> Nota: </ th>
		</ Tr>
	</ Culata en T>
</ Table>

Tenga en cuenta que no es necesario utilizar la propiedad de paginación, pero se requiere atributo pageSize, de modo que la rejilla solicitud de ejecución de ajax de datos (cuadrícula de datos) para el número especificado de registros desde el servidor.

El código de servidor

datagrid27_getdata.php 

? $ Página = isset ($ _POST [ "página"]) intval ($ _POST [ "página"]): 1;
$ rows = isset ($ _POST [ 'filas']) intval ($ _POST [ 'filas']) :? 50;

Los artículos $ = array ();
date_default_timezone_set ( 'UTC');
for ($ i = 1; i <= $ $ filas; $ i ++) {
	Índice $ = $ i + ($ page-1) * $ filas;
	Monto $ = rand (50.100);
	Precio $ = rand (10000,20000) / 100;
	$ Artículos [] = array (
		'Inv' => sprintf ( "% 04d INV", el índice de $),
		'Fecha' => Fecha ( 'Ym-d', time () + 24 * 3600 * $ i),
		'Nombre' => 'Nombre'. $ Index,
		. $ Índice 'Nota' => 'Nota',
		cantidad => $ 'Cantidad',
		'Precio' => sprintf ( "% 01.2f ', $ precio),
		'Coste' => sprintf ( "% 01.2f ', $ * $ cantidad precio)
	);
}
$ Resultado = array ();
$ Result [ "total"] = 8000;
$ Result [ 'filas'] = $ items;
json_encode echo ($ resultado);

Descargar ejemplos de jQuery EasyUI

jeasyui-datagrid-datagrid27.zip

Hot Tutorials

Contact US

jQuery EasyUI Data Grid - Usando la vista de desplazamiento virtual muestra los datos de masas
10/30