Ajustement & disposition intelligents des colonnes
Deux fonctionnalités de grille responsive indépendantes, activées par défaut, qui gardent un tableau large utilisable sans aucun défilement horizontal sur les petits écrans.
Vue d'ensemble
Les deux fonctionnalités sont activées par défaut sur tout le site (XcrudConfig::$intelligentColumnFit et XcrudConfig::$intelligentColumnArrangement, toutes deux à true), et peuvent chacune être surchargées par page :
$xcrud->intelligent_column_fit();
$xcrud->intelligent_column_arrangement();
// Ou désactiver l'une des deux pour cette page en particulier :
$xcrud->intelligent_column_fit(false);| Méthode | Type | Par défaut | Description |
|---|---|---|---|
intelligent_column_fit($enabled = true) | bool | XcrudConfig::$intelligentColumnFit | Surcharge par page pour l'ajustement des colonnes (Column Fit) |
intelligent_column_arrangement($enabled = true) | bool | XcrudConfig::$intelligentColumnArrangement | Surcharge par page pour la disposition des colonnes (Column Arrangement) |
Elles résolvent des problèmes de largeur différents et ne rentrent pas en conflit - voir « Comment les deux interagissent » ci-dessous.
Column Fit
Column Fit mesure en direct, dans le navigateur, lesquelles des colonnes d'une grille tiennent réellement dans la largeur actuelle de son conteneur et n'affiche que celles-ci - les autres sont masquées derrière un petit bouton d'expansion par ligne qui les révèle sous forme de ligne de détail sans bordure « libellé : valeur » pour cette seule ligne, au clic. La mesure est refaite automatiquement au redimensionnement de la fenêtre : une grille qui tient parfaitement sur un grand écran et n'affiche que 4 des 8 colonnes sur un ordinateur portable en montrera plus ou moins à mesure que la fenêtre est élargie ou rétrécie.
$xcrud->table('customers');
$xcrud->intelligent_column_fit();C'est purement additif et côté client - cela ne change rien pour un tableau dont les colonnes tiennent déjà, ni pour une page qui ne l'active jamais.
Column Arrangement
Column Arrangement cible spécifiquement les écrans étroits, largeur téléphone (environ ≤640px), où un tableau n'a tout simplement plus de lecture « en largeur » qui ait un sens. Plutôt que de rétrécir ou de masquer des colonnes, elle remodèle chaque ligne entièrement : chaque ligne de grille devient sa propre carte bordée et empilée, avec une ligne « Libellé : valeur » par champ. Si la ligne comporte un champ image, photo ou de type caméra, ce champ est épinglé sous forme de vignette ancrée au bord de la carte plutôt que d'apparaître comme une simple ligne libellé:valeur de plus.
$xcrud->table('products');
$xcrud->intelligent_column_arrangement();Comment les deux interagissent
Column Fit et Column Arrangement se connaissent mutuellement, elles ne sont pas en concurrence : au point de rupture étroit (≤640px), Arrangement prend automatiquement le relais de Fit - la grille devient des cartes empilées plutôt qu'une rangée de colonnes mesurées. Au-dessus de cette largeur, Arrangement ne fait rien et Fit (si également activée) continue de gérer le débordement de la façon habituelle. En pratique, vous pouvez laisser les deux activées partout : chacune interviendra exactement là où elle est la mieux adaptée.