91网首页-91网页版-91网在线观看-91网站免费观看-91网站永久视频-91网站在线播放

在日常開發(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è)置表格外觀、響應(yīng)用戶交互等，可以幫助我們輕松構(gòu)建功能完善的數(shù)據(jù)表格應(yīng)用。

?

核心功能如下：

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

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

性能特色

• 強大的數(shù)據(jù)處理能力：支持各種數(shù)據(jù)類型，包括數(shù)字、字符串、日期、時間、布爾值等，并提供豐富的 data manipulation API。
• 豐富的交互功能：支持單元格編輯、篩選、排序、拖拽、復(fù)制粘貼等操作，并提供各種自定義事件和回調(diào)函數(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
});

表格預(yù)覽

項目展示體驗

官方展示的demo樣式，以及javascript、react、vue等的源代碼。

數(shù)據(jù)篩選

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

單元格編輯

Handsontable 是一款功能強大、易于使用且性能優(yōu)異的開源數(shù)據(jù)表格組件，可以幫助開發(fā)者輕松地構(gòu)建各種數(shù)據(jù)展示和編輯應(yīng)用。如果你也需要在項目中處理表格數(shù)據(jù)，推薦試試 Handsontable這個項目。

更多項目功能細(xì)節(jié)，感興趣的可以到項目地址進行查看：

項目地址：
https://github.com/handsontable/handsontable

閱讀原文：原文鏈接