原文： http://zetcode.com/javascript/handsontable/

Handsontable 教程展示了如何使用 Handsontable 模块在 JavaScript 中创建数据网格。

可调

Handsontable 是一个 JavaScript 库，用于在 JavaScript 中创建数据网格。 它创造了类似电子表格的体验。

在本教程中，我们将使用 Handsontable 和 Gulp4。我们正在使用 Handsontable 组件的社区版本。

安装 Handsontable

首先，我们安装 Handsontable

  1. $ node -v
  2. v11.5.0

我们使用 Node 版本 11.5.0。

  1. $ npm init -y

我们启动一个新的 Node 应用。

  1. $ npm i handsontable

我们安装 Handsontable。

  1. $ npm i --global gulp-cli
  2. $ npm i gulp --save-dev
  3. $ npm i --save-dev gulp-minify

我们安装gulp-cli，gulp和gulp-minify模块。 您也可以运行npm link gulp在全局安装的gulp中创建符号链接。

  1. $ mkdir -p src/js

我们创建src/js目录。 在src/js子目录中，我们将具有main.js文件。

Handsontable 的例子

在下面的示例中，我们使用 Handsontable 生成一个数据网格。 我们使用 Gulp 来管理文件。

  1. ├───build
  2. │   │   index.html
  3. │   ├───css
  4. │   │       handsontable.full.min.css
  5. │   └───js
  6. │           handsontable.full.min.js
  7. │           main-min.js
  8. ├───node_modules
  9. └───src
  10. │   │   index.html
  11. │   │
  12. └───────js
  13.             main.js
  15. gulpfile.js
  16. package-lock.json
  17. package.json

这是使用 Gulp 构建后的项目结构。

src/js/main.js

  1. let data = [
  2.   ["", "Alex", "Frank", "Robert", "Lucy"],
  3.   ["2017", 99, 44, 12, 14],
  4.   ["2018", 22, 21, 44, 67],
  5.   ["2019", 39, 53, 76, 43]
  6. ];
  8. let container = document.getElementById('example');
  9. let hot = new Handsontable(container, {
  10.   data: data,
  11.   rowHeaders: true,
  12.   colHeaders: true,
  13.   licenseKey: 'non-commercial-and-evaluation'
  14. });

在main.js文件中，我们创建Handsontable的实例。 我们将数据添加到表中并进行配置。

src/index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <script src="js/handsontable.full.min.js"></script>
  8.     <link rel="stylesheet" href="css/handsontable.full.min.css">   
  9.     <title>Home page</title>
  10. </head>
  11. <body>
  13. <div id="example"></div>
  15. <script src="js/main-min.js"></script>
  17. </body>
  18. </html>

数据网格显示在此文件中。 它替代了div组件。 我们包括 Handsontable 依赖项和我们的最小主 JavaScript 文件。

gulpfile.js

  1. const gulp = require("gulp");
  2. const minify = require("gulp-minify");
  4. gulp.task('copyHtml', () => {
  5.   return gulp.src('src/index.html')
  6.     .pipe(gulp.dest('build'))
  7. })
  9. gulp.task('copyJS', () => {
  10.   return gulp.src('node_modules/handsontable/dist/handsontable.full.min.js')
  11.     .pipe(gulp.dest('build/js'))
  12. })
  14. gulp.task('copyCSS', () => {
  15.   return gulp.src('node_modules/handsontable/dist/handsontable.full.min.css')
  16.     .pipe(gulp.dest('build/css'))
  17. })
  19. gulp.task('minify', () => {
  20.   return gulp.src('src/js/main.js', { allowEmpty: true }) 
  21.     .pipe(minify({noSource: true}))
  22.     .pipe(gulp.dest('build/js'))
  23. })
  25. gulp.task('default', gulp.series(['copyHtml', 'minify', 'copyJS', 'copyCSS']));

gulpfile.js将文件复制并处理到build目录中。

  1. $ gulp
  2. [10:30:03] Using gulpfile ~\Documents\javascript\hndstable\gulpfile.js
  3. [10:30:03] Starting 'default'...
  4. [10:30:03] Starting 'copyHtml'...
  5. [10:30:03] Finished 'copyHtml' after 31 ms
  6. [10:30:03] Starting 'minify'...
  7. [10:30:03] Finished 'minify' after 35 ms
  8. [10:30:03] Starting 'copyJS'...
  9. [10:30:03] Finished 'copyJS' after 132 ms
  10. [10:30:03] Starting 'copyCSS'...
  11. [10:30:03] Finished 'copyCSS' after 13 ms
  12. [10:30:03] Finished 'default' after 217 ms

我们运行gulp命令。 它执行其任务，并在build目录中准备页面。

  1. $ firefox build/index.html

我们从build目录运行该页面。

Handsontable 教程 - 图1

图：在 Handsontable 组件中显示数据

在本教程中，我们使用了 Handsontable 在 JavaScript 中创建数据网格。

您可能也对以下相关教程感兴趣： Moment.js 教程， Datatables JSON 服务器教程， JSONServer 教程，从 URL 中读取 JSON JavaScript ， JavaScript 贪食蛇教程， JQuery 教程， Node Sass 教程， Lodash 教程。