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.