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

Gratis JavaScript-kalkylbladskomponent för snabb rendering och bearbetning

Open Source Gratis JavaScript-kalkylbladskomponent tillåter snabb rendering, hantera rader, automatisk storlek på kolumner, cellhantering och så vidare.

En mycket snabb JavaScript-rutnäts-/kalkylbladskomponent med helt öppen källkod gör det möjligt för mjukvaruutvecklare att skapa rika rutnät med anpassade kontroller och skärmar. Komponenten stöder virtuell rendering som gör det möjligt för användare att arbeta med hundratusentals objekt utan att prestanda försämras. Vilket innebär att SlickGrid kan hantera ett rutnät med 100 rader eller 100 tusen rader utan att kompromissa med prestandan. Tidigare brukade det stödja jQuery UI Themes men från SlickGrid 3.0.0 har teamet tagit bort all relaterade kod och ersatt den med mer modern SortableJS.

SlickGrid-komponenten är helt anpassningsbar och ger extremt snabb renderingshastighet. Komponenten har inkluderat flera viktiga funktioner för att hantera kalkylblad, såsom rendering av kalkylblad, efterrendering i bakgrunden för rikare celler, tangentbordsnavigering, ändra storlek på kolumner, ändra ordning på kolumner, visa/dölja kolumner eller rader, infoga nya rader, redigera nya rader, multi- fältredigerare med stöd för ångra/gör om, lägga till formatering och stilar och så vidare. Den är kompatibel med datacentrerade ramverk och med Bootstrap

Previous Next

Komma igång med SlickGrid

Det rekommenderade sättet att installera SlickGrid är att använda npm. För att installera SlickGrid, lägg bara till följande skripttagg i webbläsaren.

Installera SlickGrid via npm

npm install slickgrid

Du kan ladda ner det kompilerade delade biblioteket från GitHub-förvaret och installera det.

Hur slår man ihop celler med JavaScript API?

Att slå samman celler i ett kalkylblad är en mycket användbar funktion som ofta används för att centrera text över flera rader eller kolumner och kan vara till hjälp för att kombinera datasträngarna i två eller flera celler. Dess huvudsakliga syfte är att göra data presentabel och läsbar för slutanvändaren. SlickGrid JavaScript-komponenten med öppen källkod tillåter programutvecklare att kombinera flera celler, rader eller kolumner i sina egna JavaScript-applikationer.

Kalkylarksceller slås samman 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;
}

Redigera kalkylbladskolumner, rader och celler via JS

SlickGrid-komponenten gör det möjligt för mjukvaruutvecklare att hantera kalkylbladsceller på olika sätt i sina JavaScript-applikationer. Biblioteket har tillhandahållit flera viktiga funktioner för att hantera kalkylbladsceller, kolumner och rader som att infoga nya celler, redigera befintliga celler, ta bort oönskade celler. Det har också gett stöd för automatisk storlek på kolumner, storleksändring, omordning, visning och döljning av kolumner och rader med hjälp av JavaScript-kommandon.

Lägg till ny rad och klicka för att redigera cell 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 kolumnstorlek via JavaScript API

SlickGrid-komponenten med öppen källkod har gett en mycket användbar funktion för att tillämpa automatisk kolumnstorlek i JavaScript-applikationer. Det tillhandahåller ett API för automatisk storlek på kolumner som gör det möjligt för rutnätet att göra intelligenta val om bredden på sina kolumner baserat på cellinnehållet i rubriken och raderna. Kom ihåg att data måste tillhandahållas för automatisk storleksanpassning och att det måste finnas data för att testa storlek eftersom det är mycket svårt för en automatiserad storleksalgoritm att fungera utan data.

 Svenska