j-Grid

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

système de grille bootstrap nécessaire

Data-source doit contenir :

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

filter {Boolean} affiche un filtre (facultatif, par défaut : true)
filterlabel {String} un espace réservé par défaut pour tous les filtres (facultatif)
external {Boolean} est une source de données externe (chargement dynamique des données) (optionnel, par défaut : false)
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)
exec {String} un lien vers function(type, filter, sort, page), il est évalué si la grille effectue certaines opérations
Remplissage de hauteur padding {Number} (facultatif, par défaut : 0)
autosize {Boolean} active la taille automatique pleine hauteur (facultatif, true par défaut)
boolean {String} une valeur pour le filtrage des valeurs booléennes (facultatif, par défaut : true|on|yes)
pagination {Boolean} affiche le panneau de pagination (facultatif, par défaut : false)
init {Function} une fonction d'initialisation pour par ex. colonnes personnalisées
checked {Fonction} si les lignes contiennent <input type="checkbox alors cette fonction sera évaluée lorsque la case est cochée

Propriétés de la colonne :

name {String} un nom de champ dans l'objet
text {String} un libellé de colonne
title {String} une info-bulle de colonne (facultatif)
size {Numéro} une largeur de colonne : 1 petit, 2 moyen, 3 grand, 4 très grand (facultatif, 1 par défaut)
size {String} une largeur de colonne en pixels, la valeur doit contenir px, par exemple. 20px
filter {String/Boolean} un espace réservé pour le filtre ou boolean peut désactiver le filtre pour cette colonne (facultatif)
format {String/Number} pour le formatage des valeurs (string pour la date, number pour les nombres)
background {String} une couleur de fond (facultatif)
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
render {String/Function(value, column, row)} un rendu personnalisé, string est évalué comme une fonction flèche
header {String/Function(column)} un rendu personnalisé de l'en-tête, string est évalué comme une fonction flèche
sort {Boolean} permet le tri (facultatif, par défaut : true)
class {String} classes supplémentaires pour la colonne, par ex. hidden-xs
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

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 est un intervalle entre les dates, (3) 20.12 / 31.12 un intervalle entre les dates de l'année en cours

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

<style>
	body{padding:50px;margin:0;background-color:#F0F0F0;font-family:Arial;height:100%;}
	html{height:100%;}
</style>

<ui-component name="grid" path="griddata" config="exec:filtering">
	<script type="text/plain">
		[
			{ name: 'name', text: 'Name', size: 2, render: 'n => n.toUpperCase()', filter: 'Search in name' },
			{ name: 'price', text: 'Price', size: 1, format: 2, filter: 'Search in prices', align: 'right' },
			{ name: 'description', text: 'Description', size: 3, filter: 'Search in description' },
			{ name: 'created', text: 'Created', size: 1, filter: 'Search in dates', format: 'dd.MM.yyyy', align: 'center' }
		]
	</script>
</ui-component>

<script>
	var griddata = { page: 1, count: 18, pages: 3, limit: 6, items: [] };
	var items = griddata.items;

	items.push({ name: '1 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 233, created: new Date().add('-5 days') });
	items.push({ name: '2 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 122, created: new Date().add('-1 year') });
	items.push({ name: '3 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 119, created: new Date().add('-1 month') });
	items.push({ name: '4 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 35.34, created: new Date().add('-14 days') });
	items.push({ name: '5 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 439.33, created: new Date().add('-5 hours') });
	items.push({ name: '6 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 111.12, created: new Date().add('-349 minutes') });

	// Auto-resize
	$(window).on('resize', function() {
		setTimeout2('resize', function() {
			EMIT('resize');
		}, 100);
	});

	function filtering(type, filter, sort, page) {
		console.log(type, filter, sort, page);
	}

</script>