Mode d'édition rapide pour YUI 3 DataTable »Yahoo! utilisateur Blog Interface (YUIBlog)

Mode d'édition rapide pour YUI 3 DataTable

19 avril 2011 à 15:20 par John Lindal | En développement , YUI 3 Galerie | Pas de commentaire

Même si YUI 3 DataTable ne dispose pas encore d'édition en ligne de cellules individuelles, il est relativement simple à mettre en œuvre rapide mode d'édition. Le QuickEdit plugin pour DataTable dans le 3 Galerie YUI permet toutes les valeurs visibles dans un DataTable d'être édités simultanément.

( Cliquez sur la capture d'écran pour jouer avec cet exemple .)

Vue d'ensemble

Comme pour les YUI version 2 , l'idée de base de mode d'édition rapide est de swap tous les formateurs de cellules par de nouveaux qui peuplent les cellules avec des éléments de formulaire, par exemple, les champs de saisie ou de listes déroulantes. Ceci est fait quand start() est appelée, basée sur la configuration décrite ci-dessous. Après que l'utilisateur est terminée, vous pouvez appeler getChanges() pour obtenir les valeurs à modifier, puis elles persistent. Pour quitter le mode d'édition rapide, appelez cancel() . (Il est nommé annuler au lieu d'arrêter de vous rappeler qu'il ignore toutes les modifications.)

Depuis l'édition rapide module galerie est un plugin pour DataTable, vous devez le brancher à votre table de données avant de pouvoir l'utiliser:

 my_table.plug (Y.Plugin.DataTableQuickEdit);

Cette magasins le plugin dans le qe membre de la table de données, de sorte que vous devez appeler le plugin fonctionne comme ceci:

 my_table.qe.start ();

Configuration

Modification rapide ajoute deux nouveaux attributs de configuration de toutes les colonnes: quickEdit et qeFormatter .

Si une colonne quickEdit propriété est définie, la colonne sera modifiable en mode d'édition rapide. Pour accepter tous les paramètres par défaut, vous pouvez simplement définir quickEdit:true . Pour plus de contrôle, vous pouvez passer un objet avec les propriétés suivantes:

formatter

Le formateur de la cellule qui rendra un champ de formulaire approprié: <input type="text">, <textarea>, ou <select>. Par défaut, le formateur cellule Y.Plugin.QuickEdit.textFormatter est utilisé pour toutes les cellules à produire des éléments d'entrée. Pour obtenir un textarea élément, configurer une colonne à utiliser Y.Plugin.QuickEdit.textareaFormatter lieu.

validation

Validation de configuration pour chaque champ dans la colonne.

css

CSS classes règles de codage de validation de base:

yiv-required: Valeur ne doit pas être vide.
yiv-length:[x,y]: String doit être d'au moins x caractères et au plus y caractères. Au moins un des x et y doivent être spécifiées.
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 son champ d'élément de formulaire de la cellule de l'argument. Retourne vrai si la valeur est valide. Sinon, appelez this.displayMessage(...) pour afficher une erreur et 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 les suivants: required , min_length , max_length , integer , decimal , et regex . Il n'ya pas de défaut pour le type regex , vous devez donc 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 Y.FormManager.Strings (fourni par la galerie-formmgr-css-validation ) 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-modifiables doit être rendue différemment au cours de mode d'édition rapide. Le meilleur exemple est une colonne contenant un lien, depuis la navigation hors de la page tout en mode d'édition rapide peuvent être désastreuses. Pour supprimer le lien au cours d'édition rapide, configurer qeFormatter pour la colonne à Y.Plugin.QuickEdit.readonlyLinkFormatter . Pour les adresses e-mail, l'utilisation Y.Plugin.QuickEdit.readonlyEmailFormatter . Vous pouvez également vous écrire propre coutume, formateur en lecture seule. Il suffit de suivre les règles normales de la construction d'un formateur de la cellule DataTable.

Des éléments manquants

En raison d'un bogue dans YUI 3.3.0 DataTable , le td élément passé à un formatage de colonne est en fait de la colonne précédente. Cela a trop gênant pour le copier vers le bas, où un bouton dans la première ligne vous permet de copier la valeur vers le bas pour toutes les autres lignes.

Le bug a également besoin d'une refonte complète de la base Modification rapide des formateurs de la cellule pour retourner le texte au lieu de manipuler le DOM. C'est pourquoi formateurs de cellule personnalisé ne sont pas officiellement pris en charge dans cette version initiale. Si vous êtes aventureux, vous pouvez toujours les construire, mais gardez à l'esprit que vous aurez besoin de les réécrire, y compris l'ajout à l'appui pour la copie vers le bas, une fois que le bogue dans DataTable est fixé.

A propos de l'auteur: John Lindal ( @ jafl5272 sur Twitter) est l'un des ingénieurs de plomb construire les fondations sur lesquelles Yahoo! APT est construit. Auparavant, il a travaillé sur l'éditeur de réseau Yahoo.