Looking for jqgrid Keywords? Try Ask4Keywords

jqgridEmpezando con jqgrid


Observaciones

Esta sección proporciona una descripción general de qué es jqgrid y por qué un desarrollador puede querer usarlo.

También debe mencionar cualquier tema grande dentro de jqgrid, y vincular a los temas relacionados. Dado que la Documentación para jqgrid es nueva, es posible que deba crear versiones iniciales de esos temas relacionados.

La primera cuadrícula

JqGrid se implementa como complemento jQuery, nuestro complemento utiliza jQuery UI CSS o Bootstrap CSS para el estilo. Por lo tanto, uno tendría que incluir los archivos JavaScript y CSS correspondientes. La segunda cosa básica, que uno debe saber, es el hecho de que jqGrid libre utiliza HTML internamente. Uno tendría que crear un elemento vacío para reservar el lugar donde se debe crear la cuadrícula.

Finalmente, uno 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 free jqGrid y una tabla HTML estándar son las siguientes:

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

  • Hover Effects : Free jqGrid te da la posibilidad de usar efectos de hovering 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 puede
    En lugar de editar las celdas también.

  • Filas multi-seleccionables : Uno puede seleccionar múltiples filas.

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

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

==> Algunas diferencias anticipadas consisten en:

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

    --Búsqueda: viene una nueva ventana emergente para buscar

    --Filtro: aparece un cuadro de texto en la parte superior de cada columna de la cuadrícula

  • Paginación / Característica fila 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>