Começando com jqgrid

A primeira grade

JqGrid é implementado como plugin jQuery, nosso plugin usa jQuery UI CSS ou Bootstrap CSS para estilo. Assim, seria necessário incluir os arquivos JavaScript e CSS correspondentes. A segunda coisa básica, que se deve saber, é o fato de que o jqGrid gratuito usa HTML

internamente. Seria necessário criar um elemento

vazio para reservar o local onde a grade deve ser criada.

Finalmente deve-se chamar jQuery("#tableId").jqGrid({/*options*/}); para criar a grade. Diferentes opções do jqGrid fornecem os dados do corpo da tabela e as informações sobre a parte externa da grade. Por exemplo, o código abaixo

$(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" }
            ]
        });
    });

As diferenças entre o jqGrid gratuito e uma tabela HTML padrão são as seguintes:

Colunas Ordenáveis: Pode-se clicar no cabeçalho da coluna para classificar as linhas pelo conteúdo da coluna.
Efeitos de foco: o jqGrid gratuito oferece a capacidade de usar efeitos de foco para linhas e células na grade.
Linhas selecionáveis: Pode-se clicar em uma linha da grade para selecioná-la/desmarcá-la e in-place-edit the cells as well.
Linhas multi-selecionáveis: Pode-se selecionar várias linhas.
Linhas selecionáveis: Pode-se clicar em uma linha da grade para selecioná-la.
Colunas Redimensionáveis: Pode-se redimensionar as colunas de forma intuitiva, pois mostrado na imagem animada abaixo.

==> Algumas diferenças avançadas consistem em:

Pesquisar/filtro: Pode-se pesquisar ou filtrar a tabela 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
Paginação/Recolhível recurso de linha.

Exemplo 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>

Começando com jqgrid

A primeira grade #

A primeira grade