Handsontable 教程 · ZetCode 中文系列教程

# Handsontable 教程 > 原文： [http://zetcode.com/javascript/handsontable/](http://zetcode.com/javascript/handsontable/) Handsontable 教程展示了如何使用 Handsontable 模塊在 JavaScript 中創建數據網格。 ## 可調 Handsontable 是一個 JavaScript 庫，用于在 JavaScript 中創建數據網格。它創造了類似電子表格的體驗。在本教程中，我們將使用 Handsontable 和 Gulp4。我們正在使用 Handsontable 組件的社區版本。 ## 安裝 Handsontable 首先，我們安裝 Handsontable ```js $ node -v v11.5.0 ``` 我們使用 Node 版本 11.5.0。 ```js $ npm init -y ``` 我們啟動一個新的 Node 應用。 ```js $ npm i handsontable ``` 我們安裝 Handsontable。 ```js $ 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`中創建符號鏈接。 ```js $ mkdir -p src/js ``` 我們創建`src/js`目錄。在`src/js`子目錄中，我們將具有`main.js`文件。 ## Handsontable 的例子在下面的示例中，我們使用 Handsontable 生成一個數據網格。我們使用 Gulp 來管理文件。 ```js ├───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` ```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` ```js <!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 文件。 `gulpfile.js` ```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`目錄中。 ```js $ 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`目錄中準備頁面。 ```js $ firefox build/index.html ``` 我們從`build`目錄運行該頁面。 ![Displaying data in Handsontable component](https://img.kancloud.cn/95/93/95935057d2a6c51d7de470a6835ab192_623x389.jpg) 圖：在 Handsontable 組件中顯示數據在本教程中，我們使用了 Handsontable 在 JavaScript 中創建數據網格。您可能也對以下相關教程感興趣： [Moment.js 教程](/javascript/momentjs/)， [Datatables JSON 服務器教程](/articles/datatablesjsonserver/)， [JSONServer 教程](/javascript/jsonserver/)，[從 URL 中讀取 JSON JavaScript](/articles/javascriptjsonurl/) ， [JavaScript 貪食蛇教程](/javascript/snake/)， [JQuery 教程](/web/jquery/)， [Node Sass 教程](/javascript/nodesass/)， [Lodash 教程](/javascript/lodash/)。