j-DataGrid

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

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 :

{
	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 :

[{ 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

[
	'{{ if active }} dg-active-class{{ fi }}',
	{ name: 'name', text: 'Name', width: 200 },
	// other columns ...
]

Schémas multiples :

<ui-component name="datagrid" path="obj">

	<script type="text/plain" data-id="SCHEMA_A">
		[
			{ name: 'name', text: 'Name', width: 200 },
			// ...
		]
	</script>

	<script type="text/plain" data-id="SCHEMA_B">
		[
			{ name: 'price', text: 'Price', width: 100 },
			// ...
		]
	</script>

</ui-component>

<script>
	// Usage
	var obj = {};
	obj.schema = 'SCHEMA_A';
	obj.items = [];

	// Changing of schema
	setTimeout(function() {
		obj.schema = 'SCHEMA_B';
		obj.items = [];
		UPD('obj');
	}, 5000);
</script>

Utilisez-le avec <ui-component name="datagrid">. 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.

example.html

<ui-component name="LAZY directory"></ui-component>
<ui-component name="datagrid" path="items" config="margin:22;button:clicked">
	<script type="text/plain">
		[
			{ name: 'name', text: 'Name', width: 200 },
			{ name: 'price', text: 'Price', align: 1, alignfilter: 1 },
			{ name: 'published', text: 'Public', align: 1, options: [{ name: 'yes', id: true }, { name: 'no', id: false }], type: 'boolean' },
			{ name: 'description', text: 'Description', filter: 'Search in description' },
			{ name: 'created', text: 'Created', template: '{{ created | format(\'dd.MM.yyyy\') }}', align: 2, alignfilter: 2, alignheader: 2 },
			{ type: 'controls', template: '<button name="show"><i class="ti ti-search"></i><span>Show</span></button><button name="edit"><i class="ti ti-pencil"></i></button><button name="remove"><i class="ti ti-trash red"></i></button>' }
		]
	</script>
</ui-component>

<script>

	var items = [];
	for (var i = 1; i < 90; i++)
		items.push({ name: '{0} Lorem ipsum dolor'.format(i), published: i % 5 !== 0, description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: i + 100, created: new Date().add('-5 days') });

	function clicked(btnname, row, button, e) {
		console.log(btnname, row);
	}

</script>