Handsontable 教程展示了如何使用 Handsontable 模块在 JavaScript 中创建数据网格。
掌上电脑
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 生成数据网格。我们使用 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构建后的项目结构。
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
的一个实例。我们向表中添加数据并对其进行配置。
<!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 依赖项和我们缩小的主 JavaScript 文件。
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 中创建了一个数据网格。
列出所有 JavaScript 教程。