Handsontable.js를 사용하여 JavaScript로 데이터 그리드 만들기

Handsontable은 데이터 그리드를 만들 때 사용하는 JavaScript 라이브러리입니다. Excel과 매우 유사한 스프레드시트와 같은 경험을 제공합니다. 이 튜토리얼에서는 Handsontable.js를 사용하여 자신의 데이터로 데이터 그리드를 만드는 방법을 설명합니다. 추가적으로, Handsontable.js에서 사용할 수 있는 다양한 옵션을 사용하는 방법을 살펴보겠습니다.

다양한 스프레드시트(예: Grid Creator)를 사용할 수 있지만, Handsontable.js는 일반 JavaScript, React 또는 Angular와도 사용할 수 있다는 점에서 대부분의 스프레드시트보다 돋보입니다.

handsontable.js 사용을 시작하기 전에 첫 번째 단계는 이를 로컬 컴퓨터에 설치하는 것입니다. Handsontable.js를 설치하는 방법에는 여러 가지가 있습니다.

가장 기본적인 방법은 HTML 코드에 CDN 링크를 사용하는 것입니다. 다음 HTML 코드를

태그에 붙여넣기만 하면 됩니다. 으아아아

위 코드 조각에서는 CDN을 통해 두 개의 파일을 가져오고 있습니다. 이는 "handsontable 스타일"을 가져오는 데 사용되는 "handsontable.full.min.css"이고 JavaScript 코드를 가져오는 데 사용되는 "handsontable.full.min.js"를 가져옵니다.

CDN 링크 사용에 관심이 없다면 npm 또는 yarn의 도움으로 설치할 수 있습니다. 아래 표시된 NPM 명령을 사용해 보세요. 으아아아

Yarn에는 다음 명령을 사용하세요. 으아아아

이러한 명령 중 하나를 사용하고 나면

태그에 아래 표시된 대로 이 두 줄을 추가하여

handsontable 사용을 시작할 수 있습니다. 으아아아

태그와 <script> 태그에서는 "node_modules" 폴더에서 해당 "js" 및 "CSS" 파일을 가져옵니다. 이제 Handsontable.js를 사용할 수 있습니다. <link> </script>

index.html

첫 번째 단계는 HTML 파일을 만드는 것입니다. 파일 이름을

index.html로 지정합니다. 제가 만든 index.html 파일의 최종 코드는 다음과 같습니다.

예

으아아아

위 HTML 코드에서는 두 개의

div 클래스를 사용했습니다. 첫 번째 헤더에서는 헤더를 생성하고 다음 헤더는 비워 두지만, 비어 있는 div에는 container라는 클래스가 있으며 이를 JavaScript 코드에 추가합니다.

app.js

다음 코드 조각에서는

태그를 사용하여 JavaScript 코드를 작성할 <script>app.js<b> 파일에 연결합니다. </script>

app.js라는 파일을 만들고 다음 코드를 붙여넣으세요. - 으아아아

위의

app.js 코드에서 가장 먼저 하는 일은 우리가 만들고 있는 그리드의 데이터에 맞는 다양한 값을 저장하는 data라는 상수를 만드는 것입니다.

다음 단계에서는

querySelector에서 HTML의 특정 요소를 선택하고 해당 값을 Handsontable 생성자 내의 첫 번째 매개변수로 전달합니다. 두 번째 매개변수는 div에 표시하려는 실제 데이터입니다.

index.html

다음은

app.js 데이터가 포함된 전체 코드입니다. 이 코드를 실행하고 출력이 어떻게 나타나는지 확인하세요 -

예

으아아아

행 및 열 머리글 소개

행과 열에 머리글을 추가할 수도 있습니다. 이렇게 하려면 Handsontable 생성자 메서드의 두 번째 매개 변수 내에 두 개의 속성을 추가하기만 하면 됩니다. 아래에 표시된 코드 조각을 고려하세요.

으아아아

위의 코드 조각을

app.js 파일에 이미 있는 코드 조각으로 바꾸면 행과 열에 기본 헤더가 추가된 것을 볼 수 있습니다. p>

rowHeaders에는 1부터 9까지의 숫자 값이 있고, 열 머리글에는 A부터 열 문자 끝까지의 기본값이 있습니다.

데이터 그리드에서는 열 헤더를 직접 제공하며 이는 데이터에서도 볼 수 있습니다. 첫 번째 행은 다음과 같습니다.

으아아아

위 값은

colHeaders 내에서도 제공될 수 있습니다. 아래에 표시된 업데이트된 코드 조각을 고려하세요. 으아아아

데이터 상수도 변경해야 합니다. 업데이트된 데이터 상수는 아래와 같습니다.

으아아아

결론

이 튜토리얼에서는 Handsontable.js가 무엇인지, 그리고 이를 사용하여 원하는 데이터 그리드를 만드는 방법을 설명합니다. 열과 헤더에 기본값을 제공하는 다양한 예를 살펴보았습니다.

위 내용은 Handsontable.js를 사용하여 JavaScript로 데이터 그리드 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!