Yahoo! Blog διασύνδεση χρήστη (YUIBlog)

Treeble με YUI 3 DataTable

Η έκδοση beta του DataTable σε YUI 3.3.0 μας δίνει ένα πολύ ισχυρό συστατικό για να παίξει με. Να κλωτσήσει τα ελαστικά σε ένα χρήσιμο τρόπο, αποφάσισα να ενημερώσετε μου Treeble παραδείγματα στη χρήση DataTable. (Treeble επιτρέπει την εμφάνιση ιεραρχικών δεδομένων σε έναν πίνακα .)

Για την χαρά μου, ήταν ένα αεράκι! Όλη τη σκληρή δουλειά γίνεται σε TreebleDataSource , η οποία επεκτείνει YUI 3 DataSource, οπότε όλα όσα είχα να κάνω ήταν συνδέστε το σε DataTable χρησιμοποιώντας Y.Plugin.DataTableDataSource και στη συνέχεια να ρυθμίσετε τις στήλες:

 var ds = νέα (...), TreebleDataSource Y.
	 pg = νέα (...), Paginator Y.
	 τραπέζι?

 sendRequest λειτουργία () {
	 table.datasource.load ({
		 αιτήματος: {
			 startIndex: pg.getStartIndex (),
			 resultCount: pg.getRowsPerPage ()
		 }
	 })?
 }

 var cols = [
     {Κλειδί: «yui33-hack», ετικέτα:''},
     {
         σήμα «treeblenub»,:: κλειδί'',
         Formatter: Y.Treeble.buildTwistdownFormatter (sendRequest)
     },
     {
         κλειδί: «τίτλο», επισήμανση: «Τίτλος»,
         Formatter: Y.Treeble.treeValueFormatter
     },
     ...
 ]?

 πίνακα = νέα Y.DataTable.Base ({columnset: στήλες})?
 table.plug (Y.Plugin.DataTableDataSource, {πηγή δεδομένων: ds})?

Για να δείτε την πλήρη πηγαίο κώδικα, ανατρέξτε στο ζωντανό παράδειγμα .

Οι μύγες μόνο στην αλοιφή είναι οι εξής:

• Η yui33-hack στήλη. Λόγω ενός bug στο YUI 3.3.0 DataTable , η td στοιχείο που πέρασε σε ένα σύστημα διαμόρφωσης στήλη είναι πραγματικά από την προηγούμενη στήλη. Έτσι, η πρώτη στήλη του πίνακα εμφανίζεται η twistdown, και η δεύτερη στήλη είναι κενή.
• τιμές στα δεδομένα που είναι ακαθόριστα εμφανίζονται ως {value} αντί για κενά ( bug 2529858 ).

Προκειμένου να καταστεί Treeble πιο εύκολο στη χρήση, έχω προσθέσει ένα δέρμα Σαμ ποια στυλ στο CSS τάξεις γραπτή από το Y.Treeble μορφοποιητές.

Απολαύστε το!

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

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

Μοιραστείτε και επεκτείνει: Σελιδοδείκτης με del.icio.us | Digg αυτό! | reddit!