1. Produkty
  2.   Arkusz
  3.   JavaScript
  4.   SlickGrid
 
  

Bezpłatny komponent arkusza kalkulacyjnego JavaScript do szybkiego renderowania i przetwarzania

Komponent Open Source Free JavaScript Spreadsheet umożliwia szybkie renderowanie, zarządzanie wierszami, automatyczne dopasowywanie kolumn, obsługę komórek i tak dalej.

Bardzo szybki, w pełni open source komponent siatki/arkusza kalkulacyjnego JavaScript umożliwia programistom generowanie bogatych siatek z niestandardowymi kontrolkami i wyświetlaczami. Komponent obsługuje wirtualne renderowanie, które umożliwia użytkownikom pracę z setkami tysięcy elementów bez spadku wydajności. Co oznacza, że SlickGrid jest w stanie obsłużyć siatkę ze 100 lub 100 tysiącami rzędów bez uszczerbku dla wydajności. Wcześniej obsługiwał motywy interfejsu użytkownika jQuery, ale od SlickGrid 3.0.0 zespół usunął cały powiązany kod i zastąpił go bardziej nowoczesnym SortableJS.

Komponent SlickGrid jest w pełni konfigurowalny i zapewnia niezwykle dużą szybkość renderowania. Komponent zawiera kilka ważnych funkcji do zarządzania arkuszami kalkulacyjnymi, takich jak renderowanie arkuszy kalkulacyjnych, post-renderowanie w tle dla bogatszych komórek, nawigacja za pomocą klawiatury, zmiana rozmiaru kolumn, zmiana kolejności kolumn, pokazywanie/ukrywanie kolumn lub wierszy, wstawianie nowych wierszy, edycja nowych wierszy, multi- edytory pól z obsługą cofania/ponawiania, dodawaniem formatowania i stylów itd. Jest kompatybilny z frameworkami skoncentrowanymi na danych i Bootstrap

Previous Next

Pierwsze kroki ze SlickGridem

Zalecanym sposobem instalacji SlickGrid jest użycie npm. Aby zainstalować SlickGrid, po prostu dodaj następujący znacznik skryptu w przeglądarce.

Zainstaluj SlickGrid przez npm

npm install slickgrid

Możesz pobrać skompilowaną bibliotekę współdzieloną z repozytorium GitHub i zainstalować ją.

Jak scalić komórki za pomocą JavaScript API?

Scalanie komórek w arkuszu kalkulacyjnym to bardzo przydatna funkcja, która często służy do wyśrodkowywania tekstu w kilku wierszach lub kolumnach i może być pomocna w łączeniu ciągów danych z dwóch lub więcej komórek. Jego głównym celem jest sprawienie, aby dane były reprezentatywne i czytelne dla użytkownika końcowego. Komponent open source SlickGrid JavaScript umożliwia programistom łączenie wielu komórek, wierszy lub kolumn we własnych aplikacjach JavaScript.

Łączenie komórek arkusza kalkulacyjnego za pomocą 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;
}

Edytuj kolumny, wiersze i komórki arkusza kalkulacyjnego za pomocą JS

Komponent SlickGrid umożliwia programistom obsługę komórek arkusza kalkulacyjnego na różne sposoby w ich aplikacjach JavaScript. Biblioteka udostępnia kilka ważnych funkcji do obsługi komórek, kolumn i wierszy arkusza kalkulacyjnego, takich jak wstawianie nowych komórek, edytowanie istniejących komórek, usuwanie niechcianych komórek. Zapewnia również obsługę automatycznego dopasowywania kolumn, zmiany rozmiaru, zmiany kolejności, wyświetlania i ukrywania kolumn i wierszy za pomocą poleceń JavaScript.

Dodaj nowy wiersz i kliknij, aby edytować komórkę za pomocą 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);

Automatyczne ustalanie rozmiaru kolumn za pomocą JavaScript API

Komponent open source SlickGrid zapewnia bardzo przydatną funkcję do stosowania automatycznego rozmiaru kolumn w aplikacjach JavaScript. Zapewnia interfejs API automatycznego dopasowywania rozmiarów kolumn, który umożliwia siatce dokonywanie inteligentnych wyborów dotyczących szerokości jej kolumn na podstawie zawartości komórek w nagłówku i wierszach. Pamiętaj, że dane muszą być dostarczone do automatycznego ustalania rozmiaru i że muszą istnieć dane do testowania rozmiaru, ponieważ zautomatyzowany algorytm ustalania rozmiaru jest bardzo trudny do działania bez żadnych danych.

 Polski