,,

Handsontable快速實現(xiàn)WEB在線 Excel 編輯組件的免費開源項目，大公司都在用！

admin

2025年2月26日 7:44 本文熱度 611

在日常開發(fā)中，我們經(jīng)常需要處理表格數(shù)據(jù)，比如展示、編輯、分析等等。傳統(tǒng)的 HTML 表格雖然能夠滿足基本需求，但操作起來比較繁瑣，而且缺乏一些高級功能，例如數(shù)據(jù)綁定、數(shù)據(jù)驗證、篩選、排序等。

今天開源君分享一個功能強大的 JavaScript 數(shù)據(jù)網(wǎng)格組件項目 - Handsontable。

項目簡介

Handsontable 是一個開源的 JavaScript 數(shù)據(jù)表格組件，它擁有強大的功能和豐富的 API，用于操作表格數(shù)據(jù)、設置表格外觀、響應用戶交互等，可以幫助我們輕松構建功能完善的數(shù)據(jù)表格應用。

核心功能如下：

數(shù)據(jù)綁定：可以與各種數(shù)據(jù)源進行綁定，包括 JavaScript 數(shù)組、JSON 對象和數(shù)據(jù)庫表。
數(shù)據(jù)驗證：提供了多種數(shù)據(jù)驗證規(guī)則，可以確保輸入數(shù)據(jù)的準確性。
過濾和排序：支持對數(shù)據(jù)進行過濾和排序，方便用戶快速查找所需信息。
CRUD 操作：支持對數(shù)據(jù)進行創(chuàng)建、讀取、更新和刪除操作。
自定義單元格：支持自定義單元格的渲染和編輯方式，滿足個性化需求。

目前在Github上面收獲了19K star，全球很多大公司也都在使用這個項目。

性能特色

強大的數(shù)據(jù)處理能力：支持各種數(shù)據(jù)類型，包括數(shù)字、字符串、日期、時間、布爾值等，并提供豐富的 data manipulation API。
豐富的交互功能：支持單元格編輯、篩選、排序、拖拽、復制粘貼等操作，并提供各種自定義事件和回調函數(shù)。
靈活的定制性：支持自定義列頭、行號、單元格格式、菜單等，并提供大量的插件擴展功能。
高性能：采用高效的渲染引擎和數(shù)據(jù)管理算法，可以流暢地處理大量數(shù)據(jù)。
跨瀏覽器兼容：支持所有主流瀏覽器，包括 Chrome、Firefox、Safari、Edge 和 IE。

開始安裝使用

1、安裝

使用包管理工具進行安裝，npm, Yarn 或 NuGet都可以。

npm install handsontable

yarn add handsontable

PM> Install-Package Handsontable

使用CDN

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>

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

2、創(chuàng)建容器

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

3、初始化實例

const container = document.querySelector('#example');
const hot = new Handsontable(container, {
  data: [
    ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
    ['2019', 10, 11, 12, 13],
    ['2020', 20, 11, 14, 13],
    ['2021', 30, 15, 12, 13]
  ],
  rowHeaders: true,
  colHeaders: true,
  licenseKey: 'non-commercial-and-evaluation' // for non-commercial use only
});