Comenzando con jqgrid

La primera cuadrícula

JqGrid se implementa como un complemento jQuery, nuestro complemento usa jQuery UI CSS o Bootstrap CSS para diseñar. Por lo tanto, habría que incluir los archivos JavaScript y CSS correspondientes. La segunda cosa básica, que uno debe saber, es el hecho de que jqGrid gratuito usa HTML

internamente. Habría que crear un elemento
vacío para reservar el lugar donde se debe crear la cuadrícula.

Finalmente, se debe llamar a jQuery("#tableId").jqGrid({/*options*/}); para crear la cuadrícula. Las diferentes opciones de jqGrid proporcionan los datos del cuerpo de la tabla y la información sobre la parte exterior de la cuadrícula. Por ejemplo, el siguiente código

$(function () {
        "use strict";
        $("#grid").jqGrid({
            colModel: [
                { name: "firstName" },
                { name: "lastName" }
            ],
            data: [
                { id: 10, firstName: "Angela", lastName: "Merkel" },
                { id: 20, firstName: "Vladimir", lastName: "Putin" },
                { id: 30, firstName: "David", lastName: "Cameron" },
                { id: 40, firstName: "Barack", lastName: "Obama" },
                { id: 50, firstName: "François", lastName: "Hollande" }
            ]
        });
    });

Las diferencias entre jqGrid gratuito y una tabla HTML estándar son las siguientes:

  • Columnas que se pueden ordenar: Se puede hacer clic en el encabezado de la columna para ordenar las filas por el contenido de la columna.

  • Efectos de desplazamiento: jqGrid gratuito le permite utilizar efectos de desplazamiento para las filas y las celdas de la cuadrícula.

  • Filas seleccionables: se puede hacer clic en una fila de la cuadrícula para seleccionarla/deseleccionarla y se puede in-place-edit the cells as well.

  • Filas multiseleccionables: se pueden seleccionar varias filas.

  • Filas seleccionables: se puede hacer clic en una fila de la cuadrícula para seleccionarla.

  • Columnas Redimensionables: Uno puede cambiar el tamaño de las columnas de una manera intuitiva, como se muestra en la imagen animada a continuación.

==> Algunas diferencias avanzadas consisten en:

  • Buscar/filtrar: se puede buscar o filtrar la tabla como eq,lt,lte,gt, etc.

    --Search : A new popup comes for searching
    

    –Filter : A text-box appears on the top of each column of the grid

  • Característica de fila de paginación/ plegable.

Ejemplo completo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Your page title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/css/ui.jqgrid.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/jquery.jqgrid.min.js"></script>
    <script>
    //<![CDATA[
    $(function () {
        "use strict";
        $("#grid").jqGrid({
            colModel: [
                { name: "firstName" },
                { name: "lastName" }
            ],
            data: [
                { id: 10, firstName: "Angela", lastName: "Merkel" },
                { id: 20, firstName: "Vladimir", lastName: "Putin" },
                { id: 30, firstName: "David", lastName: "Cameron" },
                { id: 40, firstName: "Barack", lastName: "Obama" },
                { id: 50, firstName: "François", lastName: "Hollande" }
            ]
        });
    });
    //]]>
    </script>
</head>
<body>
<table id="grid"></table>
</body>
</html>