Yahoo! User Interface blog (YUIBlog)

Le mode Edition rapide des deux YUI DataTable

YUI 2 DataTable fournit l'édition en ligne slick. Lorsque disableBtns est activé dans la configuration de colonne, modification des valeurs simples comme les chaînes ou des nombres se sent juste comme Excel. Toutefois, l'expérience ne peut pas être aussi réactif que une application de bureau, car chaque changement nécessite généralement un appel XHR au serveur pour stocker (ou de rejeter!) La nouvelle valeur. Si l'utilisateur a besoin de changer beaucoup de valeurs affichées, il peut être une expérience lente et frustrante. Pour résoudre ce problème, j'ai développé QuickEditDataTable. Cela s'étend DataTable à ajouter le mode Edition rapide, qui permet toutes les valeurs modifiables pour être changé en une seule opération en vrac:

( Cliquez sur l'écran à jouer avec cet exemple .)

Aperçu

Pour entrer dans le mode Edition rapide, appelez startQuickEdit() . Pour quitter le mode Edition rapide, appelez cancelQuickEdit() .

Il est de votre responsabilité de sauvegarder les modifications avant d'appeler cancelQuickEdit() . Pour simplifier cette tâche, QuickEditDataTable fournit getQuickEditChanges() . Ceci retourne un tableau d'objets, un pour chaque rangée. Chaque objet contient uniquement les valeurs qui ont été modifiées dans cette rangée, clé de la colonne id. Par exemple, si la table a quatre colonnes (titre, auteur, année, quantité), et le seul utilisateur a changé la quantité en une seule rangée à 20, alors l'objet de cette ligne serait {quantity:20} . Les autres valeurs seraient supprimés.

QuickEditDataTable peuvent facilement étendre YAHOO.widget.ScrollingDataTable si vous avez besoin de cette fonctionnalité. Si vous avez besoin, il suffit d'en faire une copie du fichier source et de changer la classe de base.

Configuration

Quick Edit est un état ​​modal dans lequel les formateurs cellule pour colonnes éditables sont échangés et remplacés par des formateurs spéciaux qui génèrent des input , textarea , ou select des éléments. Seules les colonnes qui ont quickEdit configuration sera modifiable. Les options de configuration sont:

copyDown

Si c'est vrai, la cellule en haut dans la colonne aura un bouton pour copier la valeur vers le bas pour le reste des lignes.

formatter

Le formateur de la cellule qui rendra un champ de formulaire approprié: <input type="text">, <textarea> ou <select>. Par défaut, le formateur de cellules YAHOO.widget.QuickEditDataTable.textQuickEditFormatter est utilisé pour toutes les cellules à produire des éléments d'entrée. Pour obtenir un textarea élément, configurer une colonne à utiliser YAHOO.widget.QuickEditDataTable.textareaQuickEditFormatter lieu. Vous pouvez également écrire une coutume formateur édition rapide - voir ci-dessous.

validation

Validation de configuration pour chaque champ dans la colonne.

css

Classes CSS encodage des règles de validation de base:

yiv-required

Valeur ne doit pas être vide.

yiv-length:[x,y]

Chaîne doit être au moins x caractères et au plus y caractères. Au moins un des x et y doivent être spécifiés.

yiv-integer:[x,y]

La valeur entière doit être au moins x et au plus y . x et y sont tous deux en option.

yiv-decimal:[x,y]

La valeur décimale doit être au moins x et au plus y . Les exposants ne sont pas autorisés. x et y sont tous deux en option.

fn

Une fonction qui sera appelée avec le DataTable que sa portée et son élément de formulaire de la cellule comme argument. Retourne true si la valeur est valide. Sinon, appelez this.displayQuickEditMessage(...) pour afficher une erreur, puis retourne false.

msg

Une carte des types de messages qui sera affichée quand une règle de validation de base ou regex échoue. Les types valides sont: required , min_length , max_length , integer , decimal , et regex . Il n'ya pas de défaut pour le type regex , donc vous devez spécifier un message si vous configurez une validation regex. Les messages d'erreur par défaut pour les autres types sont stockés dans YAHOO.widget.QuickEditDataTable.Strings et peut être surchargé et / ou localisées.

regex

Expression régulière que la valeur doit satisfaire pour être considéré comme valide.

Parfois, une colonne non modifiable doit être rendue différemment au cours de mode Edition rapide. Le meilleur exemple est une colonne contenant un lien, puisque naviguer loin de la page tout en mode Edition rapide peuvent être désastreuses. Pour supprimer le lien Modifier au cours rapide, de configurer qeFormatter pour la colonne d'être YAHOO.widget.QuickEditDataTable.readonlyLinkQuickEditFormatter . Pour les adresses courriel, utilisez YAHOO.widget.QuickEditDataTable.readonlyEmailQuickEditFormatter . Vous pouvez également écrire votre propre usage, en lecture seule formateur. Il suffit de suivre les règles normales de la construction d'un formateur de la cellule DataTable.

Personnalisé rapide Formateurs Modifier

Pour écrire un formateur de cellule personnalisé pour le mode d'édition rapide, vous devez structurer la fonction comme suit:

 Fonction myQuickEditFormatter (el, oRecord, oColumn, OData) {
   var = balisage
     "<input Type="text" class="{yiv} yui-quick-edit yui-quick-edit-key:{key}"/> '+
     YAHOO.widget.QuickEditDataTable.MARKUP_QE_ERROR_DISPLAY;
     el.innerHTML = lang.substitute (balisage, {
       clés: oColumn.key,
       yiv: oColumn.quickEdit.validation?  (OColumn.quickEdit.validation.css | |''):''
     });
     el.firstChild.value = extractMyEditableValue (OData);
     YAHOO.widget.QuickEditDataTable.copyDownFormatter.apply (cela, arguments);
 };

Vous pouvez utiliser textarea ou select plutôt input , mais vous ne pouvez créer un seul champ.

extractMyEditableValue() ne doit pas être une fonction distincte ni ne doit être limité à l'utilisation que oData . Les travaux devraient normalement être fait en ligne dans la fonction de formatage, mais le nom de la fonction de l'échantillon fait le point clair.

A propos de l'auteur: John Lindal ( @ jafl5272 sur Twitter) est l'un des ingénieurs mènent la construction de la fondation sur laquelle Yahoo! APT est construit. Auparavant, il a travaillé sur le Yahoo! Publisher Network.

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!