Excel のようなテーブルを Astro サイトに追加する方法 (簡単な方法)
Astro の哲学は、パフォーマンス、柔軟性、カスタマイズの 1 つです。最初にサーバー上でできる限りレンダリングすることに誇りを持っている Web フレームワーク。コンテンツの保存場所を選択でき、好みに合わせてカスタマイズするためにできるだけ多くのハンドルを提供します。使用するデータグリッド ライブラリは同じである必要があります。
初期セットアップ - Astro のインストール
まず最初に、基本的なアプリをセットアップする必要があります。これは、次のコマンドのプロンプトに従って行います
npm create astro@latest
初期セットアップ - ZingGrid ライブラリを含む
ライブラリ自体は、いくつかの理由から、フロントエンドにスクリプトとして含める必要があります (defer を使用して延期することが望ましい)。
- 一度だけ含める必要があります
- ライブラリ自体は、パックされている機能のシート量 (~259kb 圧縮) に比べて小さいですが、HTML にインライン化して RAIL を維持するには大きすぎます。
- 簡単な補足: Astro の is:inline ディレクティブは実際には、スクリプトをバンドルや処理から除外することを意味しており、スクリプトが実際にビルド プロセス中にフェッチされて所定の位置に交換されるということではありません
- ZingGrid はすでに Astro と同様の哲学を念頭に置いて構築されているため、直接統合する必要はありません
src/layouts/Layout.astro
<!-- ... --->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Astro description">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<!-- ZingGrid Library -->
<script is:inline defer src="/zinggrid.min.js"></script>
</head>
<body></body>
</html>
アクティビティトラッカーグリッドの作成
作成できる最も単純なグリッドから始めて、そこから構築していきます。まず最初に、src/components ディレクトリに ActivityGrid.astro コンポーネントを作成し、次のコードを追加します。
このコンポーネントにデータを渡すので、そのための prop を作成し、それを
src/components/ActivityGrid.astro
---
const { data } = Astro.props;
---
<zing-grid data={data}></zing-grid>
src/pages のindex.astro ページで、ページにグリッドを追加する必要があります。これを行うには、まずフロントマター (--- で囲まれた) にコンポーネントをインポートし、サンプル JSON も取り込む必要があります。ここで、注意しなければならない唯一のことは、JSON が
src/pages/index.astro
---
import Layout from '../layouts/Layout.astro';
import ActivityGrid from '../components/ActivityGrid.astro';
import activityData from '../data/activities.json';
const activityDataStr = JSON.stringify(currencyData);
---
<Layout title="ZingGrid + Astro">
<header> <!-- ... --> </header>
<main>
<ActivityGrid data={activityDataStr} />
</main>
</Layout>
ページをロードすると、次のようなグリッドが表示されます。まだ特別なことは何もありませんが、驚くほど簡単に何かを始めることができます。
ユーザーコントロールとキャプションの追加
グリッドを強化するには、要素を構成することから始めます。 100 個の属性から選択できる要素には大量の設定が用意されていますが、ここでは役立つと思われるいくつかを取り上げます:
- レイアウト : グリッドを行モードまたはカード モードで表示するかどうかを決定します
- layout-controls : ユーザーによるレイアウト モードの変更を許可または禁止します
- sort : 各列を並べ替えるコントロールを追加します
- pager : グリッドを 1 つの長いリストとして残すのではなく、ページ分割します
- page-sizer : 各ページの行数
<!-- ... --->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Astro description">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<!-- ZingGrid Library -->
<script is:inline defer src="/zinggrid.min.js"></script>
</head>
<body></body>
</html>
列の書式設定
距離列に単位がないと、少し読みにくくなります。幸いなことに、ZingGrid を使用すると、列のテンプレートを作成できます。 [[二重括弧]] 表記内のインデックス オブジェクトを使用して、行エントリの値にアクセスできます。以下は参考用のデータの例です。「距離」キーは、テンプレートに [[index. distance]] を記述するときに取り込むものです。
src/data/activities.json
---
const { data } = Astro.props;
---
<zing-grid data={data}></zing-grid>
src/data/ActivityGrid.astro
---
import Layout from '../layouts/Layout.astro';
import ActivityGrid from '../components/ActivityGrid.astro';
import activityData from '../data/activities.json';
const activityDataStr = JSON.stringify(currencyData);
---
<Layout title="ZingGrid + Astro">
<header> <!-- ... --> </header>
<main>
<ActivityGrid data={activityDataStr} />
</main>
</Layout>
その結果、テンプレートと同様に mi 単位が各距離値に追加されます
CSS Var と Open Props を使用してグリッドをスタイル設定する
ZingGrid は、パフォーマンスと復元力を高めるために最新のネイティブ Web コンポーネントを使用して構築されていますが、その副作用として、多くのコンポーネントが Shadow DOM 内に存在します。ユーザーが望むあらゆる部分をスタイルできるようにしたいと考え、これらの影を貫通するために何百もの CSS 変数が作成されました。以下では、柔軟性を高めるために Open Props と組み合わせて使用する方法を示します。
---
const { data } = Astro.props;
---
<zing-grid
data={data}
layout="row"
layout-controls="disabled"
sort
pager
page-size="6"
>
<zg-caption>?? Activity Tracker</zg-caption>
</zing-grid>
カスタムセルレンダリング関数
グリッドに活気を加えるために、各アクティビティの前に絵文字を動的に追加できると便利です。これを行うには、ウィンドウ オブジェクトに activityRender という関数を作成し (ZingGrid からアクセスできるようにします)、関数名を指定する関数名を
[
{
"activityType": "Outdoor Bike",
"city": "Tempe",
"date": "10/17/24",
"distance": "48.27",
"elapsedTime": "03:26:35",
"movingTime": "01:53:15",
"state": "Arizona"
},
/* ... */
]
行へのクラスの動的追加
最後に、アクティビティ タイプに基づいて各行に色を付けるには、row-class 属性を使用して、各行にクラスを動的に追加する関数を渡します。
<!-- ... --->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Astro description">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<!-- ZingGrid Library -->
<script is:inline defer src="/zinggrid.min.js"></script>
</head>
<body></body>
</html>
グローバル CSS スタイル ブロックでこれらのクラスを作成する必要があります。
---
const { data } = Astro.props;
---
<zing-grid data={data}></zing-grid>
さあ、出来上がり！ ? Astro
内には動的にスタイル設定され、フォーマットされた ZingGrid があります。
最終的な考え
ほんの少しの設定とほんの少しのコードで、Astro サイトに適合する堅牢で動的なデータグリッドを構築することができました。この記事では、ZingGrid でできることのほんの表面をなぞっただけなので、このライブラリで実際に何ができるのかを示すパート 2 が後ほどありますので、ご興味があればここをご覧ください。
以上がExcel のようなテーブルを Astro サイトに追加する方法 (簡単な方法)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7888
15
1649
14
1410
52
1301
25
1247
29
フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？
Apr 04, 2025 pm 02:42 PM
フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...
javascriptの分解：それが何をするのか、なぜそれが重要なのか
Apr 09, 2025 am 12:07 AM
JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。
誰がより多くのPythonまたはJavaScriptを支払われますか？
Apr 04, 2025 am 12:09 AM
スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。
JavaScriptは学ぶのが難しいですか？
Apr 03, 2025 am 12:20 AM
JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。
Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？
または：
Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？
Apr 04, 2025 pm 05:36 PM
この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。
JavaScriptの進化：現在の傾向と将来の見通し
Apr 10, 2025 am 09:33 AM
JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。
JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？
Apr 04, 2025 pm 05:09 PM
同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...
Console.log出力の違い結果：なぜ2つの呼び出しが異なるのですか？
Apr 04, 2025 pm 05:12 PM
Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...
