Composant de feuille de calcul JavaScript gratuit pour un rendu et un traitement rapides
Le composant Open Source Free JavaScript Spreadsheet permet un rendu rapide, la gestion des lignes, le dimensionnement automatique des colonnes, la gestion des cellules, etc.
Un composant de grille/feuille de calcul JavaScript entièrement open source très rapide permet aux développeurs de logiciels de générer des grilles riches avec des commandes et des affichages personnalisés. Le composant prend en charge le rendu virtuel qui permet aux utilisateurs de travailler avec des centaines de milliers d'éléments sans aucune baisse de performances. Ce qui signifie que SlickGrid est capable de gérer une grille de 100 lignes ou 100 000 lignes sans compromettre les performances. Auparavant, il prenait en charge les thèmes d'interface utilisateur jQuery, mais à partir de SlickGrid 3.0.0, l'équipe a supprimé tout le code associé et l'a remplacé par SortableJS plus moderne.
Le composant SlickGrid est entièrement personnalisable et offre une vitesse de rendu extrêmement rapide. Le composant a inclus plusieurs fonctionnalités importantes pour la gestion des feuilles de calcul, telles que le rendu des feuilles de calcul, le post-rendu en arrière-plan pour des cellules plus riches, la navigation au clavier, le redimensionnement des colonnes, la réorganisation des colonnes, l'affichage/masquage des colonnes ou des lignes, l'insertion de nouvelles lignes, la modification de nouvelles lignes, la multi- éditeurs de champs avec prise en charge d'annulation/rétablissement, ajout de formatage et de styles, etc. Il est compatible avec les frameworks centrés sur les données et avec Bootstrap
Premiers pas avec SlickGrid
La méthode recommandée pour installer SlickGrid consiste à utiliser npm. Pour installer SlickGrid, ajoutez simplement la balise de script suivante dans le navigateur.
Installer SlickGrid via npm
npm install slickgrid Vous pouvez télécharger la bibliothèque partagée compilée à partir du référentiel GitHub et l'installer.
Comment fusionner des cellules à l'aide de l'API JavaScript ?
La fusion de cellules dans une feuille de calcul est une fonctionnalité très utile qui est souvent utilisée pour centrer le texte sur plusieurs lignes ou colonnes et peut être utile pour combiner les chaînes de données de deux cellules ou plus. Son objectif principal est de rendre les données présentables et lisibles pour l'utilisateur final. Le composant Open source SlickGrid JavaScript permet aux développeurs de logiciels de combiner plusieurs cellules, lignes ou colonnes dans leurs propres applications JavaScript.
Fusion de cellules de feuille de calcul via l'API JavaScript
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;
}
Modifier les colonnes, les lignes et les cellules de la feuille de calcul via JS
Le composant SlickGrid permet aux développeurs de logiciels de gérer les cellules de feuille de calcul de différentes manières dans leurs applications JavaScript. La bibliothèque a fourni plusieurs fonctionnalités importantes pour la gestion des cellules, des colonnes et des lignes de la feuille de calcul, telles que l'insertion de nouvelles cellules, la modification de cellules existantes, la suppression de cellules indésirables. Il a également pris en charge le dimensionnement automatique des colonnes, le redimensionnement, la réorganisation, l'affichage et le masquage des colonnes et des lignes à l'aide de commandes JavaScript.
Ajouter une nouvelle ligne et cliquer pour modifier la cellule via l'API JavaScript
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);
Dimensionnement automatique des colonnes via l'API JavaScript
Le composant open source SlickGrid a fourni une fonctionnalité très utile pour appliquer le dimensionnement automatique des colonnes dans les applications JavaScript. Il fournit une API de dimensionnement automatique des colonnes qui permet à la grille d'effectuer des sélections intelligentes sur la largeur de ses colonnes en fonction du contenu des cellules de l'en-tête et des lignes. N'oubliez pas que des données doivent être fournies pour le dimensionnement automatique et qu'il doit y avoir des données présentes pour tester la taille, car il est très difficile pour un algorithme de dimensionnement automatisé de fonctionner sans aucune donnée.
