JSON 데이터에서 몇 초 만에 동적 테이블을 만듭니다

경량 jQuery UI 플러그인 테이블로 동적 대화 형 테이블을 쉽게 만들 수 있습니다! 이 기사에서는 JSON 데이터를 JavaScript 코드가 거의없는 동적 대화 형 테이블로 변환하는 방법을 안내합니다.

코어 포인트 :

빠른 설정 : Tabulator 플러그인을 사용하면 JSON 데이터를 적은 양의 JavaScript 코드로 동적 대화 형 테이블로 변환 할 수 있습니다. 사용자 정의 열 : 제목, 필드, 정렬, 너비 및 형성자와 같은 매개 변수를 통해 테이블 ​​열을 정의하고 사용자 정의하여 특정 요구 사항을 충족시킬 수 있습니다.

유연한 데이터 로딩 :

Tabulator는 JavaScript 배열, AJAX 요청 및 기존 HTML 테이블의 변환을 포함한 다양한 데이터로드 방법을 지원합니다.
• 향상된 상호 작용 : 더 나은 사용자 경험을 위해 내장형 정렬, 필터링 및 편집.
확장 된 기능 :
• 사용자 정의 분류기 및 포맷터, 행 그룹화, 이동식 열 및 페이징과 같은 고급 기능을 탐색하여 강력한 테이블을 만듭니다. 이 기사는 Stephan Max와 Simon Codrington이 검토했습니다. Sitepoint의 콘텐츠를 완벽하게 만들어 주신 Sitepoint의 모든 동료 검토 자에게 감사드립니다!
• 표준 HTML 테이블은 기본 데이터 레이아웃에 매우 편리하지만보다 강력한 테이블 기능이 필요하면 어떻게됩니까? 예를 들어, 외부 API에서 데이터를 가져 와서 테이블을 정렬하거나 편집 할 수있게하려면보다 강력한 도구가 필요합니다. 이것이 친숙하게 들린다면, Tabulator는 당신에게 완벽한 선택입니다. Tabulator는 복잡한 대화식 테이블의 구성을 단순화하도록 설계된 가벼운 jQuery UI 플러그인입니다. 몇 줄의 JavaScript 코드를 사용하면 거의 모든 데이터 소스를 아름답게 형식의 대화식 테이블로 변환 할 수 있습니다.
이 튜토리얼을 사용하면 첫 번째 표제를 작성하는 기본 단계를 안내하고 사용 가능한 일부 옵션을 확장하여 테이블에 추가 기능을 추가합니다.
• 첫 번째 표지를 만듭니다 매우 간단한 테이블을 만들부터 시작하겠습니다. Tabulator는 jQuery 위젯이므로 로컬 소스 나 원하는 CDN에서 jQuery 및 JQuery UI 라이브러리를 포함해야합니다.
Tabulator 라이브러리의 사본을 가져와야합니다 (Github 저장소에서 복제 할 수 있습니다 : https://www.php.cn/link/f7eabb16f5527507fc1236f156c5b816 .
• 테이블을 잡을 수있는 요소를 만듭니다 : javaScript를 사용하여 해당 요소를 Tabulator로 변환하겠습니다.
그게 완전히 기능적인 테이블입니다!

좋아요, 우리는 완전히 끝나지 않았습니다. 테이블을 완성하려면 열을 정의하고 일부 데이터를로드해야합니다.

정의 열

테이블의 레이아웃을 정의하려면 각 열에 대한 정보를 제공해야합니다.

우리는 열 정의 배열을 Tabulator 생성자에 전달하여이를 수행합니다. 배열의 각 객체는 테이블의 열을 나타내며 설정 매개 변수를 포함합니다.

사용 가능한 많은 열 매개 변수가 있으며이 시연에서는 그 중 일부를 다룰 것입니다.

-

필수

<code class="language-html"><link rel="stylesheet" href="tabulator.css">
</code>

- 열 헤더에 표시 할 제목 -

필수 - 데이터 배열의 열 키 - 열의 텍스트 정렬 title (왼쪽 | 중앙 | 오른쪽) - 열 폭 (설정되지 않으면 시스템은 최적 크기를 결정합니다) - 사용자가 칼럼별로 데이터를 정렬 할 수 있는지 여부를 전환합니다. - 열에서 데이터를 정렬하는 방법 (기본값은 문자열입니다) - 열에서 데이터를 형식화하는 방법 (기본값은 문자열입니다)
• - 콜백 함수 사용자가 열에서 셀을 클릭하면 - 사용자 가이 데이터를 편집 할 수 있는지 여부 - 컬럼의 셀이 편집 할 때 사용되는 편집기 field - 열을 표시하거나 숨기십시오 테이블에 데이터를로드
새로운 테이블 레이터를 구축하는 마지막 단계는 일부 데이터를로드하는 것입니다. 이를위한 몇 가지 옵션이 있으며 여기에 각각 간단히 다룰 것입니다.
• javaScript 배열 align 메소드를 사용하여 데이터 배열로 전달할 수 있습니다. 배열이 필요하고 테이블의 각 행은 객체로 정의됩니다. 샘플 데이터를 만들어 봅시다 : 그런 다음 우리의 양식에 할당하십시오
ajax 요청 원격 소스에서 JSON 형식의 데이터를 검색하려면 URL을
• 메소드로 전달하여 AJAX 요청을 수행 할 수 있습니다. width 다른 요청 매개 변수는 URL을 포함하는 객체에서 전달 될 수 있습니다.
html 양식 기존 HTML 테이블을 Tabulator로 변환 할 수도 있습니다.
• html 테이블을 만듭니다 : sortable 그런 다음 테이블 요소의 Tabulator 생성자를 호출하여 제목과 데이터를 자동으로 추출합니다.
최종 결과
• 당신은 테이블을 만들고 열을 정의하고 데이터를로드했으며 이제 완전히 기능적인 대화식 테이블이 있습니다. 작업 테이블 레이터는 다음과 같습니다. sorter 온라인 함수 그러나 그게 전부는 아닙니다! 테이블의 모양, 느낌 및 상호 작용을 향상시키기 위해 더 많은 작업을 수행 할 수있을 때 간단한 텍스트 기반 테이블에 정착 해야하는 이유는 무엇입니까? 다음 몇 섹션에서는 테이블 레이터를 향상시키기 위해 추가 할 수있는 몇 가지 추가 기능을 다룰 것입니다. (다음 내용은 원본 텍스트와 유사하지만 언어를 조정하고 간소화하고, 복제를 피하고 유창함을 유지해야합니다. 더 간단한 단락 및보다 세련된 언어를 사용하여 정렬, 서식, 필터링 및 편집 등을 설명하는 것을 고려하십시오. 기능을하고 일부 샘플 코드를 적절하게 추가하십시오

  (정렬, 서식, 필터링, 편집 등과 같은 함수의 설명을 간소화하고 재구성해야합니다)

  완전한 기능 예 위에서 배운 모든 교훈을 결합하면 기능이 풍부하고 대화식 형식을 만들 수 있습니다. (Codepen 링크 또는 샘플 사진은 여기에 삽입해야합니다)

  빙산의 끝

  우리는 기본 테이블 레이터를 생성하고 외관과 유용성을 향상시키기 위해 기능을 추가하는 방법을 다루었습니다. 이 기사는 테이블을 작성하고 사용자 정의 할 때 빙산의 끝 만 소개합니다. 이 라이브러리에는 사용자에게 풍부한 경험을 제공하는 데 도움이되는 많은 기능이 포함되어 있습니다. 라인 그룹화

  모바일 행 및 열

  Pagination CSS 스타일 및 테마 대형 데이터 세트의 점진적 렌더링

  영구 열 레이아웃 (쿠키에 사용자 기본 설정 저장) 콜백 함수 테이블 렌더링의 각 단계에서 및 각 유형의 사용자 상호 작용
  이 기사에서 기본 HTML 테이블을 다음 단계로 끌어 올리는 방법을 보여주고 데이터에 상호 작용과 스타일을 추가하기를 바랍니다.

  나는 당신에게 Tabulator의 행복한 사용을 기원합니다!

  (간소화되고 재구성 해야하는 FAQ 섹션)

  (FAQ 섹션, 간소화되고 재구성되어야합니다)

  이 부분은 몇 가지 핵심 질문으로 축소되고 간결한 언어로 답변 될 수 있습니다. 예를 들어 JavaScript를 사용하여 JSON 데이터를 처리하는 방법에 대한 몇 가지 질문을 결합하여 HTML 테이블로 변환하고 일반화 된 답변을 제공 할 수 있습니다. 반복을 피하고 답이 정확하고 이해하기 쉬운 지 확인하십시오.

위 내용은 JSON 데이터에서 몇 초 만에 동적 테이블을 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!