찾다

집 >웹 프론트엔드 >JS 튜토리얼 >Astro 사이트에 Excel과 유사한 표를 추가하는 방법(쉬운 방법)

Astro 사이트에 Excel과 유사한 표를 추가하는 방법(쉬운 방법)

Patricia Arquette
Patricia Arquette원래의
2024-10-23 08:26:02953검색

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

json css html npm Object if sort for while Directory double using class finally Attribute number function this column table Access excel
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：운영자 기본 사항다음 기사：운영자 기본 사항

관련 기사

더보기