jqgrid'e başlarken

İlk ızgara

JqGrid, jQuery eklentisi olarak uygulanır, eklentimiz şekillendirme için jQuery UI CSS veya Bootstrap CSS kullanır. Bu nedenle, ilgili JavaScript ve CSS dosyalarını eklemek gerekir. Bilmeniz gereken ikinci temel şey, ücretsiz jqGrid’in dahili olarak HTML

kullanmasıdır. Izgaranın oluşturulacağı yeri ayırmak için boş bir

öğesi oluşturulmalıdır.

Son olarak, ızgarayı oluşturmak için jQuery("#tableId").jqGrid({/*options*/}); çağırılmalıdır. jqGrid’in farklı seçenekleri, tablo gövdesinin verilerini ve ızgaranın dış kısmı hakkında bilgi sağlar. Örneğin, aşağıdaki kod

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

Ücretsiz jqGrid ve standart bir HTML tablosu arasındaki farklar şunlardır:

Sıralanabilir Sütunlar: Satırları sıralamak için sütun başlığına tıklanabilir sütundaki içeriğe göre.
Vurgu Efektleri: Ücretsiz jqGrid, ızgaradaki satırlar ve hücreler için gezinme efektlerini kullanma yeteneği verir.
Seçilebilir Satırlar: Seçmek/seçimi kaldırmak için ızgaradaki bir satıra tıklanabilir ve in-place-edit the cells as well.
Çoklu Seçilebilir Satırlar: Birden çok satır seçilebilir.
Seçilebilir Satırlar: Izgaranın bir satırına tıklanarak seçilebilir.
Yeniden Boyutlandırılabilir Sütunlar: Sütunlar aşağıdaki gibi sezgisel bir şekilde yeniden boyutlandırılabilir: Aşağıdaki animasyonlu resimde gösterilmiştir.

==> Bazı avans farklılıkları şunlardan oluşur:

Arama/filtre : Tabloyu eq,lt,lte,gt vb. olarak arayabilir veya filtreleyebilirsiniz.
```
--Search : A new popup comes for searching
```
–Filter : A text-box appears on the top of each column of the grid
Sayfalandırma/ Katlanabilir satır özelliği.

Tam Örnek:

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

jqgrid'e başlarken

İlk ızgara #

İlk ızgara