Το Yahoo! Blog User Interface (YUIBlog)

Γρήγορη κατάσταση επεξεργασίας για YUI 3 DataTable

Ακόμα κι αν YUI 3 DataTable δεν έχει ακόμη επιτόπια επεξεργασία των μεμονωμένων κυττάρων, είναι σχετικά απλό να εφαρμόσει τη λειτουργία γρήγορης επεξεργασίας. Η QuickEdit plugin για DataTable στην Γκαλερί YUI 3 επιτρέπει σε όλες τις ορατές τιμές σε DataTable που θέλετε να επεξεργαστείτε ταυτόχρονα.

( Κάντε κλικ στο screenshot για να παίξει με αυτό το παράδειγμα .)

Επισκόπηση

Όπως και με το YUI 2 έκδοση , η βασική ιδέα της γρήγορης κατάσταση επεξεργασίας είναι να ανταλλάξουν όλες τις μορφοποιητές κυττάρων με καινούργια τα οποία καταλαμβάνουν τα κύτταρα με τα στοιχεία μορφή, π.χ., τα πεδία εισαγωγής ή αναπτυσσόμενα μενού. Αυτό γίνεται όταν start() καλείται, με βάση τις ρυθμίσεις που περιγράφονται παρακάτω. Αφού ο χρήστης έχει τελειώσει, μπορείτε να καλέσετε getChanges() για να πάρετε τις αλλαγές στις τιμές και στη συνέχεια τους επιμένουν. Για να βγείτε από τη λειτουργία γρήγορης επεξεργασίας, καλέστε cancel() . (Πήρε το όνομά του να ακυρώσει αντί να σταματήσει να σας υπενθυμίσω ότι απορρίπτει όλες τις αλλαγές.)

Δεδομένου ότι η μονάδα γρήγορης γκαλερί Επεξεργασία είναι ένα plugin για DataTable, θα πρέπει να το συνδέσετε στο DataTable σας για να μπορέσετε να χρησιμοποιήσετε:

 my_table.plug (Y.Plugin.DataTableQuickEdit)?

Αυτό το plugin αποθηκεύει στο qe μέλος του DataTable, οπότε θα πρέπει να καλέσετε τις λειτουργίες του plugin για αυτό, όπως:

 my_table.qe.start ()?

Διαμόρφωση

Γρήγορη Επεξεργασία προσθέτει δύο νέα χαρακτηριστικά διαμόρφωσης για όλες τις στήλες: quickEdit και qeFormatter .

Αν μια στήλη του quickEdit περιουσία ορίζεται, η στήλη θα είναι επεξεργάσιμο στη λειτουργία γρήγορης επεξεργασίας. Για να αποδεχτείτε όλες τις προεπιλογές, μπορείτε να ορίσετε απλά quickEdit:true . Για περισσότερο έλεγχο, μπορείτε να περάσετε ένα αντικείμενο με τις παρακάτω ιδιότητες:

formatter

Το σύστημα διαμόρφωσης των κυττάρων τα οποία θα καθιστούν κατάλληλο πεδίο φόρμας: <input type="text">, <textarea>, ή <select>. Από προεπιλογή, ο μορφοποιητή κύτταρο Y.Plugin.DataTableQuickEdit.textFormatter χρησιμοποιείται για όλα τα κύτταρα να παράγουν τα στοιχεία εισόδου. Για να πάρετε μια textarea στοιχείο, να ρυθμίσετε μια στήλη που θα χρησιμοποιηθεί Y.Plugin.DataTableQuickEdit.textareaFormatter αντ 'αυτού.

validation

Επικύρωση ρυθμίσεων για κάθε πεδίο στη στήλη.

css

CSS τάξεις κωδικοποίηση των βασικών κανόνων επικύρωσης:

yiv-required

Αξία δεν πρέπει να είναι άδειο.

yiv-length:[x,y]

String πρέπει να είναι τουλάχιστον x χαρακτήρες και σε πιο y χαρακτήρες. Τουλάχιστον ένα από τα x και y πρέπει να καθορίζονται.

yiv-integer:[x,y]

Η ακέραια τιμή πρέπει να είναι τουλάχιστον x και στο πιο y . x και y είναι δύο προαιρετικά.

yiv-decimal:[x,y]

Η δεκαδική τιμή πρέπει να είναι τουλάχιστον x και στο πιο y . Εκθέτες δεν επιτρέπεται. x και y είναι δύο προαιρετικά.

