1. Producten
  2.   Spreadsheet
  3.   JavaScript
  4.   SlickGrid
 
  

Gratis JavaScript-spreadsheetcomponent voor snelle weergave en verwerking

Open Source Gratis JavaScript Spreadsheet-component maakt snelle weergave mogelijk, beheert rijen, automatische grootte van kolommen, behandeling van cellen enzovoort.

Een zeer snelle, volledig open source JavaScript-raster-/spreadsheetcomponent stelt softwareontwikkelaars in staat rijke rasters te genereren met aangepaste bedieningselementen en weergaven. De component ondersteunt virtuele weergave, waardoor gebruikers met honderdduizenden items kunnen werken zonder prestatieverlies. Wat betekent dat SlickGrid een raster met 100 rijen of 100 duizend rijen aankan zonder dat dit ten koste gaat van de prestaties. Voorheen ondersteunde het jQuery UI-thema's, maar vanaf SlickGrid 3.0.0 heeft het team alle gerelateerde code verwijderd en vervangen door modernere SortableJS.

De SlickGrid-component is volledig aanpasbaar en biedt een extreem hoge weergavesnelheid. De component bevat verschillende belangrijke functies voor het beheren van spreadsheets, zoals het renderen van spreadsheets, narendering op de achtergrond voor rijkere cellen, toetsenbordnavigatie, het formaat van kolommen wijzigen, kolommen opnieuw ordenen, kolommen of rijen tonen/verbergen, nieuwe rijen invoegen, nieuwe rijen bewerken, multi- veldeditors met ondersteuning voor ongedaan maken/opnieuw, opmaak en stijlen toevoegen, enzovoort. Het is compatibel met data-centered frameworks en met Bootstrap

Previous Next

Aan de slag met SlickGrid

De aanbevolen manier om SlickGrid te installeren, is door npm te gebruiken. Om SlickGrid te installeren, voegt u gewoon de volgende scripttag toe aan de browser.

Installeer SlickGrid via npm

npm install slickgrid

Je kunt de gecompileerde gedeelde bibliotheek downloaden uit de GitHub-repository en installeren.

Hoe cellen samenvoegen met JavaScript API?

Het samenvoegen van cellen in een spreadsheet is een erg handige functie die vaak wordt gebruikt om tekst over meerdere rijen of kolommen te centreren en die nuttig kan zijn om de gegevensstrings van twee of meer cellen te combineren. Het belangrijkste doel is om de gegevens toonbaar en leesbaar te maken voor de eindgebruiker. Met de open source SlickGrid JavaScript-component kunnen softwareontwikkelaars meerdere cellen, rijen of kolommen combineren in hun eigen JavaScript-applicaties.

Spreadsheetcellen samenvoegen via 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;
}

Bewerk spreadsheetkolommen, rijen en cellen via JS

Met de SlickGrid-component kunnen softwareontwikkelaars op verschillende manieren omgaan met spreadsheetcellen in hun JavaScript-toepassingen. De bibliotheek heeft verschillende belangrijke functies geboden voor het verwerken van spreadsheetcellen, kolommen en rijen, zoals het invoegen van nieuwe cellen, het bewerken van bestaande cellen en het verwijderen van ongewenste cellen. Het heeft ook ondersteuning geboden voor het automatisch aanpassen van de grootte van kolommen, het wijzigen van de grootte, het opnieuw ordenen, weergeven en verbergen van kolommen en rijen met behulp van JavaScript-opdrachten.

Nieuwe rij toevoegen en klikken om cel te bewerken via 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);

Automatische kolomgrootte via JavaScript API

De open source SlickGrid-component heeft een zeer nuttige functie geboden voor het toepassen van automatische kolomgrootte in JavaScript-toepassingen. Het biedt een API voor het automatisch aanpassen van kolommen waarmee het raster intelligente selecties kan maken over de breedte van de kolommen op basis van de celinhoud van de koptekst en rijen. Houd er rekening mee dat er gegevens moeten worden verstrekt voor automatische groottebepaling en dat er gegevens aanwezig moeten zijn om de grootte te testen, omdat het erg moeilijk is voor een automatisch formaatalgoritme om te werken zonder enige gegevens.

 Dutch