1. Produkti
  2.   Izklājlapa
  3.   JavaScript
  4.   SlickGrid
 
  

Bezmaksas JavaScript izklājlapas komponents ātrai renderēšanai un apstrādei

Atvērtā koda bezmaksas JavaScript izklājlapas komponents ļauj ātri renderēt, pārvaldīt rindas, kolonnu automātisko izmēru noteikšanu, šūnu apstrādi un tā tālāk.

Ļoti ātrs pilnībā atvērtā pirmkoda JavaScript režģa/izklājlapas komponents ļauj programmatūras izstrādātājiem ģenerēt bagātīgus režģus ar pielāgotām vadīklām un displejiem. Komponents atbalsta virtuālo renderēšanu, kas ļauj lietotājiem strādāt ar simtiem tūkstošu vienumu bez veiktspējas samazināšanās. Tas nozīmē, ka SlickGrid spēj apstrādāt režģi ar 100 rindām vai 100 tūkstošiem rindu, neapdraudot veiktspēju. Iepriekš tas atbalstīja jQuery UI motīvus, taču no SlickGrid 3.0.0 komanda ir noņēmusi visu saistīto kodu un aizstājusi to ar modernāku SortableJS.

SlickGrid komponents ir pilnībā pielāgojams un nodrošina ārkārtīgi ātru renderēšanas ātrumu. Komponentā ir iekļautas vairākas svarīgas izklājlapu pārvaldības funkcijas, piemēram, izklājlapu renderēšana, fonā pēcrenderēšana bagātākām šūnām, tastatūras navigācija, kolonnu lieluma maiņa, kolonnu pārkārtošana, kolonnu vai rindu parādīšana/slēpšana, jaunu rindu ievietošana, jaunu rindu rediģēšana, vairākas lauka redaktori ar atsaukšanas/atkārtošanas atbalstu, formatējuma un stilu pievienošanu un tā tālāk. Tas ir saderīgs ar uz datiem centrētiem ietvariem un ar Bootstrap

Previous Next

Darba sākšana ar SlickGrid

Ieteicamais SlickGrid instalēšanas veids ir npm izmantošana. Lai instalētu SlickGrid, vienkārši pievienojiet pārlūkprogrammā šādu skripta tagu.

Instalējiet SlickGrid, izmantojot npm

npm install slickgrid

Varat lejupielādēt apkopoto koplietoto bibliotēku no GitHub krātuves un to instalēt.

Kā sapludināt šūnas, izmantojot JavaScript API?

Šūnu sapludināšana izklājlapā ir ļoti noderīga funkcija, ko bieži izmanto, lai centrētu tekstu vairākās rindās vai kolonnās, un tā var būt noderīga, lai apvienotu divu vai vairāku šūnu datu virknes. Tās galvenais mērķis ir padarīt datus prezentējamus un lasāmus galalietotājam. Atvērtā koda SlickGrid JavaScript komponents ļauj programmatūras izstrādātājiem apvienot vairākas šūnas, rindas vai kolonnas savās JavaScript lietojumprogrammās.

Izklājlapas šūnu sapludināšana, izmantojot 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;
}

Rediģējiet izklājlapas kolonnas, rindas un šūnas, izmantojot JS

SlickGrid komponents ļauj programmatūras izstrādātājiem dažādos veidos apstrādāt izklājlapu šūnas savās JavaScript lietojumprogrammās. Bibliotēka ir nodrošinājusi vairākas svarīgas funkcijas izklājlapas šūnu, kolonnu un rindu apstrādei, piemēram, jaunu šūnu ievietošanai, esošo šūnu rediģēšanai, nevēlamo šūnu dzēšanai. Tas ir arī nodrošinājis atbalstu kolonnu un rindu automātiskai izmēru maiņai, izmēru maiņai, pārkārtošanai, parādīšanai un slēpšanai, izmantojot JavaScript komandas.

Pievienojiet jaunu rindu un noklikšķiniet, lai rediģētu šūnu, izmantojot 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);

Automātiska kolonnu lieluma noteikšana, izmantojot JavaScript API

Atvērtā koda SlickGrid komponents ir nodrošinājis ļoti noderīgu līdzekli, lai JavaScript lietojumprogrammās lietotu automātisku kolonnu izmēru noteikšanu. Tas nodrošina kolonnu automātiskās izmēra noteikšanas API, kas ļauj režģim veikt saprātīgas atlases kolonnu platumā, pamatojoties uz galvenes un rindu šūnu saturu. Lūdzu, ņemiet vērā, ka dati ir jāiesniedz automātiskai izmēra noteikšanai un ir jābūt datiem, lai pārbaudītu izmēru, jo automātiskajam izmēru noteikšanas algoritmam ir ļoti grūti darboties bez jebkādiem datiem.

 Latviski