# j-DataGrid > Cette grille a été créée pour les applications à page unique et les applications d'entreprise. Framework: jcomponent20 Product: jComponent 20 (jcomponent@20) Language: fr Content-SHA256: 9a1d9f9285dccb08eb56dceb0e5c2bf314f53ddc953433da7c45eb5eac767328 Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e Review: not-recorded Cette grille a été créée pour les applications à page unique et les applications d'entreprise. - système de grille `bootstrap` nécessaire - vous pouvez restituer plus de 30 000 lignes sans aucun problème - prend en charge les colonnes glisser-déposer - prend en charge le tri - prend en charge le redimensionnement des colonnes - prend en charge le défilement vertical/horizontal - prend en charge les filtres - prend en charge les cases à cocher - barres de défilement personnalisées indépendantes du système d'exploitation - réactif - prend en charge le __mode sombre__ - Le filtre d'options de colonne __IMPORTANT__ nécessite le composant `j-Directory` __À FAIRE__ : - multitri - redimensionnement des colonnes pour les appareils tactiles - réorganisation des colonnes pour les appareils tactiles __Data-source__ doit contenir : ```js { schema: 'schema_id', // NEW: optional, DataGrid supports multiple schemas (it means: multiple declaration of columns) items: [{ name: 'Row 1' }, { name: 'Row 2' }, ...] // items page: 1, // current pages pages: 30, // count of pages limit: 5, // items limit per page count: 150 // count of items in DB } ``` ou `Array` brut mais vous ne pouvez pas utiliser la pagination et les filtres externes : ```js [{ name: 'Row 1' }, { name: 'Row 2' }]; ``` __Configuration__ : - `filterlabel {String}` un espace réservé par défaut pour tous les filtres (facultatif) - `rememberfilter {Boolean}` avec true, il mémorise les filtres pour chaque schéma (par défaut : `true`) - `schema {String}` un schéma par défaut (par défaut : `default`) - Pluralisation `pluralizepages {String}` pour les pages (facultatif, par défaut : `# pages,# page,# pages,# pages`) - Pluralisation `pluralizeitems {String}` pour les éléments (facultatif, par défaut : `# items,# item,# items,# items`) - `height {Number/String}` hauteur de grille, valeurs prises en charge : `auto` (par défaut), __NEW__ `fluid`, `parent` (ou `parent1`, `parent2`) ou `NUMBER` comme hauteur ou `selector` pour jQuery.closest() - `minheight {Number}` hauteur minimale de grille, fonctionne avec les hauteurs `fluid` et `auto` (par défaut : `200`) - Sélecteur `parent {String}` pour option hauteur `auto` (par défaut : `window`) - `margin {Number}` une marge supérieure pour la hauteur (facultatif, par défaut : `0`) - `boolean {String}` a valeurs pour filtrer les valeurs booléennes (facultatif, par défaut : `true|on|yes`) - `resize {Boolean}` permet le redimensionnement des colonnes (facultatif, par défaut : `true`) - `reorder {Boolean}` permet de réorganiser les colonnes (facultatif, par défaut : `true`) - `sorting {Boolean}` permet le tri (facultatif, `true` par défaut) - `remember {Boolean}` mémorise la réorganisation et le redimensionnement des colonnes (facultatif, `true` par défaut) - `checkbox {Boolean}` active les cases à cocher - `colwidth {Number}` une largeur de colonne par défaut en pixels (facultatif, `150` par défaut) - `rowheight {Number}` une hauteur de ligne par défaut en pixels (facultatif, par défaut : `24`) + cela dépend du CSS - `alignheader {String/Number}` aligner pour l'en-tête `right` (ou `2`) ou `center` (ou `1`) (facultatif, par défaut : `left`) - `alignfilter {String/Number}` aligner pour l'entrée de filtre `right` (ou `2`) ou `center` (ou `1`) (facultatif, par défaut : `left`) - `align {String/Number}` aligner pour une valeur de colonne `right` (ou `2`) ou `center` (ou `1`) (facultatif, par défaut : `left`) - `click {String}` un lien vers un chemin ou `function(row, grid, row_el)`, un enregistrement sera attribué/exécuté si l'utilisateur clique sur une ligne - `clickid {String}` un identifiant/nom de propriété pour le redessinage vers l'arrière (pour la surbrillance de la ligne précédente), par défaut : `id` - `highlight {Boolean}` chaque ligne sélectionnée (après `click`) sera mise en surbrillance (par défaut : `false`) - `unhighlight {Boolean}` active `undo highlighting` de la ligne sélectionnée (par défaut : `true`) - `checked {String}` `path` vers une variable ou un chemin vers `function(rows, grid)` est exécuté si l'utilisateur a sélectionné/coché certaines lignes - `autoselect {Boolean}` permet la sélection automatique de la première ligne de la grille, il exécute `EXEC(config.click)`, par défaut : `false` - `limit {Number}` une limite de cluster, par défaut : `80` - `numbering {Boolean}`, `false` par défaut en option - `allowtitles {Boolean}`, active les titres pour toutes les valeurs de ligne, `false` par défaut en option - `button {String}` un lien vers `function(btn_name, row, btn_element, event, name)` est exécuté si l'utilisateur clique sur un __bouton__ dans la ligne - `exec {String}` un lien vers `function(type, filter, sort, page)` pour les opérations côté serveur uniquement (il désactive le tri et le filtrage côté client), types pris en charge : `refresh` ou `page` - `changed {String}` `path` vers une variable ou un chemin vers `function(rows, grid)` est exécuté si l'utilisateur a modifié certaines lignes - `change {String/Boolean}` booléen permet l'édition interne ou la chaîne doit contenir un `path` vers une variable ou le chemin vers `function(meta, next(meta))` est exécuté si l'utilisateur double-clique sur une colonne (`meta` peut être `null` si la grille est actualisée) + `next(null)` remplace à nouveau le contenu précédent - `columns {String}` un chemin vers la définition de `columns {Array}` - `dblclick {String}` un lien vers la méthode `function(row, grid, row_el)`, elle est exécutée si l'utilisateur double-clique sur une ligne - `noborder {Boolean}` peut désactiver une bordure autour de la grille (par défaut : `false`) - `clusterize {Boolean}` peut désactiver le défilement groupé (par défaut : `true`) - `contextmenu {String}` un lien vers `function(e, grid)` lorsque l'utilisateur ouvre le menu contextuel - `autoformat {Boolean}` active les types de formatage automatique tels que `email`, `phone` et `number` (par défaut : `true`) - `controls {Boolean}` active les contrôles définis dans `columns` (par défaut : `true`) - `hfunc {String}` un lien vers la méthode `function(el)`, elle est exécutée si l'utilisateur clique sur l'icône ajoutée à la toute première ligne d'en-tête. utile pour intégrer un autre composant avec DataGrid. par ex. j-filtre - Icône `hfuncicon {String}` hfunc, par ex. maison, rouage, etc. - `pagination {Boolean}` active/désactive la pagination (par défaut : `true`) - `config.exec` sera exécuté si la barre de défilement est à la fin, et vous pouvez utiliser comme réponse brute `array` de lignes - `ovalue {String}` une clé par défaut pour l'obtention de `value` depuis `column.options` (par défaut : `id`) - `otext {String}` une clé par défaut pour l'obtention de `text` depuis `column.options` (par défaut : `name`) __Propriétés de la colonne__ : - `name {String}` un nom de champ dans l'objet ligne - `text {String}` une étiquette de colonne, le texte avec `.ti ti-home` affichera l'icône Total - `title {String}` une info-bulle de colonne (facultatif) - `width {Number}` une largeur de colonne (facultatif, `config.colwidth` par défaut) - `filter {String/Boolean}` un espace réservé pour le filtre ou `boolean` peut désactiver le filtre pour cette colonne (facultatif) - `filtervalue {Object}` en option, une valeur de filtre prédéfinie (par défaut : `undefined`) - `filtertype {Number/String}`, `1` désactive la recherche intelligente (par défaut : `0` - cela signifie que la recherche intelligente est activée) - `align {String}` peut être `center` ou `right` (facultatif, par défaut : `left`) - `template {String}` peut être un modèle Tangular et le modèle est l'objet entier de la ligne - `sorting {Boolean}` permet le tri (facultatif, par défaut : `true`) - `search {Boolean/String}` `true` filtrera une valeur en fonction du résultat `template` ou `String` peut être un modèle Tangular qui sera utilisé comme valeur pour la recherche - `format {String/Number}` peut être utilisé pour le champ de date et de nombres (nombre de décimales) (facultatif), par ex. `dd.MM.yyyy` - `hide {Boolean}` cache une colonne - `listcolumn {Boolean}` par défaut : vrai, faux pour supprimer une colonne de la liste des colonnes - `hidden {String}` comme fonction fléchée `column => true` --> la colonne sera masquée (par exemple pour restreindre l'utilisateur) - `options {Object Array}` facultatif, un filtre personnalisé par exemple `[{ text: 'yes', value: true }, { text: 'no', value: false }]` ou {String}r lien vers la source de données - `otext {String}` en option, une clé pour le champ `text` dans `options`, par défaut `config.otext` - `ovalue {String}` en option, une clé pour le champ `value` dans `options`, par défaut `config.ovalue` - `buttonapply {String}` en option, une étiquette pour le bouton `Apply` en colonnes, par défaut : `Apply` - `class {String}` facultatif, un nom de classe de colonne personnalisé - `empty {String/Boolean}` facultatif, peut réécrire la valeur vide avec la valeur définie dans le champ vide (la valeur `true` utilise `---` comme valeur par défaut) - `min {Number}` __modifiable uniquement__ par min. valeur numérique - `max {Number}` __modifiable uniquement__ un max. valeur numérique - `required {Boolean}` __modifiable uniquement__ - `dirsearch {String/Boolean}` un espace réservé pour la recherche `j-Directory`, booléen avec `false` désactivera la recherche - `type {String}` en option, peut contenir un type de données (`string`, `boolean`, `date`, `number`, `email`, `phone` ou `url`) pour le champ - `editable {Boolean}` permet l'édition - `currency {String}` un nom de devise (doit être défini dans `DEF.currencies`) - `editable {String}` Un chemin vers `function(meta)` modifiable personnalisé, important : `meta.next(new_value)` ou `meta.cancel()` - `colorize {Boolean}` permet une colorisation de la valeur - `monospace {Boolean}` active le type de police monospace - __NOUVEAU__ `raw {Boolean}` active/désactive l'échappement HTML dans les filtres de colonnes (par défaut : `false`) - __NOUVEAU__ `pair {Boolean}` active/désactive l'appariement automatique des valeurs avec la configuration `options` (par défaut : `false`) __Contrôles de ligne (NOUVEAU)__ : - peut être défini comme type de colonne `controls` - doit définir la colonne `template` (Tangular, `row` est un modèle pour Tangular pour chaque ligne) - regarde l'exemple - L'événement du bouton `click` est capturé dans `config.button` __Filtrage__ : - `numbers` : (1) `number` recherche un nombre exact, (2) `number - number` est un intervalle entre les nombres - `strings` : (1) `string` recherche une chaîne exacte, (2) `string1, string2, string3` est un critère de recherche multiple - `dates` : (1) l'année `2017` recherche toutes les dates de cette année, (2) `2017-02-12 - 2017-03-13` <--> `02.12.2017 - 13.03.2017` est un intervalle entre les dates, (3) `12-20 - 12-31` <--> `20.12 - 31.12` un intervalle entre les dates de l'année en cours (4) `2017-01 - 2018-05` <--> `01.2017 - 05.2018` ou (5) `-5 days` <--> `-1 week` <--> `-10 years` __Méthodes__ : - `component.redraw([reselect_again])` peut redessiner les lignes (uniquement pour les modifications, si vous supprimez une ligne, vous devez mettre à jour l'ensemble du modèle) - `component.resetfilter()` peut réinitialiser un filtre - `component.exportrows(page_from or true from the current page, pages_count, callback(rows, internal_options), [reset_to_page or true for the current page])` peut exporter des lignes avec un rendu côté serveur - `component.appendrow(row_object, [scrolldown], [prepend])` ajoute et rend la ligne - `component.redrawrow(row_object, [new_object_row])` redessine la ligne ou __NEW__ : remplace+redessine `row_object` par un nouveau `new_object_row` - `component.clear()` efface toutes les modifications - `component.select(row)` sélectionne `row` doit être le même objet que dans la source de données - `component.editcolumn(row_index, col_index)` exécute `config.change` en interne (uniquement pour une utilisation avancée) - `component.applyfilter(obj)` peut appliquer un filtre personnalisé `{ name: 'Peter', age: '20 - 50' }` - `component.resetcolumns()` réinitialise les colonnes - `component.readfilter()` renvoie un filtre actuel - `component.rebind(schemaname__or__columnsdeclaration)` la méthode relie le schéma - `component.reload()` exécute `config.exec` avec le filtre et le tri actuels - `component.empty()` vide toutes les lignes - `component.redrawcolumns()` redessine les colonnes sans les réinitialiser - __NEW__ : `component.schema(name)` modifie un schéma et actualise les données __Propriétés__ : - `component.meta` renvoie des méta-informations internes sur les filtres, les colonnes et les lignes __Bon à savoir__ : - `NULL('link.to.data')` évalue `config.exec` - Le type `SET('link.to.data', data, 'noscroll')` --> `noscroll` désactive la réinitialisation du défilement __Comment étendre une classe de ligne ?__ - regardez la ligne `{{ if active }}`, elle étend une classe de ligne en ajoutant `dg-active-class` si le `active` sera valide ```javascript [ '{{ if active }} dg-active-class{{ fi }}', { name: 'name', text: 'Name', width: 200 }, // other columns ... ] ``` __Schémas multiples__ : ```html ``` Utilisez-le avec ``. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT. ```html example.html ```