Interfaz de usuario de Yahoo! Blog (YUIBlog)

Treeble con YUI DataTable 3

La versión beta de DataTable de YUI 3.3.0 nos da un componente muy potente para jugar. Para dar inicio a los neumáticos de una manera útil, decidí actualizar mi Treeble ejemplos para usar DataTable. (Treeble permite mostrar los datos jerárquicos en una tabla .)

Para mi deleite, que era una brisa! Todo el trabajo duro se hace en TreebleDataSource , que se extiende 3 YUI DataSource, por lo que todo lo que tenía que hacer era conectarlo a DataTable mediante Y.Plugin.DataTableDataSource y luego configurar las columnas:

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

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

 var cols = [
     {Key: 'yui33-hack ", etiqueta:''},
     {
         clave: "treeblenub", etiqueta:'',
         formateador: Y.Treeble.buildTwistdownFormatter (sendRequest)
     },
     {
         clave: 'title', la etiqueta: 'Título',
         formateador: Y.Treeble.treeValueFormatter
     },
     ...
 ];

 tabla = new Y.DataTable.Base ({ColumnSet: cols});
 table.plug (Y.Plugin.DataTableDataSource, {fuente de datos: ds});

Para ver el código fuente completo, consulte el ejemplo en vivo .

Las moscas sólo en la pomada son las siguientes:

• La columna yui33-hack. Debido a un error en YUI DataTable 3.3.0 , el td elemento pasa a un formateador de la columna es en realidad de la columna anterior. Así, la primera columna de la tabla muestra el twistdown, y la segunda columna está vacía.
• Los valores indefinidos en los datos se muestran como {value} en lugar de espacios en blanco ( error 2529858 ).

Con el fin de Treeble más fácil de usar, he añadido una piel de Sam que los estilos a las clases CSS escritos por los Y.Treeble formateadores.

Disfrute!

Sobre el autor: John Lindal ( @ jafl5272 en Twitter) es uno de los ingenieros de plomo en la construcción de los cimientos sobre los que Yahoo! APT se construye. Anteriormente, trabajó en el Yahoo! Publisher Network.

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!