Astro 사이트에 Excel과 유사한 표를 추가하는 방법(쉬운 방법)-JS 튜토리얼-php.cn

Astro의 철학은 성능, 유연성, 맞춤화입니다. 먼저 서버에서 최대한 많이 렌더링하는 것을 자랑스럽게 생각하는 웹 프레임워크로, 콘텐츠가 있는 위치를 선택할 수 있고 원하는 대로 사용자 정의할 수 있는 핸들을 최대한 많이 제공합니다. 함께 사용하는 데이터그리드 라이브러리는 동일해야 합니다.

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

초기 설정 - Astro 설치

먼저 기본 앱을 설정해야 합니다. 다음 명령의 프롬프트에 따라 설정하겠습니다

npm은 astro@latest를 생성합니다

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

초기 설정 - 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/comComponents 디렉토리에 ActivityGrid.astro 구성 요소를 생성하고 다음 코드를 추가합니다.

우리는 데이터를 이 구성 요소에 전달할 것이므로 그에 대한 소품을 만들고 데이터 속성을 사용합니다.

src/구성 요소/ActivityGrid.astro

---
const { data } = Astro.props;
---

<zing-grid data={data}></zing-grid>

로그인 후 복사

src/pages의 index.astro 페이지에서 페이지에 그리드를 추가해야 합니다. 이를 수행하려면 먼저 머리말의 구성 요소를 가져와야 하며(---로 울타리가 쳐져 있음) 샘플 JSON도 가져와야 합니다. 이제 우리가 주의해야 할 유일한 것은 JSON이 로 전달될 때 문자열화한다는 것입니다. 속성으로.

src/페이지/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>

로그인 후 복사

페이지를 로드하면 다음과 같은 그리드가 표시됩니다. 아직 화려한 것은 없지만 놀라울 정도로 쉽게 뭔가를 시작할 수 있습니다.

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

사용자 컨트롤 및 캡션 추가

그리드를 향상시키기 위해 요소를 구성하는 것부터 시작하겠습니다. 요소에서 선택할 수 있는 속성이 100개이므로 수많은 구성을 사용할 수 있지만 여기서는 유용할 것으로 생각되는 몇 가지 속성을 선택하겠습니다.

레이아웃 : 그리드를 행 모드로 표시할지, 카드 모드로 표시할지 결정합니다
레이아웃 제어 : 사용자가 레이아웃 모드를 변경하는 것을 허용/금지
sort : 각 열을 정렬하는 컨트롤을 추가합니다
pager : 하나의 긴 목록으로 두는 대신 그리드를 페이지 매김합니다
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>

로그인 후 복사

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

열 형식 지정

거리 열에 단위가 없으면 읽기가 약간 어렵습니다. 다행히 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 단위가 각 거리 값에 추가됩니다.

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

CSS Var 및 Open Prop을 사용하여 그리드 스타일 지정

ZingGrid는 성능과 탄력성을 위해 최신 기본 웹 구성 요소로 구축되었지만 그로 인해 많은 구성 요소가 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"
  },
  /* ... */
]

로그인 후 복사

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

행에 클래스를 동적으로 추가하기

그리고 마지막으로 활동 유형에 따라 각 행에 색상을 지정하기 위해 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 스타일 블록에서 해당 클래스를 생성해야 합니다. 는 프런트엔드에서 동적으로 생성되므로 일반적인 태그가 지정되지 않습니다. Astro가 빌드 시 추가하는 스타일 범위 지정 속성.

---
const { data } = Astro.props;
---

<zing-grid data={data}></zing-grid>

로그인 후 복사

자 짜잔! ? Astro 내부에는 동적으로 스타일과 형식이 지정된 ZingGrid가 있습니다

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

최종 생각

단지 약간의 구성과 아주 적은 코드만으로 Astro 사이트에 맞는 강력하고 동적인 데이터 그리드를 구축할 수 있었습니다. 이 기사에서는 ZingGrid가 수행할 수 있는 작업 중 극히 일부만 다루었으므로 나중에 라이브러리가 실제로 수행할 수 있는 작업을 보여주는 2부에서 다룰 예정이므로 관심이 있으시면 여기에서 주의하시기 바랍니다.

위 내용은 Astro 사이트에 Excel과 유사한 표를 추가하는 방법(쉬운 방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!