1. Termékek
  2.   Táblázat
  3.   JavaScript
  4.   SlickGrid
 
  

Ingyenes JavaScript-táblázat-komponens a gyors megjelenítéshez és feldolgozáshoz

A nyílt forráskódú ingyenes JavaScript-táblázat-összetevő lehetővé teszi a gyors renderelést, a sorok kezelését, az oszlopok automatikus méretezését, a cellák kezelését és így tovább.

Egy nagyon gyors, teljesen nyílt forráskódú JavaScript rács/táblázat komponens lehetővé teszi a szoftverfejlesztők számára, hogy gazdag rácsokat hozzanak létre egyéni vezérlőkkel és kijelzőkkel. Az összetevő támogatja a virtuális renderelést, amely lehetővé teszi a felhasználók számára, hogy több százezer elemmel dolgozzanak anélkül, hogy a teljesítmény csökkenne. Ez azt jelenti, hogy a SlickGrid képes kezelni egy 100 soros vagy 100 ezer soros rácsot anélkül, hogy a teljesítményt veszélyeztetné. Korábban támogatta a jQuery UI témákat, de a SlickGrid 3.0.0-tól kezdve a csapat eltávolította az összes kapcsolódó kódot, és modernebb SortableJS-re cserélte.

A SlickGrid komponens teljes mértékben testreszabható, és rendkívül gyors renderelési sebességet biztosít. Az összetevő számos fontos funkciót tartalmaz a táblázatkezeléshez, mint például a táblázatok megjelenítése, a háttérben történő utólagos megjelenítés a gazdagabb cellákhoz, a billentyűzet navigációja, az oszlopok átméretezése, az oszlopok átrendezése, az oszlopok vagy sorok megjelenítése/elrejtése, új sorok beszúrása, új sorok szerkesztése, több mezőszerkesztők visszavonás/újrakészítés támogatással, formázás és stílusok hozzáadásával és így tovább. Kompatibilis az adatközpontú keretrendszerekkel és a Bootstrappel

Previous Next

A SlickGrid használatának megkezdése

A SlickGrid telepítésének javasolt módja az npm használata. A SlickGrid telepítéséhez csak adja hozzá a következő szkriptcímkét a böngészőben.

Telepítse a SlickGridet az npm-en keresztül

npm install slickgrid

letöltheti az összeállított megosztott könyvtárat a GitHub-tárhelyről, és telepítheti.

Hogyan lehet cellákat egyesíteni JavaScript API-val?

A cellák egyesítése egy táblázatban egy nagyon hasznos funkció, amelyet gyakran használnak a szöveg több sorban vagy oszlopban való középre helyezésére, és hasznos lehet két vagy több cella adatkarakterláncainak kombinálásakor. Fő célja, hogy az adatokat megjeleníthetővé és olvashatóvá tegye a végfelhasználó számára. A nyílt forráskódú SlickGrid JavaScript összetevő lehetővé teszi a szoftverfejlesztők számára, hogy több cellát, sort vagy oszlopot kombináljanak saját JavaScript-alkalmazásaikon belül.

Táblázat cellák egyesítése JavaScript API-n keresztül

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

Szerkessze a táblázat oszlopait, sorait és celláit JS-en keresztül

A SlickGrid összetevő lehetővé teszi a szoftverfejlesztők számára, hogy JavaScript-alkalmazásaikon belül többféleképpen kezeljék a táblázatcellákat. A könyvtár számos fontos funkciót kínál a táblázat celláinak, oszlopainak és sorainak kezelésére, például új cellák beszúrására, meglévő cellák szerkesztésére, nem kívánt cellák törlésére. Ezenkívül támogatja az oszlopok automatikus méretezését, az oszlopok és sorok átméretezését, átrendezését, megjelenítését és elrejtését JavaScript-parancsok segítségével.

Új sor hozzáadása és kattintás a cella szerkesztéséhez JavaScript API-n keresztül

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

Automatikus oszlopméretezés JavaScript API-n keresztül

A nyílt forráskódú SlickGrid komponens nagyon hasznos funkciót kínál az automatikus oszlopméretezés alkalmazásához JavaScript alkalmazásokon belül. Ez egy oszlop automatikus méretezési API-t biztosít, amely lehetővé teszi a rács számára, hogy intelligens kijelöléseket végezzen oszlopai szélességével kapcsolatban a fejléc és a sorok cellatartalma alapján. Ne feledje, hogy adatokat kell megadni az automatikus méretezéshez, és a méret teszteléséhez adatoknak kell rendelkezésre állniuk, mert nagyon nehéz az automatizált méretezési algoritmusnak adat nélkül dolgozni.

 Magyar