Latest web development tutorials
×

jQuery EasyUI curso

jQuery EasyUI curso jQuery EasyUI breve introducción

jEasyUI solicitud

jEasyUI Creación de una aplicación CRUD jEasyUI Creación de una cuadrícula de datos CRUD jEasyUI formulario de solicitud CRUD jEasyUI Crear un lector de RSS

jEasyUI Arrastrar y soltar

jEasyUI arrastrar y soltar básica jEasyUI Crear caída de carrito de la compra jEasyUI Crear un plan de estudios

jEasyUI Menús y botones

jEasyUI Creación de un menú sencillo jEasyUI Crear botón de Enlace jEasyUI Crear un botón de menú jEasyUI Crear botón de división

jEasyUI disposición

jEasyUI Crear un diseño de frontera jEasyUI Crear diseños complejos jEasyUI Crear panel de plegado jEasyUI crear pestaña jEasyUI Dinámicamente agregar fichas jEasyUI Añadir ficha Reproducción automática jEasyUI Crear XP Style en el panel lateral izquierdo

jEasyUI cuadrícula de datos

jEasyUI Convertida a la red de datos de tabla HTML jEasyUI Obtener fila de datos seleccionado jEasyUI Agregar consulta jEasyUI Añadir barra de herramientas jEasyUI Crear barras de herramientas complejas jEasyUI Configuración de columnas de congelación jEasyUI Cambio de columna dinámico jEasyUI formato de columnas jEasyUI Establecer el tipo jEasyUI Organización personalizada jEasyUI Crear una combinación de columnas jEasyUI Añadir casilla jEasyUI paginación personalizada jEasyUI Habilitar la edición en línea jEasyUI Editor extendida jEasyUI operación de la columna jEasyUI celda combinada jEasyUI Crear una vista personalizada jEasyUI Crear Resumen de pie de página jEasyUI Condiciones conjunto de filas color de fondo jEasyUI Crear una cuadrícula de propiedades jEasyUI líneas expandidas Mostrar Detalles jEasyUI crear subdivisiones jEasyUI Mostrar los datos masiva jEasyUI Añadir un componente de la página

jEasyUI ventana

jEasyUI Creación de una simple ventana jEasyUI Ventana de barras de herramientas personalizadas jEasyUI Ventana y diseño jEasyUI crear diálogo jEasyUI cuadro de diálogo Personalizar

jEasyUI árbol de menús

jEasyUI Utilice las etiquetas para crear el menú de árbol jEasyUI Crear menú de árbol asíncrono jEasyUI Adición de un menú de árbol de nodos jEasyUI Crear menú de árbol con casillas de verificación jEasyUI Arrastrar y soltar el control de menú de árbol jEasyUI menú de carga de árboles padre / hijo nodos jEasyUI Creación de un árbol sobre la base de cuadrícula jEasyUI Crear una malla compleja árbol jEasyUI rejilla árbol cargado dinámicamente jEasyUI Agregar una ficha Cuadrícula árbol jEasyUI La carga diferida árbol de nodo de la malla

jEasyUI formulario

jEasyUI Presentar el formulario para crear una máquina asíncrona jEasyUI autenticación de formularios jEasyUI Crear un cuadro de árbol desplegable jEasyUI cuadro desplegable Formato jEasyUI Filtro cuadrícula de datos desplegables

jEasyUI Manual de referencia

jQuery EasyUI Widget jQuery EasyUI propagación

jQuery EasyUI Data Grid - Añadir consulta

Este ejemplo muestra cómo obtener los datos de la base de datos y los muestra en la cuadrícula de datos (DataGrid) en. A continuación se muestra cómo mostrar los resultados de búsqueda basados ​​en palabras clave introducidas por el usuario de búsqueda.

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

Crear una función de localización con la red de datos (cuadrícula de datos), y añadir barras de herramientas a la misma.

	<Id = clase "tt" Tabla = estilo "easyui-cuadrícula de datos" = "width: 600px; altura: 250px"
			url = "datagrid24_getdata.php" barra de herramientas = "# tb"
			title = "iconCls carga de datos" = "icono de guardado"
			rownumbers = "true" paginación = "true">
		<Culata en T>
			<Tr>
				<Campo Th = "Itemid" width = "80"> ID del elemento </ th>
				<Campo Th = "ProductID" width = "80"> Identificación del producto </ th>
				<Th Campo = "Precio de la lista" width = "80" align = "right"> Lista de Precios </ th>
				<Campo Th = "unitcost" width = "80" align = "right"> Costo unitario </ th>
				<= Th Campo anchura "attr1" = "150"> Atributo </ th>
				<Campo Th = "status" width = "60" align = "center"> Stauts </ th>
			</ Tr>
		</ Culata en T>
	</ Table>

Las barras de herramientas se definen como sigue:

	<Id = Div estilo "tb" = "padding: 3px">
		<Span> ID del artículo: </ span>
		<Entrada id = "itemid" style = "line-height: 26px; border: 1px #ccc sólida">
		<Span> Identificación del producto: </ span>
		<Entrada id = "ProductID" style = "line-height: 26px; border: 1px #ccc sólida">
		<a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()"> Buscar </a>
	</ Div>

Cuando un usuario introduce un valor de la consulta y el botón de consulta de prensa, la función 'doSearch' se llamará:

	doSearch funcionar () {
		$ ( '# Tt'). Datagrid ( "carga", {
			itemid: $ ( '# ITEMID') val () ,.
			idproducto: $ ( '# idproducto') val ().
		});
	}

El código anterior llama al método "carga" para cargar los datos de la nueva cuadrícula de datos (cuadrícula de datos). Tenemos que pasar 'itemid' y 'argumentos' ProductID al servidor.

El código de servidor

	incluir 'conn.php';
	
	? $ Página = isset ($ _POST [ "página"]) intval ($ _POST [ "página"]): 1;
	? $ Rows = isset ($ _POST [ 'filas']) intval ($ _POST [ 'filas']): 10;
	? $ Itemid = isset ($ _POST [ 'ITEMID']) mysql_real_escape_string ($ _POST [ 'ITEMID']): '';
	? $ ProductID = isset ($ _POST [ 'idproducto']) mysql_real_escape_string ($ _POST [ 'idproducto']): '';
	
	$ Offset = ($ página-1) * $ filas;
	
	$ Resultado = array ();
	
	Donde $ = "ITEMID como '$ itemid%' y ProductID como '$ idproducto%'";
	$ Rs = mysql_query ( "select count (*) de la partida en la que" donde $.);
	$ Fila = mysql_fetch_row ($ rs);
	$ Result [ "total"] = $ fila [0];
	
	$ Rs = mysql_query ( "SELECT * FROM punto donde" $ donde "limitar compensado $, $ filas" ..);
	
	Los artículos $ = array ();
	while ($ fila = mysql_fetch_object ($ rs)) {
		array_push (items $, $ fila);
	}
	$ Result [ "filas"] = $ items;
	
	json_encode echo ($ resultado);

Descargar ejemplos de jQuery EasyUI

jeasyui-datagrid-datagrid24.zip