1. Tuotteet
  2.   Laskentataulukko
  3.   JavaScript
  4.   SlickGrid
 
  

Ilmainen JavaScript-laskentataulukkokomponentti nopeaan renderöintiin ja käsittelyyn

Avoimen lähdekoodin ilmainen JavaScript-laskentataulukkokomponentti mahdollistaa nopean renderoinnin, rivien hallinnan, sarakkeiden automaattisen koon muuttamisen, solujen käsittelyn ja niin edelleen.

Erittäin nopea täysin avoimen lähdekoodin JavaScript grid/spreadsheet -komponentti antaa ohjelmistokehittäjille mahdollisuuden luoda monipuolisia verkkoja mukautetuilla ohjaimilla ja näytöillä. Komponentti tukee virtuaalista renderöintiä, jonka avulla käyttäjät voivat työskennellä satojen tuhansien kohteiden kanssa ilman, että suorituskyky heikkenee. Tämä tarkoittaa, että SlickGrid pystyy käsittelemään 100 rivin tai 100 000 rivin ruudukkoa suorituskyvystä tinkimättä. Aiemmin se tuki jQuery UI -teemoja, mutta SlickGrid 3.0.0:sta lähtien tiimi on poistanut kaiken siihen liittyvän koodin ja korvannut sen nykyaikaisemmalta SortableJS:ltä.

SlickGrid-komponentti on täysin muokattavissa ja tarjoaa erittäin nopean renderöintinopeuden. Komponentti sisältää useita tärkeitä ominaisuuksia laskentataulukoiden hallintaan, kuten laskentataulukoiden renderöinti, taustalla tapahtuva jälkirenderöinti rikkaampien solujen saamiseksi, näppäimistönavigointi, sarakkeiden koon muuttaminen, sarakkeiden järjestyksen muuttaminen, sarakkeiden tai rivien näyttäminen/piiltäminen, uusien rivien lisääminen, uusien rivien muokkaaminen, useiden kenttäeditorit, joissa on kumoa/uudelleen tekeminen -tuki, muotoilun ja tyylien lisääminen ja niin edelleen. Se on yhteensopiva datakeskeisten kehysten ja Bootstrapin kanssa

Previous Next

SlickGridin käytön aloittaminen

Suositeltu tapa asentaa SlickGrid on npm. Asenna SlickGrid lisäämällä seuraava komentosarjatunniste selaimeen.

Asenna SlickGrid npm:n kautta

npm install slickgrid

Voit ladata käännetyn jaetun kirjaston GitHub-arkistosta ja asentaa sen.

Kuinka yhdistää soluja JavaScript API:lla?

Solujen yhdistäminen laskentataulukon sisällä on erittäin hyödyllinen ominaisuus, jota käytetään usein tekstin keskittämiseen useille riveille tai sarakkeille ja joka voi olla hyödyllinen kahden tai useamman solun tietojonojen yhdistämisessä. Sen päätarkoituksena on tehdä tiedoista esitettävää ja luettavaa loppukäyttäjälle. Avoimen lähdekoodin SlickGrid JavaScript -komponentin avulla ohjelmistokehittäjät voivat yhdistää useita soluja, rivejä tai sarakkeita omissa JavaScript-sovelluksissaan.

Laskentataulukon solujen yhdistäminen JavaScript API:n kautta

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

Muokkaa laskentataulukon sarakkeita, rivejä ja soluja JS:n kautta

SlickGrid-komponentin avulla ohjelmistokehittäjät voivat käsitellä taulukkolaskentasoluja eri tavoin JavaScript-sovellustensa sisällä. Kirjasto on tarjonnut useita tärkeitä ominaisuuksia laskentataulukon solujen, sarakkeiden ja rivien käsittelyyn, kuten uusien solujen lisäämiseen, olemassa olevien solujen muokkaamiseen ja ei-toivottujen solujen poistamiseen. Se on myös tarjonnut tukea sarakkeiden automaattiseen koon muuttamiseen, koon muuttamiseen, uudelleenjärjestykseen, sarakkeiden ja rivien näyttämiseen ja piilottamiseen JavaScript-komentojen avulla.

Lisää uusi rivi ja muokkaa solua napsauttamalla JavaScript-sovellusliittymän kautta

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);

Automaattinen sarakkeen koon määritys JavaScript API:n kautta

Avoimen lähdekoodin SlickGrid-komponentti on tarjonnut erittäin hyödyllisen ominaisuuden automaattisen sarakkeen koon määrittämiseen JavaScript-sovelluksissa. Se tarjoaa sarakkeiden automaattisen koon muuttamisen API:n, jonka avulla ruudukko voi tehdä älykkäitä valintoja sarakkeiden leveydestä otsikon ja rivien solusisällön perusteella. Muista, että tiedot on toimitettava automaattista kokoa varten ja että koon testaamista varten on oltava dataa, koska automaattisen koonmääritysalgoritmin on erittäin vaikea toimia ilman tietoja.

 Suomen