6 JavaScript Grid Plugins

02 Απρ 2011 | JavaScript

Δεν επιτρέπονται τα σχόλια.


03

Οι πίνακες είναι ο καλύτερος τρόπος για να προβάλετε δεδομένα. Πάρτε ως παράδειγμα το Microsoft Excel, στο οποίο μπορούμε να ταξινομήσουμε, επεξεργαστούμε ή ακόμα και να φιλτράρουμε τα δεδομένα μας εύκολα, μόνο με μερικά κλικ.

Σε αυτό το άρθρο θα σας παρουσιάσουμε plug-ins για πλέγματα δεδομένων που μπορείτε να τα χρησιμοποιήσετε στις σελίδες σας. Με τη βοήθεια της JavaScript μεταμορφώνουν κανονικούς πίνακες σε πλέγματα δεδομένων όπως αυτό του Excel, σε συνδυασμό με μια μεγάλη ποικιλία χαρακτηριστικών και δυνατοτήτων.

Ρίξτε λοιπόν μια ματιά στη λίστα με τα 6 καλύτερα plug-ins για data grids τα οποία είναι εξοπλισμένα με πολλά χαρακτηριστικά και θα σας φανούν πραγματικά πολύ χρήσιμα.

FlexiGrid

Ένα ελαφρύ αλλά δυνατό data grid με στήλες που το πλάτος τους προσαρμόζετε στις ανάγκες του τελικού χρήστη και κυλιόμενα δεδομένα, και επιπλέον με τη δυνατότητα να συνδέσετε ένα xml ή json αρχείο με τα δεδομένα που θέλετε να προβάλετε.

Σημαντικά χαρακτηριστικά

  • Προσαρμόσιμο πλάτος και ύψος για γραμμές και στήλες
  • Τα δεδομένα μπορούν να ταξινομηθούν ανά στήλη.
  • Μπορεί να μετατρέψει ένα απλό table σε data grid
  • Δυνατότητα σύνδεσης μέσω AJAX σε πηγές δεδομένων από αρχεία xml ή jsonn
  • Σελιδοποίηση
  • Προβολή/απόκρυψη στηλών
  • Γραμμή εργαλείων
  • Αναζήτηση ανάμεσα στα δεδομένα
  • Προσβάσιμη API

EditableGrid

Το EditableGrid είναι μια βιβλιοθήκη JavaScript ανοικτού κώδικα που ως σκοπό έχει τη μετατροπή απλών html πινάκων σε ένα εξειδικευμένο επεξεργάσιμο στοιχείο. Στοχεύει στην απλότητα, καθώς απαιτεί μόνο μερικές γραμμές κώδικα για να μπορέσετε να μετατρέψετε ένα πίνακα σε ένα ισχυρό data grid.

Σημαντικά χαρακτηριστικά

  • Μπορεί να φορτώσει δεδομένα από αρχεία XML ή από ένα html table
  • Μπορεί να δεχτεί διαφορετικούς τύπους δεδομένων ανά στήλη
  • Επεξεργασία δεδομένων με κατάλληλο επεξεργαστή, ανάλογα με τον τύπο δεδομένων της στήλης
  • Δυνατότητα να δηλώσετε ένα προκαθορισμένο σύνολο τιμών για ένα πεδίο ή για τα πεδία μιας στήλης
  • Ενσωματωμένος έλεγχος εγκυρότητας δεδομένων για κάθε τύπο δεδομένων
  • Εισαγωγή και διαγραφή γραμμών
  • Callbacks για κάθε συμβάν

jQGrid

Το jQGrid είναι ένα εργαλείο JavaScript που υποστηρίζει πλήρως την τεχνολογία AJAX και παρέχει λύσεις στην παρουσίαση και επεξεργασία δεδομένων στο διαδίκτυο. Ενώ το grid ουσιαστικά εκτελείτε στο τερματικό του χρήστη, μπορεί να μεταφέρει δεδομένα μέσω της τεχνολογίας AJAX από το server από κάθε γλώσσα προγραμματισμού που μπορεί να εκτελεστεί στη μεριά του server, συμπεριλαμβανομένων και των PHP, ASP, Java Servlets, JSP, ColdFusion και Perl.

