2.3K star！解鎖在線表格—FortuneSheet

家好，我是小墨，在我們?nèi)粘ｉ_發(fā)中，能否輕松處理復(fù)雜數(shù)據(jù)，經(jīng)常取決于有沒有一個強大的表格工具。如果有一個在線版的 Excel 或 Google Sheets，不僅功能豐富，還能快速集成到你的項目中，而且“開箱即用”，讓你省去繁瑣的配置步驟。這就是本期要介紹的開源項目——FortuneSheet。

項目簡介

FortuneSheet 是一個類似 Excel 和 Google Sheets 的嵌入式 Javascript 表格庫。這個項目繼承自 Luckysheet 的代碼基礎(chǔ)，但它的開發(fā)團隊做了大量的改進工作，把它轉(zhuǎn)換成了 TypeScript，同時解決了許多原項目中的設(shè)計問題。它的目標(biāo)是打造一個功能強大、易于維護且使用簡單的在線表格工具。開發(fā)者們希望，通過 FortuneSheet，用戶可以輕松實現(xiàn)各種復(fù)雜的表格操作，就像用魔法一樣簡單。

功能特點

1、整個項目都用 TypeScript 開發(fā)。

2、可以在一個頁面上創(chuàng)建多個表格實例，完美適應(yīng)復(fù)雜應(yīng)用的需求。而且，F(xiàn)ortuneSheet 完全摒棄了 jQuery，改用 React 或 Vue 來管理 DOM 和狀態(tài)，這讓它更輕量化，性能也更優(yōu)。

3、豐富的表格操作，不管是合并單元格、數(shù)據(jù)驗證，還是復(fù)雜的公式計算，F(xiàn)ortuneSheet 都游刃有余。你還可以使用類似 Excel 的條件格式，高亮特定的數(shù)據(jù)，讓表格數(shù)據(jù)一目了然。

4、完美適配移動端，F(xiàn)ortuneSheet 都能提供絲滑的表格體驗。它還支持多用戶實時協(xié)同編輯，讓團隊合作變得前所未有的順暢。

5、支持導(dǎo)入導(dǎo)出，提供了強大的數(shù)據(jù)透視表功能，幫你輕松進行數(shù)據(jù)分析。

使用步驟

1、安裝庫

npm install @fortune-sheet/react

2、在 HTML 文件中添加一個容器來渲染表格：

<style>
  html, body, #app-container {
    width: 100%;
    height: 100%;
  }
</style>
<div id="app-container"></div>

小貼士：width 和 height 的值不一定要是 100%，但一定要有值，否則表格區(qū)域可能無法顯示。

3、在你React 組件中，使用 FortuneSheet 的 Workbook 組件來渲染表格：

import React from 'react';
import ReactDOM from 'react-dom';
import { Workbook } from "@fortune-sheet/react";
import "@fortune-sheet/react/dist/index.css";

// 為我們的表格創(chuàng)建一些樣例數(shù)據(jù)
const sampleData = [
  { name: "Sheet1", data: [[{ v: "Hello" }, { v: "FortuneSheet!" }]] }
];

ReactDOM.render(
  <Workbook data={sampleData} />,
  document.getElementById('app-container')
);

4、通過使用 API后端存儲實現(xiàn)實時協(xié)同編輯。用戶在表格上進行操作時，生成一個 op 列表，通過 onOp 回調(diào)發(fā)送給后端服務(wù)器。

[
    {
        "op": "replace",
        "index": "0",
        "path": ["data", 1, 0, "bl"],
        "value": 1
    }
]

項目地址

https://github.com/ruilisi/fortune-sheet

總結(jié)

FortuneSheet 作為一個極具潛力的在線表格組件，特別適合那些需要強大表格功能的項目。無論你是構(gòu)建企業(yè)級應(yīng)用還是個人項目，F(xiàn)ortuneSheet 都能為你提供豐富的功能和極大的靈活性，讓你在表格處理上如虎添翼。歡迎在評論區(qū)分享你的想法和使用經(jīng)驗！

able表格一種早期十分流行的網(wǎng)頁布局方式,現(xiàn)在基本都是div+css的布局方式,表格一般由tr(行)td(列)標(biāo)簽組成

表格的常用屬性:1)border:表示表格邊框線2)cellpadding:單元格內(nèi)容和內(nèi)邊框之間的距離3)cellspacing:表示單元格之間的間距4)bgcolor:背景顏色5)width:寬度6)height:高度等等

表格

沒有設(shè)置表格width與height屬性,表格寬高暫時由單元格的內(nèi)容的寬高決定,其他暫不考慮

想要消除單元格間距與內(nèi)容與單元格內(nèi)邊框的間距設(shè)置屬性cellspacing,cellpadding為"0"

