|
|
 |
클라우드태그
Javascript HTML PHP CSS ASP API mysql jquery image slide Mobile 메뉴 게시판
|
 |
 |
| 현재접속자 명 |
 |
|
|
|
|
|
|
 |
handsontable - Excel 과 유사한 curd 데이터 그리드 |
|
|
|
|
 |
소스분류 |
폼 관련 |
|
|
다운로드 횟수 |
4 회 |
|
|
|
간단설명 |
handsontable은 JavaScript, Angular, React, Vue.js를 위한 강력하고 유연하며 기능이 풍부한 Excel과 유사한 CRUD 데이터 그리드 /테이블 라이브러리입니다. |
|
|
|
|
|
|
|
| handsontable은 JavaScript, Angular, React, Vue.js를 위한 강력하고 유연하며 기능이 풍부한 Excel과 유사한 CRUD 데이터 그리드 /테이블 라이브러리입니다.
라이센스 : MIT
# 주요 특징
- 데이터 필터링
- 데이터 정렬
- 데이터 포맷
- 열 삽입/제거/편집/크기 조정
- 세포 편집
- 고정된 헤더 및 열
- 사용자 정의 상황에 맞는 메뉴
- 사용자 정의 드롭다운 메뉴
- 접을 수 있는 기둥
- CSV로 내보냅니다
- 계산
- 클립보드에 복사합니다
- 키보드 탐색
- 그리고 훨씬 더 많은 것들
# 설치 방법
# NPM
$ npm install handsontable --save
# 사용방법
1. Handsontable 라이브러리를 다운로드하여 해당 페이지에 포함하세요.
<!-- from local -->
<script src="dist/handsontable.full.min.js"></script>
<link href="dist/handsontable.full.min.css" rel="stylesheet" />
<!-- from cdn -->
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css" rel="stylesheet" />
dist 는 폴더 내 handsontable 폴더에 있습니다.
테스트 파일을 만드실때 handsontable 폴더에서 만드시면 체크가 쉽습니다.
2. 데이터 그리드를 배치할 플레이스홀더 요소를 만듭니다.
<div id="dataTable"></div>
3. 데이터 그리드에 표시할 데이터를 정의합니다.
<script>
const data = [
["", "Kia", "Nissan", "Toyota", "Honda"],
["2008", 10, 11, 12, 13],
["2009", 20, 11, 14, 13],
["2010", 30, 15, 12, 13]
];
</script>
4. 라이브러리를 초기화하고 페이지에 기본 데이터 그리드를 렌더링합니다.
<script>
var placeholder = document.getElementById('dataTable');
var myDataGrid = new Handsontable(placeholder, {
data: data,
});
</script>
5. 아래의 링크를 클릭하여 데이터 그리드를 사용자 정의하는 전체 옵션을 확인하세요.
6. Handsontable은 열과 특정 셀을 포함하여 전체 표에 대한 구성 옵션을 제공하는 빠른 방법을 제공합니다.
<script>
var placeholder = document.getElementById('dataTable');
var myDataGrid = new Handsontable(placeholder, {
columns: [
{readOnly: false},
{},
{}
],
cells: function(row, col, prop) {
var cellProperties = {};
if (row === 0 && col === 0) {
cellProperties.readOnly = true;
}
return cellProperties;
}
});
</script>
|
|
|
| 네티즌 의견 이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.) |
|
