1. produkty
  2.   Tabulka
  3.   JavaScript
  4.   SlickGrid
 
  

Bezplatná komponenta tabulky JavaScript pro rychlé vykreslování a zpracování

Komponenta Open Source Free JavaScript Spreadsheet umožňuje rychlé vykreslování, správu řádků, automatickou velikost sloupců, manipulaci s buňkami a tak dále.

Velmi rychlá plně open source JavaScriptová mřížka/tabulková komponenta umožňuje vývojářům softwaru generovat bohaté mřížky s vlastními ovládacími prvky a displeji. Komponenta podporuje virtuální vykreslování, které uživatelům umožňuje pracovat se stovkami tisíc položek bez jakéhokoli poklesu výkonu. Což znamená, že SlickGrid je schopen zpracovat mřížku se 100 řádky nebo 100 tisíci řádky, aniž by došlo ke snížení výkonu. Dříve to podporovalo motivy uživatelského rozhraní jQuery, ale ze SlickGrid 3.0.0 tým odstranil veškerý související kód a nahradil jej modernějším SortableJS.

Komponenta SlickGrid je plně přizpůsobitelná a poskytuje extrémně vysokou rychlost vykreslování. Komponenta obsahuje několik důležitých funkcí pro správu tabulek, jako je vykreslování tabulek, následné vykreslování na pozadí pro bohatší buňky, navigace pomocí klávesnice, změna velikosti sloupců, změna pořadí sloupců, zobrazení/skrytí sloupců nebo řádků, vkládání nových řádků, úpravy nových řádků, vícenásobné editory polí s podporou undo/redo, přidáním formátování a stylů a tak dále. Je kompatibilní s frameworky zaměřenými na data a s Bootstrap

Previous Next

Začínáme s SlickGrid

Doporučený způsob instalace SlickGrid je pomocí npm. Chcete-li nainstalovat SlickGrid, přidejte do prohlížeče následující značku skriptu.

Nainstalujte SlickGrid přes npm

npm install slickgrid

Zkompilovanou sdílenou knihovnu si můžete stáhnout z úložiště GitHub a nainstalovat ji.

Jak sloučit buňky pomocí JavaScript API?

Slučování buněk uvnitř tabulky je velmi užitečná funkce, která se často používá k vycentrování textu přes několik řádků nebo sloupců a může být užitečná při kombinaci datových řetězců dvou nebo více buněk. Jeho hlavním účelem je, aby data byla pro koncového uživatele prezentovatelná a čitelná. Open source komponenta JavaScript SlickGrid umožňuje vývojářům softwaru kombinovat více buněk, řádků nebo sloupců uvnitř jejich vlastních aplikací JavaScript.

Sloučení buněk tabulky přes 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;
}

Upravte sloupce, řádky a buňky tabulky pomocí JS

Komponenta SlickGrid umožňuje vývojářům softwaru zpracovávat buňky tabulkového procesoru různými způsoby v rámci jejich aplikací JavaScript. Knihovna poskytuje několik důležitých funkcí pro práci s buňkami, sloupci a řádky tabulky, jako je vkládání nových buněk, úpravy existujících buněk nebo odstraňování nežádoucích buněk. Poskytuje také podporu pro automatickou velikost sloupců, změnu velikosti, změnu pořadí, zobrazení a skrytí sloupců a řádků pomocí příkazů JavaScript.

Přidejte nový řádek a kliknutím upravte buňku 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);

Automatická velikost sloupců přes JavaScript API

Komponenta SlickGrid s otevřeným zdrojovým kódem poskytla velmi užitečnou funkci pro aplikaci velikosti automatického sloupce v aplikacích JavaScript. Poskytuje rozhraní API pro automatickou velikost sloupců, které umožňuje mřížce provádět inteligentní výběr šířky jejích sloupců na základě obsahu buňky v záhlaví a řádcích. Pamatujte, že pro automatické určování velikosti musí být poskytnuta data a že musí být přítomna data pro testování velikosti, protože pro algoritmus pro automatickou změnu velikosti je velmi obtížné pracovat bez jakýchkoli dat.

 Čeština