KingTable
1.0.0
입력 데이터를 기반으로 스스로 구축할 수 있는 관리 테이블용 라이브러리입니다. 클라이언트 및 서버 측 페이지 매김을 지원합니다. 클라이언트 및 서버 측 검색; 사용자 정의 필터 보기; 열을 숨기는 자동 메뉴와 사용자 정의 도구 지원. 클라이언트 측 내보내기 기능: csv, json, xml, Excel xlsx(플러그인 사용) 형식.
다음 데모는 온라인으로 제공됩니다.
페이지 새로 고침 시 필터가 자동으로 유지되는 방식에 유의하세요. 예를 들어 검색 기능을 사용하거나 풍부한 HTML 데모 중 하나에서 페이지를 변경한 다음 F5를 누르는 것입니다. 검색할 때 클라이언트 측 검색 알고리즘이 어떻게 관련성(발생 횟수, 일치 항목을 생성하는 속성의 순서)에 따라 결과를 정렬하는지 확인하세요.
주의: 이 모든 데모는 고정 테이블 입니다. 모든 정보가 메모리에 로드되고 클라이언트 측에서 페이지가 매겨지고 필터링되는 테이블입니다. 서버 측에서 AJAX 요청을 사용하여 페이지를 매긴 테이블의 예를 보려면 저장소에 제공되는 전용 문서 및 개발 서버를 참조하세요.
KingTable 라이브러리는 npm을 사용하여 설치할 수 있습니다.
npm install kingtable그런 다음 CommonJS 구문을 사용하여 모듈을 가져올 수 있습니다.
var KingTable = require ( "kingtable" )
var KingTableUtils = require ( "kingtable/utils" )또는 ES6 가져오기 구문:
import KingTable from "kingtable"
import KingTableUtils from "kingtable/utils" KingTable 라이브러리는 dist 폴더에 있는 배포 파일을 다운로드하여 사용할 수 있습니다.
< script src =" kingtable.js " > </ script > KingTable 라이브러리의 이전 버전은 https://github.com/RobertoPrevato/jQuery-KingTable에서 사용할 수 있습니다.
위키 페이지를 참조하세요. 가능한 옵션의 전체 목록은 전용 옵션 페이지에서 확인할 수 있습니다.
다음은 KingTable 2.0에 추가된 기능을 나열한 표입니다.
| 특징 | 설명 |
|---|---|
| ES6 소스 코드 | ES6 소스 코드, 라이브러리는 배포를 위해 ES5로 트랜스파일됩니다. |
| 단위 테스트를 거친 소스 코드 | 소스 코드는 단위 테스트를 위해 Gulp 작업, Karma, Jasmine과 통합됩니다. 300개 이상의 테스트 – 계속해서 성장 중입니다! |
| 종속성을 제거했습니다. | jQuery, Lodash, I.js, R.js에서 종속성을 제거했습니다. |
| 향상된 예외 | 발생한 예외에는 자세한 지침이 포함된 GitHub 위키 링크가 포함됩니다. |
| 데이터를 가져오는 로직이 개선되었습니다. | HTTP GET 메서드(쿼리 문자열의 필터) 또는 HTTP POST 메서드(JSON POST 데이터로 필터링) 중에서 선택할 수 있습니다. |
| LRU 캐시 | 가장 최근에 사용된 캐싱 메커니즘은 필터를 통해 마지막 n 페이지를 캐시하여 AJAX 요청 수를 줄입니다. |
| 테이블 데이터 가져오기 논리 | 테이블 자체를 렌더링하는 데 필요한 데이터를 반환하는 함수를 정의할 수 있습니다(예: 사용자 정의 필터 보기를 위한 사전) |
| 필터 캐싱 | 각 테이블의 필터는 클라이언트 측 스토리지(구성 가능)를 사용하여 캐시되므로 페이지 새로 고침 시 유지됩니다. |
| CS 정렬 개선 | 숫자처럼 정렬할 수 있는 문자열(예: "25%", "25.40 EUR", "217°")은 정렬 시 자동으로 숫자로 구문 분석됩니다. |
| CS 정렬 개선 | 여러 속성을 기준으로 클라이언트 측 정렬. |
| CS 검색 개선 | 클라이언트 측 검색 기능이 개선되었습니다. 날짜와 숫자 및 기타 형식화된 문자열의 문화권에 따른 문자열 표현에서 검색이 작동합니다. |
| 이벤트 핸들러에 대한 지원 개선 | 해당하는 경우 사용자 정의 이벤트 핸들러는 클릭한 항목을 매개변수로 자동 수신합니다. |
| 사용자 정의 버튼에 대한 지원이 향상되었습니다. | 이제 각 항목에 대해 렌더링할 추가 필드(예: 버튼)를 구성할 수 있습니다. |
| 기타 미디어에 대한 지원 개선 | NodeJS를 사용하여 전송된 이메일 본문에 대한 NodeJS 콘솔 애플리케이션 및 HTML 테이블 렌더링을 지원합니다. |
KingTable 라이브러리는 두 가지 작업 모드를 구현합니다.
그리고 최적화된 컬렉션과 간단한 컬렉션을 모두 지원합니다. 자세한 내용은 전용 위키 페이지를 참조하세요.
고정 테이블은 서버 측 페이지 매김이 필요하지 않지만 클라이언트 측 페이지 매김의 이점을 누릴 수 있는 컬렉션을 표시합니다. 애플리케이션 작업을 할 때 일반적으로 시간이 지나도 커지지 않고 크기가 작은 컬렉션을 처리하는 일이 발생합니다. 예를 들어, 옷을 판매하는 전자 상거래 웹사이트의 카테고리 표 또는 대부분의 애플리케이션의 사용자 역할 표입니다. 이러한 경우에는 전체 컬렉션을 클라이언트에게 반환하는 것이 합리적입니다. 고정 KingTable을 정의하는 방법에는 두 가지가 있습니다.
var table = new KingTable ( {
data : [ { ... } , { ... } , { ... } ]
} ) ;
//or... code the server side to return an array of items (instead of an object describing a paginated set of results)
var table = new KingTable ( {
element : document . getElementById ( "my-table" ) ,
url : "/api/categories"
} ) ;고정 테이블은 클라이언트 측에서 검색 및 페이지 매김을 수행합니다.
일반 테이블은 시간이 지남에 따라 증가하기 때문에 서버측 페이지 매김이 필요한 컬렉션을 표시하는 테이블입니다. 이는 전자상거래 웹사이트의 제품 및 고객 테이블과 같은 대부분의 경우에 해당됩니다.
var table = new KingTable ( {
url : "/api/profiles"
} ) ;AJAX 응답을 수신할 때 일반 테이블은 다음 구조를 수신할 것으로 예상합니다.
{
subset : [ array ] , // array of items that respect the given filters
total : [ number ] // the total count of items that respect the given filters; excluding the pagination: for example 13000
} KingTable 라이브러리에는 최종 사용자와 라이브러리를 사용하는 프로그래머 모두의 유용성을 향상시키는 다양한 기능이 포함되어 있습니다.
sessionStorage , localStorage 또는 호환 개체)에 저장되고 페이지 새로 고침 시 유지됩니다. 필터는 URL 및 가능한 경우 테이블 ID로 수집됩니다.자세한 내용은 전용 위키 페이지를 참조하세요.
전체 정보를 보려면 전용 위키 페이지를 참조하세요. KingTable 라이브러리에는 적절한 버튼 이름(새로 고침, 페이지 번호, 페이지당 결과 등)을 표시하는 데 사용되는 클라이언트 측 현지화를 구현하는 로직이 포함되어 있습니다.
프로젝트 및 서버 측 코드와 통합하는 방법에 대한 지침은 전용 위키 페이지를 참조하세요.
