Ejemplo AJAX

vGrid solicita las filas de continentes a /api/continents. La API se encarga del filtrado, la ordenación y la paginación.

Incluir vGrid

Copie public/vgrid.css y public/vgrid.js de este proyecto a los archivos públicos de su sitio web y, después, utilice sus URL públicas.

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

Añadir un elemento de destino

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>

Inicializar la cuadrícula

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

<script>
vGrid({
  el: '#vgrid',
  caption: "Continentes",
  dataSource: '/api/continents',
  columns: [
    { name: 'id', label: 'ID' },
    { name: 'code', label: "C\u00f3digo" },
    { name: 'name', label: "Nombre" },
  ],
  actions: {
    clear: { active: true, symbol: '\u2715', title: "Borrar filtros" },
    download: { active: true, symbol: '\u2913', title: "Descargar" },
    print: { active: true, symbol: '\u2912', title: "Imprimir" },
    refresh: { active: true, symbol: '\u21BB', title: "Actualizar" },
    settings: { active: true, html: '\u2699\uFE0E', title: "Configuraci\u00f3n" },
  },
});
</script>

Ejemplos básicos de backend

Todos los backends siguen el mismo patrón: conectarse a los datos, seleccionar filas y asignar cada fila a los campos configurados en vGrid.

Consulte la referencia Swagger/OpenAPI para ver todos los parámetros de los endpoints y los esquemas de respuesta.


// Conéctese a su base de datos. Use aquí el cliente de base de datos de su lenguaje o framework.
$pdo = new PDO('mysql:host=localhost;dbname=example', 'username', 'password');

// Seleccione los campos que mostrará la cuadrícula.
$rows = $pdo->query('SELECT id, code, name FROM continents')->fetchAll(PDO::FETCH_ASSOC);

// Convierta cada fila de la base de datos al formato de objeto JSON que usa 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

# Conéctese a su base de datos. Use aquí su biblioteca de base de datos de Python.
connection = sqlite3.connect('example.db')

# Seleccione los campos que mostrará la cuadrícula.
rows = connection.execute('SELECT id, code, name FROM continents').fetchall()

# Convierta cada fila de la base de datos al formato de objeto JSON que usa 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),
})

// Conéctese a su base de datos. Use aquí el cliente de base de datos o framework de Java.
Connection connection = DriverManager.getConnection(url, username, password);

// Seleccione los campos que mostrará la cuadrícula.
ResultSet rows = connection.createStatement().executeQuery("SELECT id, code, name FROM continents");

// Convierta cada fila de la base de datos al formato de objeto JSON que usa 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()
);

// Conéctese a su base de datos. Use aquí el cliente de base de datos o framework de C#.
await using var connection = new SqlConnection(connectionString);

// Seleccione los campos que mostrará la cuadrícula.
var rows = await connection.QueryAsync<Continent>("SELECT id, code, name FROM continents");

// Convierta cada fila de la base de datos al formato de objeto JSON que usa 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,
});