Inizio Interfaccia utente sul blog (YUIBlog)

Treeble con YUI 3 DataTable

La versione beta di DataTable in YUI 3.3.0 ci dà un componente molto potente per giocare. A calci le gomme in modo utile, ho deciso di aggiornare il mio Treeble esempi di utilizzare DataTable. (Treeble permette la visualizzazione di dati gerarchici in una tabella .)

Con mia grande gioia, è stato un gioco da ragazzi! Tutto il lavoro duro è fatto in TreebleDataSource , che si estende YUI 3 DataSource, quindi tutto quello che dovevo fare era inserirlo in DataTable utilizzando Y.Plugin.DataTableDataSource e quindi configurare le colonne:

 var ds = new Y. TreebleDataSource (...),
	 pg = new Y. paginator (...),
	 tavolo;

 sendRequest funzione () {
	 table.datasource.load ({
		 richiesta: {
			 startIndex: pg.getStartIndex (),
			 resultCount: pg.getRowsPerPage ()
		 }
	 });
 }

 var cols = [
     {Chiave: 'yui33-hack', etichetta:''},
     {
         chiave: 'treeblenub', etichetta:'',
         formattatore: Y.Treeble.buildTwistdownFormatter (sendRequest)
     },
     {
         chiave: 'title', etichetta: 'Titolo',
         formattatore: Y.Treeble.treeValueFormatter
     },
     ...
 ];

 tabella = new Y.DataTable.Base ({columnset: cols});
 table.plug (Y.Plugin.DataTableDataSource, {datasource: ds});

Per vedere il codice sorgente completo, consultare la esempio dal vivo .

Le mosche solo l'unguento sono:

• Il yui33-hack colonna. A causa di un bug nel YUI 3.3.0 DataTable , il td elemento passato a un formattatore colonna è in realtà dalla colonna precedente. Così, la prima colonna della tabella mostra il twistdown, e la seconda colonna è vuota.
• I valori non definiti nei dati vengono visualizzati come {value} invece di spazi ( bug 2529858 ).

Al fine di rendere Treeble più facile da usare, ho aggiunto una pelle Sam che gli stili per le classi CSS scritto dal Y.Treeble formattatori.

Buon divertimento!

Circa l'autore: Giovanni Lindal ( @ jafl5272 su Twitter) è uno degli ingegneri di piombo costruendo le fondamenta su cui Yahoo! APT è costruito. In precedenza, ha lavorato sulla Publisher Network Yahoo!.

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark con del.icio.us | Digg it! | reddit!