1. 产品
  2.   电子表格
  3.   JavaScript
  4.   SlickGrid
 
  

用于快速渲染和处理的免费 JavaScript 电子表格组件

开源免费 JavaScript 电子表格组件允许快速呈现、管理行、列自动调整大小、单元格处理等。

一个非常快速的完全开源的 JavaScript 网格/电子表格组件使软件开发人员能够生成具有自定义控件和显示的丰富网格。该组件支持虚拟渲染，使用户能够在不降低性能的情况下处理数十万个项目。这意味着 SlickGrid 能够在不影响性能的情况下处理具有 100 行或 10 万行的网格。以前它用于支持 jQuery UI 主题，但从 SlickGrid 3.0.0 开始，该团队删除了所有相关代码并用更现代的 SortableJS 取而代之。

SlickGrid 组件是完全可定制的，并提供极快的渲染速度。该组件包括几个用于管理电子表格的重要功能，例如呈现电子表格、为更丰富的单元格进行后台后呈现、键盘导航、调整列大小、重新排序列、显示/隐藏列或行、插入新行、编辑新行、多-具有撤消/重做支持、添加格式和样式等的字段编辑器。它与以数据为中心的框架和 Bootstrap 兼容

Previous Next

从SlickGrid岁开始

安装SlickGrid的推荐方法是使用数字、安装SlickGrid、只要在浏览器中添加下列脚本标记。

通过数字安装SlickGrid

npm install slickgrid

您可以从 GitHub 存储库下载 已编译的共享库并安装。

如何使用 JavaScript API 合并单元格？

电子表格内部的混合细胞是一个非常有用的特性、通常用来将文本中心跨越几行或列、并有助于将两个或多个细胞组合起来。 其主要目的是为最终用户提供数据和可读数据。 开放源码SlickGridJavaScript组件允许软件开发者将自己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增加新的Row和单击到编辑单元

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

通过JavaScript4的自动栏目

开源SlickGrid组件为在JavaScript个应用程序中应用自动栏尺寸提供了一个非常有用的特性。 它提供一个列授权API、该列允许网格根据标头和行的单元内容对其列的宽度进行智能选择。 请记住、必须为授权提供数据、并且必须有数据来测试大小、因为自动化算法很难在没有任何数据的情况下工作。

 中国人