Tablas estilo MS Excel / Google Spreadsheet con jQuery

Si existe un nuevo recurso que merezca la pena anexar a mi lista de plugins jQuery para optimizar tablas este es sin lugar a duda ParamQuery.

ParamQuery es un plugin jQuery para la creación de tablas dinámicas con un estilo similar al que utilizan MS Excel o Google Spreadsheet.

Para lograr esta apariencia, junto a sus funcionalidades, el autor de ParamQuery utilizó en gran medida jQuery UI. No hace falta decir que incluir esta biblioteca es imprescindible para su uso.

Dentro de las principales características vamos a destacar:

• Capacidad de ordenamiento por columnas.


• Paginación dinámica de resultados.


• Columnas y filas de tamaño ajustable.


• Aspecto visual personalizable por themes.


• Capacidad para ocultar / mostrar columnas.


• Importa información desde distintos formatos: HTML, Array, XML, JSON, etc.


• Puede funcionar con cualquier lenguaje del lado del servidor: ASP.NET, MVC3, JSP, JSF, PHP, etc.


• Edición dinámica del contenido de las celdas.


• Soporte para la mayoría de los navegadores modernos, incluidos: E 6,7,8, Firefox, Chrome, Opera, etc.

Ejemplo de uso:

Añadimos las bibliotecas necesarias a nuestro proyecto:

 <!--jQuery dependencies-->
    <link rel="stylesheet" href="jquery-ui.css" />
    <script src="jquery.min.js"></script>    
    <script src="jquery-ui.min.js"></script>

    <!--ParamQuery grid files-->
    <link rel="stylesheet" href="path to pqgrid.min.css" />
    <script type="text/javascript" src="path to pqgrid.min.js" />

Incluimos la caja donde se va a mostrar la tabla:

<div id="grid_array"></div>

Inicializamos el plugin con un arreglo para ingresar los datos:

<script>
$(function(){
    var data = [ [1,'Exxon Mobil','339,938.0','36,130.0'],
            [2,'Wal-Mart Stores','315,654.0','11,231.0'],
                        [3,'Royal Dutch Shell','306,731.0','25,311.0'],
                        [4,'BP','267,600.0','22,341.0'],
                        [5,'General Motors','192,604.0','-10,567.0'],
                        [6,'Chevron','189,481.0','14,099.0'],
                        [7,'DaimlerChrysler','186,106.3','3,536.3'],
                        [8,'Toyota Motor','185,805.0','12,119.6'],
                        [9,'Ford Motor','177,210.0','2,024.0'],
                        [10,'ConocoPhillips','166,683.0','13,529.0'],
                        [11,'General Electric','157,153.0','16,353.0'],                 
                        [12,'Total','152,360.7','15,250.0'],                            
                        [13,'ING Group','138,235.3','8,958.9'],
                        [14,'Citigroup','131,045.0','24,589.0'],
                        [15,'AXA','129,839.2','5,186.5'],
                        [16,'Allianz','121,406.0','5,442.4'],
                        [17,'Volkswagen','118,376.6','1,391.7'],
                        [18,'Fortis','112,351.4','4,896.3'],
                        [19,'Crédit Agricole','110,764.6','7,434.3'],
                        [20,'American Intl. Group','108,905.0','10,477.0']];

    var obj = {};
    obj.width = 700;
    obj.height = 400;
    obj.colModel = [{title:"Rank", width:100, dataType:"integer"},
        {title:"Company", width:200, dataType:"string"},
        {title:"Revenues ($ millions)", width:150, dataType:"float", 
         align:"right"},
        {title:"Profits ($ millions)", width:150, dataType:"float", 
         align:"right"}];
    obj.dataModel = {data:data};
    $("#grid_array").pqGrid( obj );                                

});        
</script>

Web: ParamQuery

via Kabytes http://www.kabytes.com/programacion/tablas-estilo-ms-excel-google-spreadsheet-con-jquery/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+kabytes+%28Kabytes%29