j-DataTable

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

BETA : ce composant est destiné au listing SPA et côté serveur.

prend en charge la pagination
système de grille bootstrap nécessaire
prend en charge le tri
prend en charge le défilement vertical/horizontal
réactif
prend en charge le mode sombre

Data-source doit contenir :

{
	cols: [{ name: 'id', ... }], // optional, can be defined inline in HTML
    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
}

Configuration :

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 la grille, valeurs prises en charge : auto (par défaut), NEW fluid, parent ou NUMBER comme hauteur ou selector pour jQuery.closest()
NOUVEAU minheight {Number} hauteur minimale de grille, fonctionne avec les hauteurs fluid et auto (par défaut : 300)
NOUVEAU 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)
click {String} un lien vers function(row, grid, row_el), il est exécuté si l'utilisateur clique sur une ligne
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
exec {String} un lien vers function(type, page, sort) 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
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)
colwidth {Number} une largeur par défaut pour les colonnes (par défaut : 150)
editable {String} un lien vers function(opt) lorsque l'utilisateur effectue une édition
contextmenu {String} un lien vers function(e, grid) lorsque l'utilisateur ouvre le menu contextuel

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 .fa fa-home affichera l'icône FontAwesome
width {Number} une largeur de colonne (facultatif, config.colwidth par défaut)
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
sort {Boolean} permet le tri (facultatif, par défaut : false)
format {String/Number} peut être utilisé pour le champ de date et de nombres (nombre de décimales) (facultatif), par ex. dd.MM.yyyy
currency {String} un formateur de devises, ajoutez simplement une devise
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)
type {String} facultatif, peut contenir un type de données (boolean, date ou number) pour le champ
editable {Boolean} permet l'édition

Méthodes :

component.redrawrow(row_object/index) 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 qui doit être le même objet que dans la source de données
component.rebind(columnsdeclaration) la méthode relie le schéma
NEW : component.reload() exécute config.exec avec le filtre et le tri actuels
NEW : component.empty() vide toutes les lignes

Bon à savoir :

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 ...
]

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

<div style="width:500px;height:400px">
	<ui-component name="datatable" path="data" config="highlight:1;exec:paginate;editable:editable;checked:checked;margin:22">
		<script type="text/html">
			[
				{ name: 'name', text: 'Opportunity name', width: 200, sort: 1, editable: 1 },
				{ name: 'value', text: 'Value', width: 100, sort: 1, type: 'number', format: 2 },
				{ name: 'status', text: 'Status', width: 100, editable: 1 },
				{ name: 'owner', text: 'Owner', width: 200 },
				{ name: 'newsletter', text: 'Newsletter', width: 100, type: 'boolean' },
				{ name: 'date', text: 'Date', width: 200, sort: 1, type: 'date', format: 'yyyy-MM-dd' }
			]
		</script>
	</ui-component>
</div>

<script>

	function checked(rows) {
		console.log(rows);
	}

	function editable(opt) {
		// opt.row
		// opt.col
		// opt.value
		// opt.next(NEW_VALUE);
		opt.next(opt.value + ' (modified)');
	}

	function paginate(type, page, sort) {
		console.log('Page:', page, 'sort:', sort);
	}

		var data = {};

		data.items = [];
		data.pages = 53;
		data.page = 3;

		// data.cols.push({ name: 'name', text: 'Opportunity name', width: 200, sort: true });
		// data.cols.push({ name: 'value', text: 'Value', width: 100, sort: true });
		// data.cols.push({ name: 'status', text: 'Status', width: 100 });
		// data.cols.push({ name: 'owner', text: 'Owner', width: 200 });
		// data.cols.push({ name: 'date', text: 'Date', width: 200, sort: true });

		for (var i = 0; i < 50; i++)
			data.items.push({ name: GUID(20), value: Math.random() * 1000 >> 0, status: GUID(10), owner: 'Peter Širka', newsletter: i % 3 === 0, date: NOW });
</script>