1. Produk
  2.   Hamparan
  3.   JavaScript
  4.   SlickGrid
 
  

Komponen Hamparan JavaScript Percuma untuk Penyampaian & Pemprosesan Cepat

Komponen Hamparan JavaScript Percuma Sumber Terbuka membolehkan pemaparan pantas, mengurus baris, autosaiz lajur, pengendalian sel dan sebagainya.

Komponen grid/hamparan JavaScript sumber terbuka sepenuhnya yang sangat pantas membolehkan pembangun perisian menjana grid kaya dengan kawalan dan paparan tersuai. Komponen ini menyokong pemaparan maya yang memberi kuasa kepada pengguna untuk bekerja dengan ratusan ribu item tanpa sebarang penurunan dalam prestasi. Ini bermakna SlickGrid mampu mengendalikan grid dengan 100 baris atau 100 ribu baris tanpa menjejaskan prestasi. Sebelum ini ia pernah menyokong Tema UI jQuery tetapi daripada SlickGrid 3.0.0, pasukan itu telah mengalih keluar semua kod berkaitan dan menggantikannya dengan SortableJS yang lebih moden.

Komponen SlickGrid boleh disesuaikan sepenuhnya dan memberikan kelajuan pemaparan yang sangat pantas. Komponen tersebut telah memasukkan beberapa ciri penting untuk mengurus hamparan, seperti memaparkan hamparan, pemaparan selepas latar belakang untuk sel yang lebih kaya, navigasi papan kekunci, saiz semula lajur, menyusun semula lajur, menunjukkan/menyembunyikan lajur atau baris, memasukkan baris baharu, mengedit baris baharu, berbilang- editor medan dengan sokongan buat asal/buat semula, menambah pemformatan dan gaya dan sebagainya. Ia serasi dengan rangka kerja berpusat data dan dengan Bootstrap

Previous Next

Bermula dengan SlickGrid

Cara yang disyorkan untuk memasang SlickGrid, adalah menggunakan npm, Untuk memasang SlickGrid, cuma tambah teg skrip berikut dalam penyemak imbas.

Pasang SlickGrid melalui npm

npm install slickgrid

Anda boleh memuat turun perpustakaan kongsi yang disusun daripada repositori GitHub dan memasangnya.

Bagaimana untuk Menggabungkan Sel menggunakan API JavaScript?

Menggabungkan sel dalam hamparan ialah ciri yang sangat berguna yang sering digunakan untuk memusatkan teks merentas beberapa baris atau lajur dan boleh membantu untuk menggabungkan rentetan data dua atau lebih sel. Tujuan utamanya adalah untuk menjadikan data itu boleh dilihat dan dibaca untuk pengguna akhir. Komponen JavaScript SlickGrid sumber terbuka membenarkan pembangun perisian untuk menggabungkan berbilang sel, baris atau lajur di dalam aplikasi JavaScript mereka sendiri.

Sel Hamparan Bercantum melalui API JavaScript

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

Edit Lajur Hamparan, Baris & Sel melalui JS

Komponen SlickGrid membolehkan pembangun perisian mengendalikan sel hamparan dalam pelbagai cara di dalam aplikasi JavaScript mereka. Perpustakaan telah menyediakan beberapa ciri penting untuk mengendalikan sel hamparan, lajur dan baris seperti, memasukkan sel baharu, mengedit sel sedia ada, memadam sel yang tidak diingini. Ia juga telah menyediakan sokongan untuk lajur saiz automatik, mengubah saiz, menyusun semula, memaparkan dan menyembunyikan lajur dan baris menggunakan arahan JavaScript.

Tambah Baris Baharu & Klik untuk Mengedit Sel melalui API JavaScript

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

Saiz Lajur Auto melalui API JavaScript

Komponen SlickGrid sumber terbuka telah menyediakan ciri yang sangat berguna untuk menggunakan saiz lajur auto dalam aplikasi JavaScript. Ia menyediakan API autosaiz lajur yang membolehkan grid membuat pilihan pintar tentang lebar lajurnya berdasarkan kandungan sel pengepala dan baris. Sila ingat bahawa data mesti disediakan untuk autosaiz dan data mesti ada untuk menguji saiz kerana sangat sukar untuk algoritma saiz automatik berfungsi tanpa sebarang data.

 Melayu