Yahoo! Interfaz de usuario de blog (YUIBlog)

Tabla de estadísticas de pie de página de YUI 2 DataTable

El YUI 2 DataTable hace mucho. Pero una de las cosas que hace no es nada con un pie de mesa, donde se podría esperar encontrar totales, promedios y otros datos de resumen. Así que me he extendido DataTable para agregar los datos de resumen para los datos numéricos.

Cómo se va

En primer lugar, a utilizar: que necesitamos un código de GitHub - hay tres archivos js, y tendrá todos ellos en su página después de la DataTable js YUI. Y es posible que desee cambiar el espacio de nombres - que utilizamos YAHOO.LPLT.DataTable como la ampliación de YAHOO.widget.DataTable . Voy a explicar un poco más sobre por debajo de estos archivos.

Configurar la tabla de datos de forma normal, pero hay tres cosas que hay que hacer para obtener el resumen de trabajo:

1. Asegúrese de que su fuente de datos especifica "número" analizadores de cualquier campo que desea resumir, en particular si está realizando la edición en línea de células:

     myDataSource.responseSchema = {campos: [
       {Clave: "cantidad", programa de análisis: "número"}
       / * Etc ..  * /
    ]};
   

2. Agregar una configuración de clave y valor de columnStats: true en la matriz de definición de columna:

     myColumnDefs var = [
        {Clave: "cantidad", la etiqueta: "Cantidad", columnStats: true} 
        / * Etc ..  * /
    ];
   

   para las columnas que desea resumir. (El total de su 'id' columna probablemente no es muy útil!).
3. Dile a la tabla de datos que las estadísticas para calcular:

    MyDataTable var = new YAHOO.LPLT.DataTable ("exampleEl",
        myColumnDefs, 
        myDataSource, 
        {ColumnStats: {on: true, estadísticas: ['suma']}}
    );
   

   Esta es la forma más sencilla posible configurar las estadísticas de la columna, pero usted puede agregar las estadísticas adicionales, personalizar las etiquetas, y mucho más.

Hay un ejemplo en github para jugar.

Algunos puntos:

• El pie de página va a cambiar con la tabla. Así que si usted mostrar / ocultar las columnas, moverlos, añadir otras nuevas, añadir o eliminar filas, ordenar o utilizar los editores en línea de células, el pie de página se actualizará la interfaz de usuario y las estadísticas en consecuencia.
• Usted puede agregar tantas filas al pie de página que desee, una fila para cada estadística. En su forma actual, puede hacer que decir, la suma promedio, mínimo, máximo, rango, Desviación media, varianza, o varianceUnbiased. 'Estadísticas' El tema de la configuración es un arreglo: sólo tiene que añadir las estadísticas que le gustaría a esta matriz (por ejemplo, stats: ["min", "median", "stdev"] ).
• El pie de tabla utilizar ningún formateadores especificado para esa columna.
• Si usted tiene un paginador, puede elegir si las estadísticas se muestran en la tabla entera o sólo la página actualmente visible. Añadir pagedTotals: true a la columnStats objeto de tener estadísticas de la página.
• La serie 'estadísticas' en el objeto de configuración también puede incluir literales de objeto, con la etiqueta de "llaves y 'fn'. fn es la función que calcula las estadísticas - ya sea una cadena como "mínimo" o una función que devuelve un número. El ejemplo de GitHub muestra cómo se puede hacer utilizando los datos de una "total ponderado" de dos columnas.

Más información sobre el código de extensión real

El archivo principal, YAHOO_DataTable_colStats.js, añade un par de propiedades protegidas de la tabla de datos, un área protegida algunos métodos, y dos métodos públicos, colStatsRefresh que volverá a calcular y dibujar el pie de mesa, y colStatsGetRecordSet , que devuelve una matriz que sea de todos registros, o apenas visibles los que, según el valor de pagedTotals . La primera puede ser útil si usted está haciendo cambios en la tabla que no se activan los eventos útil (por ejemplo cambiar directamente los datos en la base de registros) y la segunda si está utilizando las funciones habituales de resumen.

YAHOO_DataSource_patch.js añade un parseField(key, value) método para DataSource. Esto es necesario cuando se tiene editores cuadro de texto en línea de células para los datos numéricos, el editor devuelve una cadena, que no se analiza de forma automática, por lo que no se puede añadir. El parseField proporciona acceso a los programas de análisis se especifica en el origen de datos, para convertir los datos editados.

YAHOO_util_Stats.js proporciona un independiente YAHOO.util.Stats clase que envuelve un clasificado) matriz (de datos numéricos y proporciona las estadísticas de resumen. Es la dependencia sólo es YAHOO.lang. Un ejemplo YAHOO.util.Stats es mantenido por el DataTable para cada columna que se va a resumir, cachés y algunos de los más difíciles de matemáticas para mejorar el rendimiento. Las cadenas pasa a la matriz de estadísticas ('min', 'medio', etc) son los métodos de la clase YAHOO.util.Stats, de esta manera podrían añadir otras adicionales, añadiendo con el prototipo. Tenga en cuenta sin embargo, que sólo tienen acceso a los datos de "su" columna.

Y, por último

Estoy bastante seguro de que esto no va a trabajar con tablas de datos de desplazamiento, así que no he probado aún! Pero si usted encuentra cualquier problema o tiene ideas, por favor, no los puso en el seguimiento de incidencias GitHub.

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar con del.icio.us | Digg él! | reddit!