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

Gratis JavaScript-regnearkkomponent for rask gjengivelse og behandling

Open Source Gratis JavaScript-regnearkkomponent tillater rask gjengivelse, administrering av rader, automatisk størrelse på kolonner, cellehåndtering og så videre.

En veldig rask JavaScript-rutenett-/regnearkkomponent med åpen kildekode gjør det mulig for programvareutviklere å generere rike rutenett med tilpassede kontroller og skjermer. Komponenten støtter virtuell gjengivelse som gir brukerne mulighet til å jobbe med hundretusenvis av gjenstander uten noe fall i ytelse. Noe som betyr at SlickGrid er i stand til å håndtere et rutenett med 100 rader eller 100 tusen rader uten at det går på bekostning av ytelsen. Tidligere støttet den jQuery UI Themes, men fra SlickGrid 3.0.0 har teamet fjernet all relatert kode og erstattet den med mer moderne SortableJS.

SlickGrid-komponenten er fullt tilpassbar og gir ekstremt rask gjengivelseshastighet. Komponenten har inkludert flere viktige funksjoner for å administrere regneark, for eksempel gjengivelse av regneark, bakgrunnsgjengivelse for rikere celler, tastaturnavigering, endre størrelse på kolonner, endre rekkefølge på kolonner, vise/skjule kolonner eller rader, sette inn nye rader, redigere nye rader, multi- feltredigerere med støtte for angre/redo, legge til formatering og stiler og så videre. Den er kompatibel med datasentrerte rammeverk og med Bootstrap

Previous Next

Komme i gang med SlickGrid

Den anbefalte måten å installere SlickGrid på er å bruke npm. For å installere SlickGrid, legg bare til følgende skripttag i nettleseren.

Installer SlickGrid via npm

npm install slickgrid

Du kan laste ned det kompilerte delte biblioteket fra GitHub-depotet og installere det.

Hvordan slå sammen celler ved hjelp av JavaScript API?

Å slå sammen celler inne i et regneark er en veldig nyttig funksjon som ofte brukes til å sentrere tekst på tvers av flere rader eller kolonner og kan være nyttig for å kombinere datastrengene til to eller flere celler. Hovedformålet er å gjøre dataene presentable og lesbare for sluttbrukeren. SlickGrid JavaScript-komponenten med åpen kildekode lar programvareutviklere kombinere flere celler, rader eller kolonner i sine egne JavaScript-applikasjoner.

Regnearkceller slår sammen 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 regnearkkolonner, rader og celler via JS

SlickGrid-komponenten gjør det mulig for programvareutviklere å håndtere regnearkceller på forskjellige måter i JavaScript-applikasjonene deres. Biblioteket har gitt flere viktige funksjoner for håndtering av regnearkceller, kolonner og rader som å sette inn nye celler, redigere eksisterende celler, slette uønskede celler. Det har også gitt støtte for automatisk størrelse på kolonner, endre størrelse, omorganisere, vise og skjule kolonner og rader ved hjelp av JavaScript-kommandoer.

Legg til ny rad og klikk for å 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

SlickGrid-komponenten med åpen kildekode har gitt en veldig nyttig funksjon for å bruke automatisk kolonnestørrelse i JavaScript-applikasjoner. Den gir et API for automatisk størrelse av kolonner som gjør at rutenettet kan gjøre intelligente valg om bredden på kolonnene basert på celleinnholdet i overskriften og radene. Husk at data må oppgis for automatisk størrelse og at det må være data tilstede for å teste for størrelse fordi det er veldig vanskelig for en automatisert størrelsesalgoritme å fungere uten data.

 Norsk