Yahoo! User Interface Blog (YUIBlog)

Quick Edit-modus voor YUI 3 DataTable

Ook al YUI 3 DataTable heeft nog geen inline editing van individuele cellen, is het relatief eenvoudig te implementeren Quick Edit-modus. De QuickEdit plugin voor DataTable in de YUI 3 Galerij maakt het mogelijk alle zichtbare waarden in een DataTable gelijktijdig te bewerken.

( Klik op de screenshot om te spelen met dit voorbeeld .)

Overzicht

Net als bij de YUI 2 versie , de kerngedachte van Quick Edit-modus is om te wisselen alles uit de cel formatteerders door nieuwe, die de cellen vullen met vormelementen, bijvoorbeeld invoervelden of dropdowns. Dit gebeurt wanneer start() wordt genoemd, afhankelijk van de configuratie hieronder beschreven. Nadat de gebruiker klaar is, kunt u bellen getChanges() om de gewijzigde waarden te krijgen en dan ze volharden. Om Quick Edit-modus te verlaten, bel cancel() . (Het is genoemd opzeggen in plaats van stoppen om u eraan te herinneren dat het alle wijzigingen verwijdert.)

Omdat de Quick Edit galerie module is een plugin voor DataTable, moet je aan te sluiten op uw DataTable voordat u het kunt gebruiken:

 my_table.plug (Y.Plugin.DataTableQuickEdit);

Dit slaat de plug-in in de qe lid van de DataTable, dus je moet de plugin functies aan te roepen als volgt uit:

 my_table.qe.start ();

Configuratie

Quick Edit voegt twee nieuwe configuratie attributen om alle kolommen: quickEdit en qeFormatter .

Als een kolom quickEdit eigenschap is gedefinieerd, zal de kolom worden bewerkt in de Quick Edit-modus. Als u alle standaardinstellingen te accepteren, kun je gewoon instellen quickEdit:true . Voor meer controle, dan kunt u een object passeren met de volgende eigenschappen:

formatter

De cel formatter die een passende vorm veld zal maken: <input type="text">, <TEXTAREA> of <select>. Standaard is de cel formatter Y.Plugin.DataTableQuickEdit.textFormatter wordt gebruikt voor alle cellen in te voeren elementen te produceren. Om een te krijgen textarea element, het configureren van een kolom te gebruiken Y.Plugin.DataTableQuickEdit.textareaFormatter plaats.

validation

Validatie configuratie voor elk veld in de kolom.

css

CSS-klassen coderen basis validatieregels:

yiv-required

De waarde moet niet leeg zijn.

yiv-length:[x,y]

String ten minste x tekens en ten hoogste y tekens. Ten minste een van x en y worden gespecificeerd.

yiv-integer:[x,y]

De geheel getal moet ten minste x en maximaal y . x en y zijn ook mogelijk.

yiv-decimal:[x,y]

De decimale waarde ten minste x en maximaal y . Exponent niet toegestaan. x en y zijn ook mogelijk.

fn

Een functie die zal met de DataTable worden genoemd als de draagwijdte en de cel vorm element als het argument. Terug true wanneer de waarde geldig is. Anders bel this.displayMessage(...) een fout weer te geven en terug te keren vals.

msg

Een kaart van typen van berichten die worden weergegeven wanneer een basis-of regex validatieregel mislukt. De geldige types zijn: required , min_length , max_length , integer , decimal , en regex . Er is geen standaard voor type regex , dus je moet een bericht te geven of u het configureren van een regex validatie. De standaard foutmeldingen van de andere soorten worden opgeslagen in Y.FormManager.Strings (verzorgd door galerie-formmgr-CSS-validatie ) en kan worden overschreven en / of gelokaliseerd.

regex

Reguliere expressie die de waarde moeten voldoen om geldig te maken.

Soms moet een niet-bewerkbare kolom anders worden gemaakt tijdens de Quick Edit-modus. Het beste voorbeeld is een kolom met daarin een link, want navigeren uit de buurt van de pagina, terwijl in de Quick Edit modus kan rampzalig zijn. Om de koppeling te verwijderen tijdens Quick Edit, configureren qeFormatter voor de kolom te zijn Y.Plugin.DataTableQuickEdit.readonlyLinkFormatter . Voor e-mailadressen, te gebruiken Y.Plugin.DataTableQuickEdit.readonlyEmailFormatter . U kunt ook schrijven je eigen, aangepaste, alleen-lezen formatter. Volg gewoon de normale regels voor de bouw van een DataTable cel formatter.

Ontbrekende functies

Door een bug in YUI 3.3.0 DataTable , de td element doorgegeven aan een kolom formatter is eigenlijk van de vorige kolom. Dit maakte het te lastig om af te ondersteunen kopie, waar een knop op de eerste rij kunt u kopieert u de waarde naar beneden om alle andere rijen.

De bug ook verplicht een volledige herwerking van de basis-Quick Edit cel formatters om tekst terug te keren in plaats van het manipuleren van de DOM. Dit is de reden waarom op maat cel formatters worden niet officieel ondersteund in deze eerste release. Als u avontuurlijk bent aangelegd, kunt u nog steeds op te bouwen, maar houd er rekening mee dat u nodig hebt om ze te herschrijven, waaronder het toevoegen van ondersteuning voor kopiëren naar beneden, nadat de bug in DataTable is vastgesteld.

Over de auteur: John Lindal ( @ jafl5272 op Twitter) is een van de leidende ingenieurs de bouw van de basis waarop Yahoo! APT is gebouwd. Daarvoor werkte hij op de Yahoo! Publisher Network.

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | Digg it! | reddit!