1. Товары
  2.   Электронная таблица
  3.   JavaScript
  4.   SlickGrid
 
  

Бесплатный компонент электронных таблиц JavaScript для быстрого рендеринга и обработки

Бесплатный компонент электронных таблиц JavaScript с открытым исходным кодом обеспечивает быструю визуализацию, управление строками, автоматическое изменение размера столбцов, обработку ячеек и т. д.

Очень быстрый компонент сетки/электронной таблицы JavaScript с полностью открытым исходным кодом позволяет разработчикам программного обеспечения создавать богатые сетки с настраиваемыми элементами управления и дисплеями. Компонент поддерживает виртуальный рендеринг, который позволяет пользователям работать с сотнями тысяч элементов без снижения производительности. Это означает, что SlickGrid может обрабатывать сетку со 100 строками или 100 тысячами строк без ущерба для производительности. Раньше он поддерживал темы пользовательского интерфейса jQuery, но из SlickGrid 3.0.0 команда удалила весь связанный код и заменила его более современным SortableJS.

Компонент SlickGrid полностью настраиваемый и обеспечивает чрезвычайно высокую скорость рендеринга. Компонент включает в себя несколько важных функций для управления электронными таблицами, таких как рендеринг электронных таблиц, фоновый пост-рендеринг для более богатых ячеек, навигация с помощью клавиатуры, изменение размера столбцов, изменение порядка столбцов, отображение/скрытие столбцов или строк, вставка новых строк, редактирование новых строк, мульти- редакторы полей с поддержкой отмены/возврата, добавлением форматирования и стилей и т. д. Он совместим с фреймворками, ориентированными на данные, и с Bootstrap.

Previous Next

Начало работы со SlickGrid

Рекомендуемый способ установки SlickGrid — использование npm. Чтобы установить SlickGrid, просто добавьте следующий тег сценария в браузере.

Установите SlickGrid через npm

npm install slickgrid

Вы можете загрузить скомпилированную общую библиотеку из репозитория GitHub и установить ее.

Как объединить ячейки с помощью JavaScript API?

Объединение ячеек внутри электронной таблицы — очень полезная функция, которая часто используется для центрирования текста в нескольких строках или столбцах и может быть полезна для объединения строк данных двух или более ячеек. Его основная цель — сделать данные презентабельными и читабельными для конечного пользователя. Компонент JavaScript SlickGrid с открытым исходным кодом позволяет разработчикам программного обеспечения объединять несколько ячеек, строк или столбцов в своих собственных приложениях 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;
}

Редактировать столбцы, строки и ячейки электронной таблицы через JS

Компонент SlickGrid позволяет разработчикам программного обеспечения различными способами обрабатывать ячейки электронных таблиц в своих приложениях JavaScript. Библиотека предоставила несколько важных функций для обработки ячеек, столбцов и строк электронной таблицы, таких как вставка новых ячеек, редактирование существующих ячеек, удаление ненужных ячеек. Он также обеспечил поддержку автоматического изменения размера столбцов, изменения размера, переупорядочения, отображения и скрытия столбцов и строк с помощью команд JavaScript.

Добавить новую строку и нажать, чтобы изменить ячейку через 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 автоматического изменения размера столбцов, который позволяет сетке делать интеллектуальный выбор ширины своих столбцов на основе содержимого ячейки заголовка и строк. Помните, что для автоматического определения размера должны быть предоставлены данные, а также данные для проверки размера, потому что алгоритму автоматического определения размера очень сложно работать без каких-либо данных.

 Русский