1. Produktai
  2.   Skaičiuoklė
  3.   JavaScript
  4.   SlickGrid
 
  

Nemokamas „JavaScript“ skaičiuoklės komponentas, skirtas greitam atvaizdavimui ir apdorojimui

Atvirojo kodo nemokama JavaScript skaičiuoklės komponentas leidžia greitai pateikti, valdyti eilutes, automatinį stulpelių dydį, tvarkyti langelius ir pan.

Labai greitas visiškai atvirojo kodo „JavaScript“ tinklelio / skaičiuoklės komponentas leidžia programinės įrangos kūrėjams generuoti turtingus tinklelius su pasirinktiniais valdikliais ir ekranais. Komponentas palaiko virtualų atvaizdavimą, kuris suteikia vartotojams galimybę dirbti su šimtais tūkstančių elementų nesumažinant našumo. Tai reiškia, kad „SlickGrid“ gali apdoroti 100 arba 100 tūkstančių eilučių tinklelį nepakenkiant našumui. Anksčiau ji palaikė „jQuery“ vartotojo sąsajos temas, tačiau iš „SlickGrid 3.0.0“ komanda pašalino visą susijusį kodą ir pakeitė jį modernesniu „SortableJS“.

„SlickGrid“ komponentas yra visiškai pritaikomas ir užtikrina itin greitą atvaizdavimo greitį. Į komponentą įtrauktos kelios svarbios skaičiuoklių valdymo funkcijos, pvz., skaičiuoklių atvaizdavimas, foninis atvaizdavimas turtingesniems langeliams, klaviatūros naršymas, stulpelių dydžio keitimas, stulpelių išdėstymo keitimas, stulpelių ar eilučių rodymas / slėpimas, naujų eilučių įterpimas, naujų eilučių redagavimas, kelių lauko redaktoriai su anuliavimo / perdarymo palaikymu, formatavimo ir stilių pridėjimu ir pan. Jis suderinamas su duomenų centru ir Bootstrap

Previous Next

Darbo su SlickGrid pradžia

Rekomenduojamas „SlickGrid“ diegimo būdas yra npm naudojimas. Norėdami įdiegti „SlickGrid“, naršyklėje tiesiog pridėkite šią scenarijaus žymą.

Įdiekite „SlickGrid“ per npm

npm install slickgrid

Galite atsisiųsti sudarytą bendrinamą biblioteką iš „GitHub“ saugyklos ir ją įdiegti.

Kaip sujungti ląsteles naudojant JavaScript API?

Ląstelių sujungimas skaičiuoklėje yra labai naudinga funkcija, kuri dažnai naudojama tekstui centruoti keliose eilutėse ar stulpelyje ir gali būti naudinga derinant dviejų ar daugiau langelių duomenų eilutes. Jo pagrindinis tikslas – padaryti duomenis pateikiamus ir įskaitomus galutiniam vartotojui. Atvirojo kodo „SlickGrid JavaScript“ komponentas leidžia programinės įrangos kūrėjams sujungti keletą langelių, eilučių ar stulpelių savo „JavaScript“ programose.

Skaičiuoklės langelių sujungimas naudojant 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;
}

Redaguokite skaičiuoklės stulpelius, eilutes ir langelius naudodami JS

„SlickGrid“ komponentas leidžia programinės įrangos kūrėjams įvairiais būdais tvarkyti skaičiuoklės langelius „JavaScript“ programose. Bibliotekoje yra keletas svarbių skaičiuoklės langelių, stulpelių ir eilučių tvarkymo funkcijų, pvz., naujų langelių įterpimas, esamų langelių redagavimas, nepageidaujamų langelių pašalinimas. Ji taip pat palaiko automatinį stulpelių dydžio nustatymą, dydžio keitimą, išdėstymą, stulpelių ir eilučių rodymą ir slėpimą naudojant „JavaScript“ komandas.

Pridėkite naują eilutę ir spustelėkite, jei norite redaguoti langelį naudodami „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);

Automatinis stulpelio dydžio nustatymas naudojant JavaScript API

Atvirojo kodo „SlickGrid“ komponentas suteikė labai naudingą funkciją, skirtą automatiniam stulpelių dydžio nustatymui „JavaScript“ programose. Tai suteikia automatinio stulpelių dydžio API, leidžiančią tinkleliui protingai pasirinkti stulpelių plotį, atsižvelgiant į antraštės ir eilučių langelio turinį. Atminkite, kad duomenys turi būti pateikti norint nustatyti automatinį dydį ir kad turi būti duomenų, kad būtų galima patikrinti dydį, nes automatinio dydžio nustatymo algoritmui labai sunku veikti be jokių duomenų.

 Lietuvių