1. Продукти
  2.   Електронна таблиця
  3.   JavaScript
  4.   SlickGrid
 
  

Безкоштовно JavaScript Spreadsheet компонент для Speedy Rendering & Processing

Відкритий джерело безкоштовно JavaScript Компонент Spreadsheet дозволяє швидко рендерити, керувати рядами, авторизація стовпців, обробка клітин і так далі.

Дуже швидкий повністю відкритий джерело JavaScript сітки / друкований компонент дозволяє розробникам програмного забезпечення, щоб генерувати багаті сітки з користувальницьких контрольних та дисплеїв. Компонент підтримує віртуальний рендеринг, який надає користувачам можливість працювати з сотнями тисяч одиниць без будь-якої краплі продуктивності. Який засіб SlickGrid здатний обробляти сіточку з 100 рядами або 100 тисяч рядків без компромації виконання. Раніше він використовувався для підтримки jQuery I Themes, але від SlickGrid 3.0.0, команда видали всі відповідні коди і замінила його більш сучасним SortableJS.

SlickGrid компонент повністю настроюється і забезпечує дуже швидку швидкість рендерингу. Компонент включив кілька важливих функцій для управління таблицями, таких як рендеринг таблиць, фонове пост-рейдерство для багатих клітин, клавіатурної навігації, резидування стовпців, відображення / в'язання стовпців або рядків, вставляння нових рядків, редагування нових рядків, багатозахисних редакторів з підтримкою undo/redo, додавання форматування та стилів тощо. Він сумісний з базами даних та за допомогою Bootstrap

Previous Next

Почати з SlickGrid

Рекомендований спосіб встановити SlickGrid, використовується num, щоб встановити SlickGrid, просто додайте наступний тег скрипта в браузері.

Встановити SlickGrid за num

npm install slickgrid

Ви можете завантажити скомпільовану спільну бібліотеку зі сховища GitHub і встановити її.

Як захопити клітинки за допомогою JavaScript API?

Мергування клітин всередині таблиці є дуже корисною функцією, яка часто використовується для центру тексту через кілька рядків або стовпців і може бути корисним для об'єднання рядків даних двох або більше клітин. Його основна мета полягає в тому, щоб зробити дані, презентовані та прочитані для кінцевого користувача. Відкритий джерело SlickGrid JavaScript компонент дозволяє розробникам програмного забезпечення об'єднати кілька клітин, рядків або стовпців всередині власних JavaScript додатків.

Розкладні клітини, що з'єднуються через 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;
}

Редагувати стовпи Spreadsheet, Ross & Cells через S

SlickGrid-компонент дозволяє розробникам програмного забезпечення обробляти клітинки електронної таблиці різними способами всередині їх JavaScript додатків. У бібліотеці передбачено кілька важливих функцій для обробки списків, стовпців та рядків, таких як, вставки нових клітин, редагування існуючих клітин, видалення небажаних клітин. Також передбачено підтримку автоматичних sizing стовпчиків, резидингу, рендерингу, відображення та приховування колон і рядків з використанням JavaScript команд.

Додати новий Row & Натисніть, щоб змінити клітинку через 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);

Авто стовпці обшивки через JavaScript API

Відкрите джерело SlickGrid компонент надав дуже корисну функцію для застосування автозберігання всередині JavaScript додатків. Він надає стовпець, що складається з API, що дозволяє сітку здійснювати інтелектуальні підбірки про ширину його стовпців на основі вмісту комірки заголовка та рядків. Будь ласка, пам'ятайте, що дані повинні бути надані для авторизації, і це повинні бути дані, присутні для тестування за розмірами, оскільки це дуже важко для автоматизованого алгоритму для роботи без будь-яких даних.

 Українська