Σημαντικά χαρακτηριστικά

  • Θέματα βασισμένα σε CSS
  • Σελιδοποίηση των δεδομένων
  • Το πλάτος κάθε στήλης μπορεί να προσαρμοστεί ανάλογα με τις απαιτήσεις του χρήστη
  • Ταξινόμηση δεδομένων
  • Υποστηρίζει τύπους δεδομένων
  • Υποστηρίζει πηγές δεδομένων από αρχεία XML, JSON και πίνακες
  • Διαχείριση συμβάντων
  • API για τον χρήστη
  • Πολύγλωσση υποστήριξη

TableSorter

Το TableSorter είναι ένα jQuery plug-in που μπορεί να μετατρέψει ένα πίνακα που έχει τα τμήματα thead και tbody σε ένα πίνακα που μπορεί να ταξινομηθεί χωρίς να ανανεώσει τη σελίδα.

Σημαντικά χαρακτηριστικά

  • Ταξινόμηση δεδομένων από πολλαπλές στήλες
  • Cross Browser υποστήριξη
  • Μικρό μέγεθος κώδικα

DataTables

Το DataTables είναι ένα plug-in για jQuery. Είναι εξερετικά ευέλικτο εργαλείο που βασίζετε στη συνεχή βελτίωση και ανάπτυξη.

Σημαντικά χαρακτηριστικά

  • Μεταβλητό μήκος σελιδοποίησης
  • Άμεσο φιλτράρισμα δεδομένων
  • Ταξινόμηση πολλαπλών στηλών με εντοπισμό του τύπου δεδομένων
  • Έξυπνη διαχείριση του πλάτους των στηλών
  • Προβολή δεδομένων από σχεδόν κάθε πηγή δεδομένων
  • Δυναμική δημιουργία πινάκων
  • Αυτόματο φόρτωμα των δεδομένων με AJAX
  • Κρυφές στήλες

SlickGrid

Αρκετά απλό το SlickGrid, είναι ένα JavaScript στοιχείο για πλέγματα/spreadsheets. Σε γενικές γραμμές είναι πολύ εξειδικευμένο εργαλείο, και ως επέκταση αυτού, είναι λίγο ποιο δύσκολο στην εκμάθηση και την παραμετροποίηση, αλλά αν τελικά καταφέρετε να το προσαρμόσετε στη σελίδα σας τότε θα έχετε ένα πολύ δυνατό πλέγμα στα χέρια σας.

Σημαντικά χαρακτηριστικά

  • Προσαρμοσμένη εικονική κύλιση
  • Εξαιρετικά γρήγορη σχεδίαση του component
  • Υποστηρίζει τα themes από το jQuery UI
  • Δέχεται προσαρμογές / ρυθμίσεις
  • Αλλαγή μεγέθους/θέσης/απόκρυψη/προβολή των στηλών

Περισσότερα για τον CorfuGmr

CorfuGmr

Ονομάζομαι Νίκος και ασχολούμαι με το internet και την κατασκευή ιστοσελίδων από το 1998. Σήμερα, μετά από 12 χρόνια γεμάτα με ενημέρωση, εκπαίδευση και εξάσκηση έχω ανεβάσει σε ένα άλλο επίπεδο τις γνώσεις μου και τις τεχνικές μου. Στα άρθρα μου προσπαθώ να σας δείξω τα μικρά, αλλά σημαντικά πράγματα που με έχουν ανεβάσει σε αυτό το επίπεδο.








Σχόλια



Harrison

2 Μαΐου 2013

Το ερώτημα μου είναι εάν κάποια απο τα παραπάνω υπάρχει έτοιμο για το περιβαλον wordpress?




2 Μαΐου 2013

Κατά ποια έννοια να είναι έτοιμο για WordPress; Ως plugin ? Από όσο γνωρίζω δεν είναι έτοιμο και για να λειτουργήσει κάποιο από τα παραπάνω θα πρέπει από κάπου να έχει μια πηγή δεδομένων, οπότε το WordPress από μόνο του δεν ενδείκνυται. Συνδυαστικά με κάποιο άλλο Plugin ίσως και να είναι διαθέσιμα.


Συγνώμη, τα σχόλια για αυτό το άρθρο είναι κλειστά.



^
Top
css.php