<!DOCTYPE html>
<html>
<head>
    <title>表格</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
    <table border="1px" cellspacing="0" cellpadding="10">
        <tr>
            <td>一</td>
            <td>二</td>
            <td>三</td>
        </tr>
        <tr>
            <td>C#</td>
            <td>Asp.net</td>
            <td>MVC</td>
        </tr>
        <tr>
            <td>HTML</td>
            <td>JavaScript</td>
            <td>JQuery</td>
        </tr>
    </table>
</body>
</html>

tr常用屬性

align:單元格內(nèi)容的水平對齊方式,屬性值:1)left2左側(cè))right右側(cè)3)center中間

valign:單元格內(nèi)容的垂直對齊方式,屬性值1)top上邊2)bottom下邊3)middle中間

rowspan與colspan:將單元格進行行與行或者列與列的合并

這些屬性以后都會寫在css樣式表中;制作顯示一個對齊方式與行或列的合并的表格

<!DOCTYPE html>
<html>
<head>
    <title>表格</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="0" width="500" height="300">
        <tr>
            <td colspan="3" align="center">課程表</td><!--合并三行-->
        </tr>
        <tr align="center"><!--單元格內(nèi)容居中顯示-->
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
        </tr>
        <tr align="center">
            <td>HTML</td>
            <td rowspan="2">.NET</td><!--合并兩列-->
            <td>JavaScript</td>
        </tr>
        <tr align="center">
            <td>CSS</td>
            <td>JQuery</td>
        </tr>
    </table>
</body>
</html>

顯示效果

表格中設(shè)置的屬性雖然會繼承,但是子標(biāo)簽單獨設(shè)置了屬性,就會覆蓋父標(biāo)簽的屬性;比如tr

設(shè)置align="center",此tr中的子標(biāo)簽td單獨設(shè)置了align="left",最終效果是此td內(nèi)容居左顯示

編程中，有時候需要以表格的形式輸出數(shù)據(jù)，使其更易于閱讀和理解。Python提供了多種方法來創(chuàng)建和輸出表格數(shù)據(jù)。本文將介紹如何使用不同的方法制作輸出表格，并提供詳細(xì)的示例代碼，以幫助大家更好地理解和應(yīng)用這些技巧。

使用制表符（Tab）分隔列

最簡單的方法是使用制表符（Tab）字符來分隔列，這種方式適用于文本輸出。

以下是一個示例：

# 數(shù)據(jù)
data = [
    ["Name", "Age", "City"],
    ["Alice", "30", "New York"],
    ["Bob", "25", "Los Angeles"],
    ["Charlie", "35", "Chicago"]
]

# 輸出表格
for row in data:
    print("\t".join(row))

在這個示例中，首先定義了一個包含表格數(shù)據(jù)的列表data，然后使用join()方法將每一行的數(shù)據(jù)以制表符分隔并輸出到屏幕上。

使用字符串格式化

Python的字符串格式化功能可以更靈活地控制輸出表格的樣式。可以使用str.format()方法或f-字符串來格式化輸出。

以下是一個示例：

# 數(shù)據(jù)
data = [
    ["Name", "Age", "City"],
    ["Alice", "30", "New York"],
    ["Bob", "25", "Los Angeles"],
    ["Charlie", "35", "Chicago"]
]

# 輸出表格
for row in data:
    print("{:<10} {:<5} {:<10}".format(*row))

在這個示例中，使用字符串格式化來定義每列的寬度，并使用<來指定左對齊。這樣可以確保表格數(shù)據(jù)在列中對齊。

使用第三方庫

如果需要更復(fù)雜的表格操作，可以考慮使用第三方庫，如tabulate或prettytable。這些庫提供了更多的功能和選項來創(chuàng)建和輸出表格。

以下是使用tabulate庫的示例：

from tabulate import tabulate

# 數(shù)據(jù)
data = [
    ["Name", "Age", "City"],
    ["Alice", "30", "New York"],
    ["Bob", "25", "Los Angeles"],
    ["Charlie", "35", "Chicago"]
]

# 輸出表格
print(tabulate(data, headers="firstrow", tablefmt="grid"))

這個示例中，首先安裝tabulate庫（使用pip install tabulate），然后使用它的tabulate()函數(shù)來輸出表格。可以指定不同的輸出格式，例如，tablefmt="grid"用于創(chuàng)建網(wǎng)格形式的表格。

使用HTML表格

如果需要在網(wǎng)頁上顯示表格，可以考慮使用HTML表格。

以下是一個示例，演示如何使用Python生成HTML表格：

