Exemple AJAX

vGrid demande les rangées de continents à /api/continents. La API se encarga del filtrado, la ordenación y la paginación.

Inclure vGrid

Copiez public/vgrid.css et public/vgrid.js de ce projet dans les fichiers publics de votre site, puis référencez leurs URL publiques.

<link rel="stylesheet" href="/vgrid.css">
<script src="/vgrid.js"></script>

Ajouter un élément cible

vGrid se añade a este elemento. El id debe ser único en la página y coincidir con el valor el del script.

<div id="vgrid"></div>

Initialiser la grille

Coloque este script después del elemento de destino y cuando vgrid.js ya se haya cargado.

<script>
vGrid({
  el: '#vgrid',
  caption: "Continents",
  dataSource: '/api/continents',
  columns: [
    { name: 'id', label: 'ID' },
    { name: 'code', label: "Code" },
    { name: 'name', label: "Nom" },
  ],
  actions: {
    clear: { active: true, symbol: '\u2715', title: "Effacer les filtres" },
    download: { active: true, symbol: '\u2913', title: "T\u00e9l\u00e9charger" },
    print: { active: true, symbol: '\u2912', title: "Imprimer" },
    refresh: { active: true, symbol: '\u21BB', title: "Actualiser" },
    settings: { active: true, html: '\u2699\uFE0E', title: "Param\u00e8tres" },
  },
});
</script>

Exemples de back-end

Tous les back-ends suivent le même modèle : se connecter aux données, sélectionner les rangées, puis associer chaque rangée aux champs configurés dans vGrid.

Consultez la référence Swagger/OpenAPI pour consulter tous les paramètres des points de terminaison et les schémas de réponse.


// Connectez-vous à votre base de données. Utilisez ici le client de base de données de votre langage ou framework.
$pdo = new PDO('mysql:host=localhost;dbname=example', 'username', 'password');

// Sélectionnez les champs que la grille affichera.
$rows = $pdo->query('SELECT id, code, name FROM continents')->fetchAll(PDO::FETCH_ASSOC);

// Convertissez chaque rangée de la base de données au format d’objet JSON utilisé par vGrid.
$data = [];
foreach ($rows as $row) {
    $data[] = [
        'id' => (int) $row['id'],
        'code' => $row['code'],
        'name' => $row['name'],
    ];
}

header('Content-Type: application/json');
echo json_encode([
    'data' => $data,
    'total' => count($data),
    'page' => 1,
    'limit' => count($data),
]);

import sqlite3
from flask import jsonify

# Connectez-vous à votre base de données. Utilisez ici votre bibliothèque Python de base de données.
connection = sqlite3.connect('example.db')

# Sélectionnez les champs que la grille affichera.
rows = connection.execute('SELECT id, code, name FROM continents').fetchall()

# Convertissez chaque rangée de la base de données au format d’objet JSON utilisé par vGrid.
data = []
for row in rows:
    data.append({
        'id': row[0],
        'code': row[1],
        'name': row[2],
    })

return jsonify({
    'data': data,
    'total': len(data),
    'page': 1,
    'limit': len(data),
})

// Connectez-vous à votre base de données. Utilisez ici le client de base de données ou le framework Java.
Connection connection = DriverManager.getConnection(url, username, password);

// Sélectionnez les champs que la grille affichera.
ResultSet rows = connection.createStatement().executeQuery("SELECT id, code, name FROM continents");

// Convertissez chaque rangée de la base de données au format d’objet JSON utilisé par vGrid.
List<Map<String, Object>> data = new ArrayList<>();
while (rows.next()) {
    data.add(Map.of(
        "id", rows.getInt("id"),
        "code", rows.getString("code"),
        "name", rows.getString("name")
    ));
}

return Map.of(
    "data", data,
    "total", data.size(),
    "page", 1,
    "limit", data.size()
);

// Connectez-vous à votre base de datos. Utilisez aquí el cliente de base de datos o el framework C#.
await using var connection = new SqlConnection(connectionString);

// Sélectionnez les champs que la grille affichera.
var rows = await connection.QueryAsync<Continent>("SELECT id, code, name FROM continents");

// Convertissez chaque rangée de la base de données au format d’objet JSON utilisé par vGrid.
var data = new List<object>();
foreach (var row in rows)
{
    data.Add(new { id = row.Id, code = row.Code, name = row.Name });
}

return Results.Json(new {
    data,
    total = data.Count,
    page = 1,
    limit = data.Count,
});