j-Grid

jComponent 20 · jcomponent@20 component Παράδειγμα φορτωμένο με jComponent 20

Χρειάζεται σύστημα bootstrap

Η πηγή δεδομένων πρέπει να περιέχει:

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

ΕΠΙΤΡΟΦΗ:

filter {Boolean} εμφανίζει ένα φίλτρο (επιλεγμένο, προεπιλογή: true)
filterlabel {String} ένα προεπιλεγμένο κάτοχο για όλα τα φίλτρα (επιλεκτικά)
external {Boolean} είναι μια εξωτερική πηγή δεδομένων (δυναμική φόρτιση δεδομένων) (εννοείται, προεπιλογή: false)
pluralizepages {String} πολλαπλασιασμός σελίδων (επιλεκτική, προεπιλεγμένη: # pages,# page,# pages,# pages)
pluralizeitems {String} πολλαπλασιασμός για τα στοιχεία (επιλεκτική, προεπιλεγμένη: # items,# item,# items,# items)
exec {String} μια σύνδεση με το function(type, filter, sort, page), αξιολογείται εάν το δίκτυο εκτελεί ορισμένες λειτουργίες
padding {Συνολικά} ύψος πατίνωση (επιλεγμένη, προεπιλογή: 0)
autosize {Boolean} επιτρέπει πλήρη αυτοδιάσταση (επιλεγμένη, προεπιλογή true)
boolean {String} αξίες για την φίλτρο των τιμών boolean (επιλεκτική, προεπιλεγμένη: true|on|yes)
pagination {Boolean} εμφανίζει πίνακα σελίδων (επιλεγμένο, προεπιλογή: false)
init {Function} μια λειτουργία init για παράδειγμα προσαρμοσμένες στήλες
checked Αν οι γραμμές περιέχουν <input type="checkbox Στη συνέχεια, αυτή η λειτουργία θα αξιολογηθεί όταν ελέγχεται το κουτί ελέγχου

Ιδιότητες στήλης:

name {String} ένα όνομα πεδίου στο αντικείμενο
text {String} μια στήλη ετικέτα
title {String} ένα εργαλείο στήλης (επιλεγμένο)
size Αριθμός στήλης πλάτος: 1 Μικρότερη , 2 Μεσαία , 3 Μεγάλη , 4 Πολύ μεγάλο (επιλεκτικό, προεπιλεγμένο 1)
size {String} ένα πλάτος στήλης σε pixels, η τιμή πρέπει να περιέχει px π.χ. 20px
filter {String/Boolean} ένας κάτοχος για το φίλτρο ή boolean μπορεί να απενεργοποιήσει το φιλτράρισμα για αυτή τη στήλη (επιλεγμένη)
format {String/Number} για τις τιμές μορφοποίησης (string για την ημερομηνία, number για τους αριθμούς)
background {String} ένα χρώμα φόντου (επιλεγμένο)
align {String} μπορεί να είναι center ή right (επιλεγμένο, προεπιλογή: left)
Το template {String} μπορεί να είναι ένα πρότυπο Tangular και το μοντέλο είναι ολόκληρο το αντικείμενο της σειράς
render {String/Function(αξία, στήλη, γραμμή)} μια προσαρμοσμένη αναπαραγωγή, το string αξιολογείται ως λειτουργία πυροβολισμού
header {String/Function(column)} μια προσαρμοσμένη αναπαραγωγή του τίτλου, το string αξιολογείται ως λειτουργία σφαίρας
sort {Boolean} επιτρέπει την ταξινόμηση (επιλεκτική, προεπιλεγμένη: true)
class {String} πρόσθετες τάξεις για τη στήλη, π.χ. hidden-xs
search {Boolean/String} true θα φιλτράρει μια τιμή σύμφωνα με το αποτέλεσμα template ή String μπορεί να είναι ένα πρότυπο Tangular που θα χρησιμοποιηθεί ως τιμή για την αναζήτηση

ΦΙΛΤΡΙΑΣ:

numbers: (1) number αναζητά έναν ακριβή αριθμό, (2) number / number είναι ένα διάστημα μεταξύ των αριθμών
strings: (1) το string αναζητά μια ακριβή γραμμή, (2) το string1, string2, string3 είναι ένα πολλαπλό κριτήριο αναζήτησης
dates: (1) το έτος 2017 αναζητά όλες τις ημερομηνίες του τρέχοντος έτους, (2) 2017-02-12 / 2017-03-13 είναι ένα διάστημα μεταξύ των ημερολογίων, (3) 20.12 / 31.12 ένα διάστημα ανάμεσα σε ημερολόγια του τρέχουσα έτους

Χρησιμοποιήστε το με <ui-component name="grid">Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση DEF.fallback (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, 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>