1. Home
  2. jQuery EasyUI Data Grid - Editor extendido

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

jQuery EasyUI Data Grid - Editor extendido

Algunos editor común (editor) añadido a la red de datos (cuadrícula de datos), para que los usuarios editar los datos. Todo editor (editor), se definen en el objeto $ .fn.datagrid.defaults.editors, esto puede ser extendido para apoyar el nuevo editor de la herencia (editor). Este tutorial le mostrará cómo agregar un nuevo editor numberspinner a la red de datos (cuadrícula de datos).

Heredada Editor numberspinner extendida 

	$ .extend ($. Fn.datagrid.defaults.editors, {
		numberspinner: {
			init: function (contenedor, opciones) {
				de entrada var = $ ( '<input type = "text">') appendTo (contenedor) .;
				volver input.numberspinner (opciones);
			},
			destruir: la función (objetivo) {
				$ (Meta) .numberspinner ( 'destruir');
			},
			getValue: función (objetivo) {
				volver (objetivo) .numberspinner $ ( 'getValue');
			},
			setValue: función (objetivo, valor) {
				$ (Meta) .numberspinner ( 'setValue', valor);
			},
			cambiar el tamaño: la función (objetivo, ancho) {
				$ (Meta) .numberspinner ( 'redimensionar', ancho);
			}
		}
	});

Creación de una cuadrícula de datos (DataGrid) en la etiqueta html 

	<Tabla de id = estilo "tt" = "width: 600px; altura: 250px"
			url = "/ datagrid_data.json datos" title = "iconCls editable DataGrid" = "icono de edición"
			singleSelect = "true" campo ID = "fitColumns ITEMID" = "true">
		<Culata en T>
			<Tr>
				<Campo Th = "Itemid" width = "60"> ID del elemento </ th>
				<Th Campo = "Precio de la lista" width = "80" align = editor de "derecha" = "{type: 'numberbox', las opciones: {precisión: 1}}"> Lista de Precios </ th>
				<Campo Th = "unitcost" width = "80" align = "right" editor = "numberspinner"> Costo unitario </ th>
				<= Th Campo "attr1" width = "180" editor = "text"> Atributo </ th>
				<= Th Campo ancho "status" = "60" align = editor de "centro" = "{type: 'casilla', las opciones: {on: 'P', fuera: ''}}"> Estado </ th>
				<Campo Th = "acción" width = "80" align = "center" formateador = "formatAction"> Acción </ th>
			</ Tr>
		</ Culata en T>
	</ Table>

Asignamos editor de numberspinner a los campos de los unitarios coste. Al iniciar la edición de una fila, el usuario puede editar los datos por el editor numberspinner.

Descargar ejemplos de jQuery EasyUI

jeasyui-datagrid-datagrid23.zip

Hot Tutorials

Contact US

jQuery EasyUI Data Grid - Editor extendido
10/30