Blog Interface utilisateur Yahoo! (YUIBlog)

Treeble avec YUI 3 DataTable

La version bêta de DataTable dans YUI 3.3.0 nous donne un élément très puissant pour jouer avec. Pour lancer les pneus d'une manière utile, j'ai décidé de mettre à jour mes Treeble exemples à utiliser DataTable. (Treeble permet l'affichage de données hiérarchiques dans un tableau .)

À ma grande joie, c'était un jeu d'enfant! Tout le travail dur est fait dans TreebleDataSource , qui s'étend YUI 3 DataSource, alors tout ce que j'avais à faire était de le brancher dans DataTable à l'aide Y.Plugin.DataTableDataSource puis configurer les colonnes:

 var ds = new Y.TreebleDataSource (...),
	 pg = new Y.Paginator (...),
	 tableau;

 sendRequest function () {
	 table.datasource.load ({
		 requête: {
			 startIndex: pg.getStartIndex (),
			 resultCount: pg.getRowsPerPage ()
		 }
	 });
 }

 var cols = [
     {Clé: «yui33-hack ', label:''},
     {
         clé: «treeblenub ', label:'',
         formateur: Y.Treeble.buildTwistdownFormatter (sendRequest)
     },
     {
         clé: 'title', label: "Titre",
         formateur: Y.Treeble.treeValueFormatter
     },
     ...
 ];

 table = new Y.DataTable.Base ({ColumnSet: cols});
 table.plug (Y.Plugin.DataTableDataSource, {source de données: ds});

Pour voir le code source complet, reportez-vous à l' exemple vivant .

Les mouches seule ombre au tableau sont les suivantes:

• La colonne yui33-hack. En raison d'un bogue dans YUI 3.3.0 DataTable , le td élément passé à un formateur est en fait la colonne de la colonne précédente. Ainsi, la première colonne dans le tableau affiche le twistdown, et la deuxième colonne est vide.
• Valeurs non définies dans les données sont affichées sous forme {value} au lieu d'ébauches ( bogue 2529858 ).

Afin de rendre plus facile à utiliser Treeble, j'ai ajouté une peau Sam qui styles aux classes CSS écrites par les Y.Treeble formateurs.

Amusez-vous!

À propos de l'auteur: John Lindal ( @ jafl5272 sur Twitter) est l'un des ingénieurs de plomb construire le fondement sur ​​lequel Yahoo! APT est construit. Auparavant, il a travaillé sur le Yahoo! Publisher Network.

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!