Δωρεάν στοιχείο υπολογιστικού φύλλου JavaScript για γρήγορη απόδοση και επεξεργασία
Το στοιχείο Υπολογιστικού φύλλου δωρεάν JavaScript ανοιχτού κώδικα επιτρέπει γρήγορη απόδοση, διαχείριση σειρών, αυτόματο μέγεθος στηλών, χειρισμό κελιών και ούτω καθεξής.
Ένα πολύ γρήγορο, πλήρως ανοιχτού κώδικα στοιχείο πλέγματος/υπολογιστικού φύλλου JavaScript επιτρέπει στους προγραμματιστές λογισμικού να δημιουργούν πλούσια πλέγματα με προσαρμοσμένα στοιχεία ελέγχου και οθόνες. Το στοιχείο υποστηρίζει εικονική απόδοση που δίνει τη δυνατότητα στους χρήστες να εργάζονται με εκατοντάδες χιλιάδες αντικείμενα χωρίς καμία πτώση στην απόδοση. Που σημαίνει ότι το SlickGrid μπορεί να χειριστεί ένα πλέγμα με 100 σειρές ή 100 χιλιάδες σειρές χωρίς να διακυβεύεται η απόδοση. Παλαιότερα υποστήριζε θέματα διεπαφής χρήστη jQuery, αλλά από το SlickGrid 3.0.0, η ομάδα αφαίρεσε όλο τον σχετικό κώδικα και τον αντικατέστησε με πιο σύγχρονο SortableJS.
Το στοιχείο SlickGrid είναι πλήρως προσαρμόσιμο και παρέχει εξαιρετικά γρήγορη ταχύτητα απόδοσης. Το στοιχείο έχει συμπεριλάβει πολλές σημαντικές λειτουργίες για τη διαχείριση υπολογιστικών φύλλων, όπως απόδοση υπολογιστικών φύλλων, μετά την απόδοση φόντου για πιο πλούσια κελιά, πλοήγηση με πληκτρολόγιο, αλλαγή μεγέθους στηλών, αναδιάταξη στηλών, εμφάνιση/απόκρυψη στηλών ή σειρών, εισαγωγή νέων σειρών, επεξεργασία νέων σειρών, πολλαπλές επεξεργαστές πεδίων με υποστήριξη αναίρεσης/εκ νέου, προσθήκη μορφοποίησης και στυλ και ούτω καθεξής. Είναι συμβατό με data-centered frames και με Bootstrap
Ξεκινώντας με το SlickGrid
Ο προτεινόμενος τρόπος εγκατάστασης του SlickGrid, είναι η χρήση npm. Για να εγκαταστήσετε το SlickGrid, απλώς προσθέστε την παρακάτω ετικέτα σεναρίου στο πρόγραμμα περιήγησης.
Εγκαταστήστε το SlickGrid μέσω npm
npm install slickgrid
Μπορείτε να κατεβάσετε τη μεταγλωττισμένη κοινόχρηστη βιβλιοθήκη από το αποθετήριο GitHub και να την εγκαταστήσετε.
Πώς να συγχωνεύσετε κελιά χρησιμοποιώντας το JavaScript API;
Η συγχώνευση κελιών μέσα σε ένα υπολογιστικό φύλλο είναι μια πολύ χρήσιμη δυνατότητα που χρησιμοποιείται συχνά για να κεντράρει το κείμενο σε πολλές σειρές ή στήλες και μπορεί να είναι χρήσιμη για τον συνδυασμό των συμβολοσειρών δεδομένων δύο ή περισσότερων κελιών. Ο κύριος σκοπός του είναι να κάνει τα δεδομένα εμφανήσιμα και αναγνώσιμα για τον τελικό χρήστη. Το στοιχείο Open Source SlickGrid JavaScript επιτρέπει στους προγραμματιστές λογισμικού να συνδυάζουν πολλαπλά κελιά, σειρές ή στήλες μέσα στις δικές τους εφαρμογές JavaScript.
Συγχώνευση κελιών υπολογιστικού φύλλου μέσω JavaScript API
function VerCellMergedFormatter(row, cell, value, columnDef, dataContext) {
var options = window._renderOptions;
if (options.lastRendering != 1) {
return;
}
var items = window.getRenderDataItmes();
var fieldName = columnDef.field;
var rowsLength = items.length;
var currentItem = items[row];
var nextRowIndex = row + 1;
if (nextRowIndex < rowsLength){
var nextValue = items[nextRowIndex][fieldName];
if (value == nextValue) {
if (!options.changedCells[row]) {
options.changedCells[row] = {};
}
options.changedCells[row][fieldName] = "noneline-bottom";
options.isNextMerged = 1;
return value;
}
else {
if (options.isNextMerged == 1) {
options.isNextMerged = 0;
return;
}
}
}
return value;
}
Επεξεργασία στηλών, σειρών και κελιών υπολογιστικού φύλλου μέσω JS
Το στοιχείο SlickGrid επιτρέπει στους προγραμματιστές λογισμικού να χειρίζονται κελιά υπολογιστικών φύλλων με διάφορους τρόπους μέσα στις εφαρμογές JavaScript τους. Η βιβλιοθήκη έχει παράσχει πολλές σημαντικές δυνατότητες για το χειρισμό κελιών υπολογιστικών φύλλων, στηλών και σειρών, όπως η εισαγωγή νέων κελιών, η επεξεργασία υπαρχόντων κελιών, η διαγραφή ανεπιθύμητων κελιών. Παρέχει επίσης υποστήριξη για αυτόματη ρύθμιση μεγέθους στηλών, αλλαγή μεγέθους, αναδιάταξη, εμφάνιση και απόκρυψη στηλών και γραμμών χρησιμοποιώντας εντολές JavaScript.
Προσθέστε νέα σειρά και κάντε κλικ για επεξεργασία κελιού μέσω JavaScript API
var d = $scope.$grid.grid.getData();
$scope.$grid.grid.invalidateRow(d.length);
//Adds the new row as the first row.
d.unshift(item);
$scope.$grid.grid.updateRowCount();
$scope.$grid.grid.setData(d);
$scope.selectedRows = [];
$scope.selectedRows = [0];
//Sets the first row and first column as editable by clicking on it
$scope.$grid.grid.setActiveCell($scope.selectedRows,0);
//$scope.$grid.grid.gotoCell(0,0,true);
var grid = $scope.$grid.grid;
var row = $scope.selectedRows[0];
var col = 0;
grid.setActiveCell(row, col);
grid.editActiveCell(Slick.Acsiom.Editors.Text);
Αυτόματη ρύθμιση μεγέθους στήλης μέσω JavaScript API
Το στοιχείο ανοιχτού κώδικα SlickGrid έχει παράσχει μια πολύ χρήσιμη δυνατότητα για την εφαρμογή του αυτόματου μεγέθους στηλών εντός εφαρμογών JavaScript. Παρέχει ένα API αυτόματου μεγέθους στήλης που επιτρέπει στο πλέγμα να κάνει έξυπνες επιλογές σχετικά με το πλάτος των στηλών του με βάση το περιεχόμενο κελιών της κεφαλίδας και των γραμμών. Λάβετε υπόψη ότι πρέπει να παρέχονται δεδομένα για αυτόματη ρύθμιση μεγέθους και ότι πρέπει να υπάρχουν δεδομένα για έλεγχο μεγέθους, επειδή είναι πολύ δύσκολο για έναν αυτοματοποιημένο αλγόριθμο ταξινόμησης μεγέθους να λειτουργεί χωρίς δεδομένα.