fn

Μια λειτουργία που θα πρέπει να ονομάζεται με το DataTable ως πεδίο εφαρμογής της και το στοιχείο της φόρμας του κυττάρου, όπως το επιχείρημα. Επιστροφή true αν η τιμή είναι έγκυρη. Διαφορετικά, καλέστε this.displayMessage(...) για να εμφανιστεί ένα σφάλμα και στη συνέχεια επιστρέφουν ψευδείς.

msg

Ένας χάρτης των τύπων στα μηνύματα που θα εμφανίζεται όταν ένας βασικός κανόνας regex ή αποτύχει η επικύρωση. Οι έγκυροι τύποι είναι: required , min_length , max_length , integer , decimal , και regex . Δεν υπάρχει προεπιλογή για τον τύπο regex , οπότε θα πρέπει να καθορίσετε ένα μήνυμα, αν διαμορφώσετε ένα regex επικύρωσης. Τα μηνύματα λάθους προεπιλογή για τους άλλους τύπους αποθηκεύονται σε Y.FormManager.Strings (παρέχεται από γκαλερί formmgr-CSS-επικύρωση ) και μπορεί να παρακαμφθεί και / ή τοπικό.

regex

Κανονική έκφραση ότι η τιμή πρέπει να πληρούν προκειμένου να θεωρούνται έγκυρες.

Μερικές φορές, ένα μη επεξεργάσιμο στήλη πρέπει να αποδίδονται με διαφορετικό τρόπο κατά τη διάρκεια της γρήγορης κατάσταση επεξεργασίας. Το καλύτερο παράδειγμα είναι μια στήλη που περιέχει ένα σύνδεσμο, αφού πλοήγηση μακριά από τη σελίδα, ενώ στη λειτουργία γρήγορης επεξεργασίας μπορεί να είναι καταστροφικές. Για να καταργήσετε τη σύνδεση κατά τη διάρκεια της γρήγορης επεξεργασίας, ρυθμίστε qeFormatter για τη στήλη να είναι Y.Plugin.DataTableQuickEdit.readonlyLinkFormatter . Για τις διευθύνσεις ηλεκτρονικού ταχυδρομείου, χρησιμοποιήστε Y.Plugin.DataTableQuickEdit.readonlyEmailFormatter . Μπορείτε επίσης να γράψετε τη δική σας συνήθεια, μόνο για ανάγνωση μορφοποιητή. Απλά ακολουθήστε τις συνήθεις κανόνες για την κατασκευή κυττάρου μορφοποιητή DataTable.

Λείπει Χαρακτηριστικά

Λόγω ενός bug στο 3.3.0 YUI DataTable , η td στοιχείο περάσει σε ένα σύστημα διαμόρφωσης στήλη είναι πραγματικά από την προηγούμενη στήλη. Αυτό το έκανε πάρα πολύ ενοχλητικό να υποστηρίξει κάτω αντίγραφο, όπου ένα κουμπί στην πρώτη γραμμή σας επιτρέπει να αντιγράψετε την τιμή κάτω σε όλες τις άλλες σειρές.

Το σφάλμα που απαιτούνται, επίσης, μια πλήρη αναμόρφωση των βασικών κυττάρων Γρήγορη μορφοποιητές Επεξεργασία για να επιστρέψει το κείμενο, αντί να το χειρισμό του DOM. Αυτός είναι ο λόγος δεν είναι προσαρμοσμένες μορφοποιητές κυττάρων επίσημα υποστηρίζεται σε αυτή την αρχική έκδοση. Αν είστε τολμηροί, μπορείτε να χτίσετε τους ακόμα, αλλά να έχετε κατά νου ότι θα πρέπει να ξαναγράψουμε τους, συμπεριλαμβανομένης της προσθήκης για τη στήριξη αντίγραφο κάτω, μία φορά το bug στο DataTable καθορίζεται.

Περίπου ο συντάκτης: John Lindal ( @ jafl5272 στο Twitter) είναι ένας από τους επικεφαλής μηχανικούς κατασκευής το θεμέλιο για τη Yahoo! APT είναι χτισμένο. Προηγουμένως, εργάστηκε για το δίκτυο εκδοτών του Yahoo!.

Βρείτε συζητήσεις: Bloglines | Technorati

Μοιραστείτε και κατ 'επέκταση: Del.icio.us Σελιδοδείκτης με | Digg it! | Reddit!