# 數(shù)據(jù)
data = [
    ["Name", "Age", "City"],
    ["Alice", "30", "New York"],
    ["Bob", "25", "Los Angeles"],
    ["Charlie", "35", "Chicago"]
]

# 生成HTML表格
html_table = "<table>"
for row in data:
    html_table += "<tr>"
    for cell in row:
        html_table += "<td>{}</td>".format(cell)
    html_table += "</tr>"
html_table += "</table>"

# 輸出HTML
print(html_table)

在這個示例中，使用循環(huán)生成HTML標(biāo)簽，以創(chuàng)建包含表格數(shù)據(jù)的HTML表格。這個方法適用于在網(wǎng)頁上顯示數(shù)據(jù)。

使用 Pandas 庫創(chuàng)建表格

Pandas 是一個強大的數(shù)據(jù)分析庫，它提供了靈活的數(shù)據(jù)結(jié)構(gòu)和數(shù)據(jù)操作功能，包括表格的創(chuàng)建和處理。

以下是一個示例，演示如何使用 Pandas 創(chuàng)建和輸出表格：

import pandas as pd

# 數(shù)據(jù)
data = [
    ["Name", "Age", "City"],
    ["Alice", 30, "New York"],
    ["Bob", 25, "Los Angeles"],
    ["Charlie", 35, "Chicago"]
]

# 創(chuàng)建DataFrame對象
df = pd.DataFrame(data[1:], columns=data[0])

# 輸出表格
print(df)

在這個示例中，首先導(dǎo)入 Pandas 庫，并將表格數(shù)據(jù)存儲在一個列表中。然后，使用 Pandas 的 DataFrame 對象來創(chuàng)建表格，并通過 print() 函數(shù)輸出。Pandas 提供了豐富的數(shù)據(jù)操作和分析功能，可以輕松處理大規(guī)模數(shù)據(jù)集。

使用 PrettyTable 庫創(chuàng)建表格

另一個創(chuàng)建和輸出表格的庫是 PrettyTable，它提供了一種簡單的方式來創(chuàng)建漂亮的文本表格。

以下是一個示例：

from prettytable import PrettyTable

# 數(shù)據(jù)
data = [
    ["Name", "Age", "City"],
    ["Alice", 30, "New York"],
    ["Bob", 25, "Los Angeles"],
    ["Charlie", 35, "Chicago"]
]

# 創(chuàng)建PrettyTable對象
table = PrettyTable(data[0])
for row in data[1:]:
    table.add_row(row)

# 輸出表格
print(table)

在這個示例中，首先安裝 PrettyTable 庫（使用 pip install prettytable），然后創(chuàng)建一個 PrettyTable 對象，并使用 add_row() 方法添加行數(shù)據(jù)。最后，通過 print() 函數(shù)輸出漂亮的文本表格。

使用終端表格庫創(chuàng)建表格

如果希望在終端中以更美觀的方式顯示表格，可以考慮使用終端表格庫，如 terminaltables。

以下是一個示例：

from terminaltables import AsciiTable

# 數(shù)據(jù)
data = [
    ["Name", "Age", "City"],
    ["Alice", 30, "New York"],
    ["Bob", 25, "Los Angeles"],
    ["Charlie", 35, "Chicago"]
]

# 創(chuàng)建AsciiTable對象
table = AsciiTable(data)

# 輸出表格
print(table.table)

在這個示例中，首先安裝 terminaltables 庫（使用 pip install terminaltables），然后創(chuàng)建一個 AsciiTable 對象，并通過 table 屬性輸出表格。這種方式在終端中以更漂亮的方式顯示表格。

總結(jié)

制作輸出表格在各種情況下都是有用的，無論是文本報告、數(shù)據(jù)分析還是終端應(yīng)用。Python 提供了多種方法和庫來創(chuàng)建和輸出表格，可以根據(jù)具體需求選擇最適合的方法。希望本文中的示例代碼能幫助大家更好地處理表格數(shù)據(jù)，并提高編程效率。無論你是初學(xué)者還是有經(jīng)驗的開發(fā)者，掌握這些表格處理技巧都將是一個有用的技能。

在線咨詢

上一篇：JS｜頁面導(dǎo)航（上一頁、下一頁、頁面頂端、頁面底部）
下一篇：前端如何實現(xiàn).md文件轉(zhuǎn)換成.html文件

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

2.3K star！解鎖在線表格—FortuneSheet

項目簡介

功能特點

使用步驟

項目地址

總結(jié)

使用制表符（Tab）分隔列

使用字符串格式化

使用第三方庫

使用HTML表格

使用 Pandas 庫創(chuàng)建表格

使用 PrettyTable 庫創(chuàng)建表格

使用終端表格庫創(chuàng)建表格

總結(jié)

您的項目需求