Yahoo! Interfaz de usuario de blog (YUIBlog)

Modo de edición rápida de 3 YUI DataTable

A pesar de que YUI 3 DataTable aún no tiene edición en línea de células individuales, es relativamente fácil de implementar modo de edición rápida. La edición rápida plugin para DataTable en el 3 Galería YUI permite que todos los valores visibles en un objeto DataTable que se ha editado al mismo tiempo.

( Haga clic en la pantalla y jugar con este ejemplo .)

Información general

Al igual que con la YUI versión 2 , la idea central del modo de edición rápida es que cambiar todos los formateadores de células por otras nuevas que pueblan las células con elementos de formulario, por ejemplo, campos de entrada o combo. Esto se hace cuando start() se llama, sobre la base de la configuración se describen a continuación. Después de que el usuario ha terminado, puede llamar a getChanges() para obtener los valores cambiados y luego persisten ellos. Para salir del modo de edición rápida, llame a cancel() . (Su nombre se debe cancelar en vez de dejar de recordarles que descarta todos los cambios.)

Desde la edición rápida módulo de galería es un plugin para DataTable, que hay que conectar a tu tabla de datos antes de poder utilizarlo:

 my_table.plug (Y.Plugin.DataTableQuickEdit);

Esto almacena el plugin en el qe miembro de la tabla de datos, por lo que se debe llamar al plugin funciona así:

 my_table.qe.start ();

Configuración

Edición rápida añade dos nuevos atributos de configuración a todas las columnas: quickEdit y qeFormatter .

Si una columna de quickEdit propiedad se define, la columna se puede editar en modo de edición rápida. Para aceptar todos los valores por defecto, basta con establecer quickEdit:true . Para obtener más control, puede pasar un objeto con las siguientes propiedades:

formatter

El formateador de células que hacen un campo de forma adecuada: type="text"> <input, <textarea> o <select>. De forma predeterminada, el formateador de células Y.Plugin.QuickEdit.textFormatter se utiliza para todas las células para producir los elementos de entrada. Para obtener un textarea del elemento, configurar una columna de usar Y.Plugin.QuickEdit.textareaFormatter lugar.

validation

Validación de configuración para cada campo en la columna.

css

CSS clases de reglas de codificación básicas de validación:

yiv-required

El valor no debe estar vacío.

yiv-length:[x,y]

Cadena debe ser de al menos x caracteres y un máximo y personajes. Al menos uno de x e y deben ser especificadas.

yiv-integer:[x,y]

El valor entero no sea inferior a x y en la mayoría de y . x y y son ambos opcionales.

yiv-decimal:[x,y]

El valor decimal debe ser por lo menos x y un máximo de y . Los exponentes no están permitidos. x y y son ambos opcionales.

fn

Una función que se llamará con el objeto DataTable como su ámbito de aplicación y el elemento de la célula forma como el argumento. Devuelve verdadero si el valor es válido. De lo contrario, llame this.displayMessage(...) para mostrar un error y luego volver falsa.

msg

Un mapa de los tipos de mensajes que se muestran cuando una regla de validación de base o de expresiones regulares no. Los tipos válidos son: required , min_length , max_length , integer , decimal , y regex . No hay ningún valor predeterminado para el tipo de regex , por lo que debe especificar un mensaje si se configura una validación de expresiones regulares. Los mensajes de error por defecto para los otros tipos se almacenan en Y.FormManager.Strings (proporcionado por la galería-formmgr-CSS-validación ) y se puede reemplazar y / o localizada.

regex

Expresión regular que el valor debe cumplir para ser considerado válido.

A veces, una columna no editable deben ser prestados de manera diferente en modo de edición rápida. El mejor ejemplo es una columna que contiene un enlace, ya que la navegación fuera de la página, mientras que en modo de edición rápida puede ser desastroso. Para eliminar el enlace durante la edición rápida, configurar qeFormatter de la columna que se Y.Plugin.QuickEdit.readonlyLinkFormatter . Para obtener las direcciones de correo electrónico, el uso Y.Plugin.QuickEdit.readonlyEmailFormatter . También puedes escribir personalizado, formateador de sólo lectura. Sólo tiene que seguir las normas habituales para la construcción de un formateador de células DataTable.

Las características que falta

Debido a un error en YUI 3.3.0 DataTable , el td elemento pasa a un formateador de la columna es en realidad de la columna anterior. Esto hizo demasiado molesto para apoyar copia abajo, donde un botón en la primera fila le permite copiar el valor hacia abajo a todas las otras filas.

El error también se requiere una remodelación completa de la base de edición rápida formateadores de células para volver de texto en lugar de manipular el DOM. Esta es la razón por formateadores personalizados de células no están oficialmente soportados en este lanzamiento inicial. Si le gusta la aventura, todavía puede construir, pero tenga en cuenta que tendrá que volver a escribir, incluyendo la adición de soporte para copiar hacia abajo, una vez que el error en DataTable es fijo.

Sobre el autor: John Lindal ( @ jafl5272 en Twitter) es uno de los ingenieros de conducir la construcción de la base sobre la que Yahoo! APT se construye. Anteriormente, trabajó en el Publisher Network Yahoo!.

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar con del.icio.us | Digg él! | reddit!