Looking for jqgrid Answers? Try Ask4KnowledgeBase
Looking for jqgrid Keywords? Try Ask4Keywords

jqgridKomma igång med jqgrid


Anmärkningar

Det här avsnittet ger en översikt över vad jqgrid är, och varför en utvecklare kanske vill använda den.

Det bör också nämna alla stora ämnen inom jqgrid och länka till relaterade ämnen. Eftersom dokumentationen för jqgrid är ny kan du behöva skapa initialversioner av relaterade ämnen.

Det första rutnätet

JqGrid implementeras som jQuery-plugin, vår plugin använder jQuery UI CSS eller Bootstrap CSS för styling. Därför måste man inkludera motsvarande JavaScript- och CSS-filer. Den andra grundläggande saken, som man bör veta, är det faktum att gratis jqGrid använder HTML internt. Man måste skapa ett tomt element för att reservera platsen där nätet ska skapas.

Slutligen bör man ringa jQuery("#tableId").jqGrid({/*options*/}); för att skapa rutnätet. Olika alternativ för jqGrid tillhandahåller data från tabellkroppen och informationen om den yttre delen av nätet. Till exempel koden nedan

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

Skillnaderna mellan gratis jqGrid och en standard HTML-tabell är som följer:

  • Sorterbara kolumner: Man kan klicka på kolumnhuvudet för att sortera raderna efter innehållet i kolumnen.

  • Hover Effects : Free jqGrid ger dig möjligheten att använda svävande effekter för rader och celler på nätet.

  • Valbara rader : Man kan klicka på en rad i rutnätet för att välja / avmarkera det och kan
    redigera cellerna på plats också.

  • Flervalsbara rader : Man kan välja flera rader.

  • Valbara rader : Man kan klicka på en rad i rutnätet för att välja det.

  • Ändra storlek på kolumner : Man kan ändra storlek på kolumnerna på ett intuitivt sätt, som visas i den animerade bilden nedan.

==> Vissa avancerade skillnader består av:

  • Sök / filter : Man kan söka eller filtrera tabellen på som ekv, lt, lte, gt etc.

    - Sök: En ny popup kommer för sökning

    - Filter: En textruta visas på toppen av varje kolumn i rutnätet

  • Pagination / hopfällbar radfunktion .

Fullständigt exempel:

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