Handsontable 教程
最后修改于 2023 年 10 月 18 日
在本文中，我们将展示如何使用 Handsontable 模块在 JavaScript 中创建一个数据网格。
Handsontable
Handsontable 是一个用于在 JavaScript 中创建数据网格的 JavaScript 库。 它创造了类似于电子表格的体验。
在本文中，我们使用 Handsontable 和 Gulp 4。 我们正在使用 Handsontable 组件的社区版。
设置 Handsontable
首先，我们安装 Handsontable
$ npm init -y
我们启动一个新的 Node 应用程序。
$ npm i handsontable
我们安装 Handsontable。
$ npm i --global gulp-cli $ npm i gulp --save-dev $ npm i --save-dev gulp-minify
我们安装 gulp-cli、gulp 和 gulp-minify 模块。 您还可以运行 npm link gulp 以创建一个指向全局安装的 gulp 的符号链接。
$ mkdir -p src/js
我们创建 src/js 目录。 在 src/js 子目录下，我们有 main.js 文件。
Handsontable 示例
在下面的示例中，我们使用 Handsontable 生成一个数据网格。 我们使用 Gulp 来管理我们的文件。
├───build
│ │ index.html
│ ├───css
│ │ handsontable.full.min.css
│ └───js
│ handsontable.full.min.js
│ main-min.js
├───node_modules
└───src
│ │ index.html
│ │
└───────js
main.js
gulpfile.js
package-lock.json
package.json
这是使用 Gulp 构建后的项目结构。
src/js/main.js
let data = [
["", "Alex", "Frank", "Robert", "Lucy"],
["2017", 99, 44, 12, 14],
["2018", 22, 21, 44, 67],
["2019", 39, 53, 76, 43]
];
let container = document.getElementById('example');
let hot = new Handsontable(container, {
data: data,
rowHeaders: true,
colHeaders: true,
licenseKey: 'non-commercial-and-evaluation'
});
在 main.js 文件中，我们创建 Handsontable 的一个实例。 我们向表格添加数据并对其进行配置。
src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="js/handsontable.full.min.js"></script>
<link rel="stylesheet" href="css/handsontable.full.min.css">
<title>Home page</title>
</head>
<body>
<div id="example"></div>
<script src="js/main-min.js"></script>
</body>
</html>
数据网格显示在此文件中。 它替换了 div 组件。 我们包含 Handsontable 依赖项和我们缩小的 main JavaScript 文件。
gulpfile.js
const gulp = require("gulp");
const minify = require("gulp-minify");
gulp.task('copyHtml', () => {
return gulp.src('src/index.html')
.pipe(gulp.dest('build'))
})
gulp.task('copyJS', () => {
return gulp.src('node_modules/handsontable/dist/handsontable.full.min.js')
.pipe(gulp.dest('build/js'))
})
gulp.task('copyCSS', () => {
return gulp.src('node_modules/handsontable/dist/handsontable.full.min.css')
.pipe(gulp.dest('build/css'))
})
gulp.task('minify', () => {
return gulp.src('src/js/main.js', { allowEmpty: true })
.pipe(minify({noSource: true}))
.pipe(gulp.dest('build/js'))
})
gulp.task('default', gulp.series(['copyHtml', 'minify', 'copyJS', 'copyCSS']));
gulpfile.js 将文件复制并处理到 build 目录中。
$ gulp [10:30:03] Using gulpfile ~\Documents\javascript\hndstable\gulpfile.js [10:30:03] Starting 'default'... [10:30:03] Starting 'copyHtml'... [10:30:03] Finished 'copyHtml' after 31 ms [10:30:03] Starting 'minify'... [10:30:03] Finished 'minify' after 35 ms [10:30:03] Starting 'copyJS'... [10:30:03] Finished 'copyJS' after 132 ms [10:30:03] Starting 'copyCSS'... [10:30:03] Finished 'copyCSS' after 13 ms [10:30:03] Finished 'default' after 217 ms
我们运行 gulp 命令。 它执行其任务并在 build 目录中准备页面。
$ firefox build/index.html
我们从 build 目录运行页面。
来源
在本文中，我们使用 Handsontable 在 JavaScript 中创建了一个数据网格。