# j-Grid

> Zeigen Sie Tabelldateien mit Filterung, Paging und einer konfigurierbaren Datenquelle.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: de
Content-SHA256: 893559e1d6690dd7782395a4b906b0b57f7e7ae00aee86c6ceb79dfe6269bc4f
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- Benötigtes Gittersystem `bootstrap`

__Datenquelle__ muss Folgendes enthalten:

```javascript
{
    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
}
```

__Konfiguration__:

- `filter` {Boolean} zeigt ein Filter (optional, Standard: `true`)
- `filterlabel` {String} ein Standardplatz für alle Filter (optional)
- `external` {Boolean} ist eine externe Datenquelle (dynamische Datenladung) (optinisch, Standard: `false`)
- `pluralizepages` {String} Pluralisierung für Seiten (optional, Standard: `# pages,# page,# pages,# pages`)
- `pluralizeitems` {String} Pluralisierung für Artikel (optional, Standard: `# items,# item,# items,# items`)
- `exec` {String} eine Verbindung zu `function(type, filter, sort, page)`, wird bewertet, ob das Netz einige Operationen durchführt
- `padding` {Number} Höhe Padding (optional, Standard: `0`)
- `autosize` {Boolean} ermöglicht volle Auto-Size (optional, Standard `true`)
- `boolean` {String} eine Werte für die Filterung von Boolean-Wert (optional, Standard: `true|on|yes`)
- `pagination` {Boolean} zeigt das Page-Panel (optional, Standard: `false`)
- `init` {Funktion} eine Initfunktion für z.B. angepasste Spalten
- `checked` {Funktion} Wenn die Zeilen `<input type="checkbox` enthalten, wird diese Funktion beurteilt, wenn die Checkbox überprüft wird

__Kolonne Eigenschaften__:

- `name` {String} ein Feldnamen im Objekt
- `text` {String} eine Spalte
- `title` {String} eine Spalte-Tooltype (optional)
- `size` {Number} eine Spalte Breite: `1` Kleine `2` Mittleren `3` Große ist, `4` sehr groß (optional, default) `1`)
- `size` {String} eine Spalteweite in Pixeln, Wert muss enthalten `px` e.g. `20px`
- `filter` {String/Boolean} ein Platzhalter für das Filter oder `boolean` kann Filter für diese Spalte deaktivieren (optional)
- `format` {String/Nummer} für Formatwerte (`string` für Datum, `number` für Zahlen)
- `background` {String} eine Hintergrundfarbe (optional)
- `align` {String} kann `center` oder `right` sein (optional, Standard: `left`)
- `template` {String} kann ein Tangular-Template sein und das Modell ist das ganze Objekt der Reihe
- `render` {String/Funktion(Wert, Spalte, Reihenfolge)} eine benutzerdefinierte Renderung, `string` wird als Feature eines Schildes bewertet
- `header` {String/Funktion(Column)} eine benutzerdefinierte Renderung des Heads, `string` wird als Fingerfunktion bewertet
- `sort` {Boolean} ermöglicht Sortierung (optional, Standard: `true`)
- `class` {String} zusätzliche Klassen für die Spalte, z. B. `hidden-xs`
- `search` {Boolean/String} `true` wird ein Wert nach dem `template` Ergebnis filtern oder `String` kann ein Tangular-Template sein, das als Wert für die Suche verwendet wird

__Filterung__:

- `numbers`: (1) `number` sucht eine genaue Zahl, (2) `number / number` ist ein Abschnitt zwischen den Zahlen
- `strings`: (1) `string` sucht eine genaue Zeile, (2) `string1, string2, string3` ist ein mehrerer Suchkriterium
- `dates`: (1) Jahr `2017` sucht alle Daten in diesem Jahr, (2) `2017-02-12 / 2017-03-13` ist ein Abschnitt zwischen Daten, (3) `20.12 / 31.12` ein Ablauf zwischen Daten im aktuellen Jahr

Verwenden Sie es mit `<ui-component name="grid">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

```html 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>
```