Handsontable.js简介

handsontable.js是什么？

handsontable.js是一个JavaScript数据表格组件，可以用于构建类似Excel的Web应用程序。它基本上是一个JavaScript库。关于handsontable.js的一个好处是您可以在原生JavaScript、React、Vue或Angular中使用它。

安装：

您有两种选择可以使用handsontable.js。您可以通过npm安装，也可以使用CDN。要安装handsontable，请在您的节点终端上运行以下命令：

npm install handsontable

如果您使用yarn而不是node，则必须运行以下命令：

yarn add handsontable

安装完后，您需要在HTML文件中包含以下代码：

<script src=”node_modules/handsontable/dist/handsontable.full.min.js”></script><br/><link href=”node_modules/handsontable/dist/handsontable.full.min.css” rel=”stylesheet” media=”screen”>

作为替代方案，您可以使用CDN。在这种情况下，请在HTML文件中嵌入以下代码。不需要安装：

<script src=”https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.js”></script><br/><link href=”https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.css” rel=”stylesheet” media=”screen”>

如何使用handsontable.js？

构建基本电子表格非常简单。按照以下步骤构建基本数据网格 –

首先在HTML文件中创建一个空的div元素。这将是电子表格的容器。

<!DOCTYPE html> 
<html lang="en"> 
   <head> 
      <meta charset="UTF-8"> 
      <meta name="viewport" content= 
         "width=device-width, initial-scale=1.0"> 
      <title>Introduction to Handsontable.js</title> 
      <script src="https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.js"> 
      </script> 
      <link href="https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.css" 
         rel="stylesheet" media="screen">  
   </head> 
   <body> 
      <h1> 
         <center>Create your first data-grid</center> 
      </h1> 
      <!-- container to wrap the data-grid --> 
      <div class="handsontable-container"></div> 
      <script src="index.js"></script> 
   </body> 
</html>

现在在index.js文件中（或者您可以在html文件中使用脚本标签），创建一个二维数组，作为数据表格上的初始数据。二维数组的每一行表示手动表格的每一行。例如，如果将以下数组用作handsontable对象的数据源，则生成的电子表格将包含13行和5列。请注意，您还可以使用对象作为数据源，而不是二维数组。

const data = [
    ['roll','name','stream','semester','email id'],
    [1,'Raj','IT',8,'Xyz@email.com'],
    [2,'Timir','CSE',4,'Xyz@email.com'],
    [4,'Arjesh','IT',2,'Xyz@email.com'],
    [5,'Haris ali','IT',6,'Xyz@email.com'],
    [6,'Deepak','CSE',4,'Xyz@email.com'],
    [7,'Dibyendu','ECE',4,'Xyz@email.com'],
    [8,'Aman','IT',4,'Xyz@email.com'],
    [9,'Binayak','CSE',6,'Xyz@email.com'],
    [10,'Harshad','ECE',6,'Xyz@email.com'],
    [11,'Abhra','IT',4,'Xyz@email.com'],
    [12,'Sayan','IT',4,'Xyz@email.com'],
]

获取div元素

let container = document.querySelector(‘.handsontable-container’);

创建一个handsontable对象。这里Handontable构造函数创建一个电子表格。它将一个DOM元素作为第一个参数，该元素将包含handsontable数据表格。第二个参数是一个包含数据表格属性的对象。例如，在下面的代码中，定义了一个handsontable对象，它有两个参数-容器元素和包含数据网格的对象。

 const data = [ 
    ['roll','name','stream','semester','email id'], 
    [1,'Raj','IT',8,'Xyz@email.com'], 
    [2,'Timir','CSE',4,'Xyz@email.com'], 
    [4,'Arjesh','IT',2,'Xyz@email.com'], 
    [5,'Haris ali','IT',6,'Xyz@email.com'], 
    [6,'Deepak','CSE',4,'Xyz@email.com'], 
    [7,'Dibyendu','ECE',4,'Xyz@email.com'], 
    [8,'Aman','IT',4,'Xyz@email.com'], 
    [9,'Binayak','CSE',6,'Xyz@email.com'], 
    [10,'Harshad','ECE',6,'Xyz@email.com'], 
    [11,'Abhra','IT',4,'Xyz@email.com'], 
    [12,'Sayan','IT',4,'Xyz@email.com'], 
] 
  
let container = document.querySelector('.handsontable-container'); 
  
let hot = new Handsontable(container,{ 
    data: data       // 初始化handsontable对象  
} 
)

输出:

Handsontable.js简介

let hot = new Handsontable(container, { 
    data: data, 
  
    // Added additional features 
    // For adding headers on each row 
    rowHeaders: true, 
  
    // For adding headers on each column 
    colHeaders: true,  
  
    // For adding dropdown menu to each headers 
    dropdownMenu: true, 
} 
)

输出：

Handsontable.js简介

如果你想给表头以自定义的名称而不是 A、B、C、D…，你可以通过给 colHeaders 属性传递一个数组而不是 true -来实现

let hot = new Handsontable(container,{
    data: data,

    rowHeaders: true, 

    // For giving custom names to headers
    colHeaders: ['roll', 'name', 'stream', 'semester', 'email'],
    dropdownMenu: true,

    // To add filter feature in table
    filters: true,
}
)

然后省略数据数组的第一个元素 –

const data = [
    [1,'Raj','IT',8,'Xyz@email.com'],

    // The first array element deleted
    [2,'Timir','CSE',4,'Xyz@email.com'],
    [4,'Arjesh','IT',2,'Xyz@email.com'],
    [5,'Haris ali','IT',6,'Xyz@email.com'],
    [6,'Deepak','CSE',4,'Xyz@email.com'],
    [7,'Dibyendu','ECE',4,'Xyz@email.com'],
    [8,'Aman','IT',4,'Xyz@email.com'],
    [9,'Binayak','CSE',6,'Xyz@email.com'],
    [10,'Harshad','ECE',6,'Xyz@email.com'],
    [11,'Abhra','IT',4,'Xyz@email.com'],
    [12,'Sayan','IT',4,'Xyz@email.com'],
]

输出：

Handsontable.js简介