介紹

今天給大家介紹一個(gè)功能強(qiáng)大的、類似 Excel 的數(shù)據(jù)表格庫，支持豐富的展現(xiàn)和交互，以及多樣的單元格展現(xiàn)和配置，簡單的來講就是一套在線excel表格。

Handsontable 是一個(gè)強(qiáng)大的開源工具，提供豐富的功能，使得在網(wǎng)頁上處理和展示數(shù)據(jù)變得簡單而高效，在項(xiàng)目中引入 Handsontable ，可以實(shí)現(xiàn)類似于 Excel 的在線功能，受到眾多開發(fā)者及大公司的追捧，GitHub上更是有 19.2k star。

使用

在項(xiàng)目中引入 Handsontable 的 CSS 和 JS 文件

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@8.4.0/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable@8.4.0/dist/handsontable.full.min.js"></script>

創(chuàng)建基本的 Handsontable 實(shí)例

要?jiǎng)?chuàng)建一個(gè)基本的 Handsontable 實(shí)例，你需要準(zhǔn)備一個(gè) HTML 元素作為容器，并使用 Handsontable 的構(gòu)造函數(shù)初始化它。

❝

實(shí)戰(zhàn)：創(chuàng)建了一個(gè)包含 3 行 3 列數(shù)據(jù)的 Handsontable 實(shí)例，并啟用了行頭、列頭、篩選器和下拉菜單等功能

❞

<div id="example"></div>

// 獲取容器元素
var container = document.getElementById('example');

// 初始化 Handsontable 實(shí)例
var hot = new Handsontable(container, {
  data: [
    ['A1', 'B1', 'C1'],
    ['A2', 'B2', 'C2'],
    ['A3', 'B3', 'C3']
  ],
  rowHeaders: true,
  colHeaders: true,
  filters: true,
  dropdownMenu: true
});

以上幾行代碼，我們就實(shí)現(xiàn)了一個(gè)包含 3 行 3 列數(shù)據(jù)的 Handsontable 實(shí)例，并啟用了行頭、列頭、篩選器和下拉菜單功能。

怎么樣？用法非常簡單！實(shí)際上，Handsontable 包含的功能非常多，以上代碼只是一個(gè)最基礎(chǔ)的功能。

核心實(shí)現(xiàn)：

• 「強(qiáng)大的數(shù)據(jù)處理能力：」 支持各種數(shù)據(jù)類型，包括數(shù)字、字符串、日期、時(shí)間、布爾值等，并提供豐富的 data manipulation API。
• 「豐富的交互功能：」 支持單元格編輯、篩選、排序、拖拽、復(fù)制粘貼等操作，并提供各種自定義事件和回調(diào)函數(shù)。
• 「靈活的定制性：」 支持自定義列頭、行號(hào)、單元格格式、菜單等，并提供大量的插件擴(kuò)展功能。

項(xiàng)目展示

按值過濾

多層級(jí)樹形結(jié)構(gòu)數(shù)據(jù)操作及展示

表格數(shù)據(jù)編輯

數(shù)據(jù)排序

基本實(shí)現(xiàn)了Excel的大部分功能，這個(gè)組件對(duì)于開發(fā)OA系統(tǒng)、財(cái)務(wù)及物資管理等系統(tǒng)來講，可以說必不可少，目前亞馬遜、因特、索尼等公司都在使用該組件。

如果你也有在線處理數(shù)據(jù)的需求，不妨試試 Handsontable

開源地址

https://github.com/handsontable/handsontable