1. Produkter
  2.   Regneark
  3.   JavaScript
  4.   SlickGrid
 
  

Gratis JavaScript-regnearkskomponent til hurtig gengivelse og behandling

Open Source Gratis JavaScript-regneark-komponent tillader hurtig gengivelse, håndtering af rækker, automatisk størrelse af kolonner, håndtering af celler og så videre.

En meget hurtig fuldt open source JavaScript-gitter-/regneark-komponent gør det muligt for softwareudviklere at generere rige gitter med brugerdefinerede kontroller og skærme. Komponenten understøtter virtuel gengivelse, som giver brugerne mulighed for at arbejde med hundredtusindvis af genstande uden fald i ydeevnen. Hvilket betyder, at SlickGrid er i stand til at håndtere et gitter med 100 rækker eller 100 tusinde rækker uden at gå på kompromis med ydeevnen. Tidligere understøttede det jQuery UI Themes, men fra SlickGrid 3.0.0 har teamet fjernet al den relaterede kode og erstattet den med mere moderne SortableJS.

SlickGrid-komponenten kan tilpasses fuldt ud og giver ekstremt hurtig gengivelseshastighed. Komponenten har inkluderet flere vigtige funktioner til styring af regneark, såsom gengivelse af regneark, baggrundsgengivelse for rigere celler, tastaturnavigation, ændring af kolonnestørrelse, omarrangering af kolonner, visning/skjulning af kolonner eller rækker, indsættelse af nye rækker, redigering af nye rækker, multi- felteditorer med understøttelse af fortryd/gentag, tilføjelse af formatering og typografier og så videre. Den er kompatibel med datacentrerede rammer og med Bootstrap

Previous Next

Kom godt i gang med SlickGrid

Den anbefalede måde at installere SlickGrid på er at bruge npm. For at installere SlickGrid skal du blot tilføje følgende script-tag i browseren.

Installer SlickGrid via npm

npm install slickgrid

Du kan downloade det kompilerede delte bibliotek fra GitHub-lageret og installere det.

Hvordan flettes celler ved hjælp af JavaScript API?

At flette celler inde i et regneark er en meget nyttig funktion, som ofte bruges til at centrere tekst på tværs af flere rækker eller kolonner og kan være nyttig til at kombinere datastrengene i to eller flere celler. Dens hovedformål er at gøre dataene præsentable og læsbare for slutbrugeren. Open source SlickGrid JavaScript-komponenten giver softwareudviklere mulighed for at kombinere flere celler, rækker eller kolonner i deres egne JavaScript-applikationer.

Regnearksceller flettes 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;
}

Rediger regnearkskolonner, rækker og celler via JS

SlickGrid-komponenten gør det muligt for softwareudviklere at håndtere regnearksceller på forskellige måder i deres JavaScript-applikationer. Biblioteket har leveret flere vigtige funktioner til håndtering af regnearksceller, kolonner og rækker, såsom indsættelse af nye celler, redigering af eksisterende celler, sletning af uønskede celler. Det har også givet understøttelse af automatisk størrelse af kolonner, ændring af størrelse, omarrangering, visning og skjulning af kolonner og rækker ved hjælp af JavaScript-kommandoer.

Tilføj ny række og klik for at redigere celle 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);

Automatisk kolonnestørrelse via JavaScript API

Open source SlickGrid-komponenten har givet en meget nyttig funktion til at anvende automatisk kolonnestørrelse i JavaScript-applikationer. Det giver en API til automatisk størrelse af kolonner, der gør det muligt for gitteret at foretage intelligente valg om bredden af dets kolonner baseret på celleindholdet i overskriften og rækkerne. Husk, at der skal angives data for automatisk størrelse, og at der skal være data til stede for at teste for størrelse, fordi det er meget svært for en automatiseret størrelsesalgoritme at fungere uden nogen data.

 Dansk