SpreadJS 신규 기능: ReportSheet 및 GanttSheet
페이지 정보
작성자 MESCIUS
작성일 2024-05-07 10:59 조회 20회
댓글 0건
본문
첨부파일
관련링크
필요한 항목 |
|
참조 |
|
튜토리얼 요약 |
SpreadJS의 웹 응용 프로그램을 위한 새로운 간트(Gantt) 차트와 리포트(Report) 기능을 살펴봅니다. |
SpreadJS는 응용 프로그램에 가치를 더해줄 수 있는 새로운 기능을 제공합니다.
이 블로그에서 다룰 두 가지 기능은 리포트시트(ReportSheet)와 간트시트(GanttSheet)입니다.
하여 아래 내용을 따라해 보세요!
리포트시트(ReportSheet)
를 사용하면 데이터 입력, 페이징, 데이터 필터링, 정렬, 조건부 서식 지원 등을 포함하여 사용자가 쉽게 보고서를 디자인할 수 있습니다.
사용 시 이점
템플릿 및 데이터 통합 관리: 리포트시트(ReportSheet)와 템플릿시트(TemplateSheet)를 함께 사용하면 보고서 설정과 데이터를 원활하게 통합할 수 있습니다. 템플릿시트(TemplateSheet)에는 리포트시트(ReportSheet)에서 데이터매니저(DataManager)의 데이터와 함께 해당 보고서를 효율적으로 생성하기 위해 활용하는 다양한 보고서 관련 설정이 포함되어 있습니다.
유연성 향상: 소스 데이터를 바인딩하기 위한 매우 유연한 구문과 API를 제공하며, 필드에서 쉬운 데이터 모집단 규칙을 따르며 데이터 입력 API도 제공합니다.
간편한 사용자 정의: 생성된 모든 보고서의 서식과 모양이 표준화되어, 다양한 데이터 집합에 걸쳐 일관성이 유지됩니다.
포괄적인 데이터 처리 기능: 데이터를 사용자 친화적인 방식으로 관리하고 표시합니다. 리포트시트(ReportSheet)는 보고서 생성만을 위한 도구가 아니라, 데이터 입력, 페이징, 데이터 필터링, 정렬 및 조건부 서식을 지원하는 포괄적인 도구입니다.
기능
SpreadJS 리포트시트(ReportSheets)는 다음을 포함한 많은 여러 기능을 제공합니다.
개념 - 템플릿 셀 유형, 분산 방향, 컨텍스트, 렌더링 모드
레이아웃 설정 - 분산 모드, 자동 확장, 고정, 축소
데이터 - 데이터 바인딩, 고급 그룹화, 데이터 필터링, 데이터 정렬, 계산된 열, 매개 변수
렌더링 기능 - 스타일, 조건부 서식, 데이터 유효성 검사, 셀 상태, 그림
계산 - 계산 엔진, 계층 구조 셀, 템플릿 셀 별칭
레이아웃 - 행 및 열
데이터 입력 - 데이터매니저(DataManager)를 통해 구성됨
인쇄 - 템플릿 시트를 통해 페이지 정보 설정
내보내기 및 가져오기 - JSON, SJS, XLSX 또는 PDF
이러한 기능으로 사용자가 직접 SpreadJS 내에 보고서를 생성할 수 있습니다.
더 자세히 살펴보려면, 를 확인하십시오.
샘플
리포트시트(ReportSheet)를 SpreadJS에 추가하는 것은 매우 간단합니다.
1. ReportSheet 라이브러리 참조
<head> ... <script src='.../spreadjs/gc.spread.sheets.all.x.x.x.min.js' type='text/javascript'></script> <script src='.../spreadjs/plugins/gc.spread.sheets.print.x.x.x.min.js' type='text/javascript'></script> <script src='.../spreadjs/plugins/gc.spread.reportsheet.x.x.x.min.js' type='text/javascript'></script> </head>
2. DataManager에서 표 생성
const spread = new GC.Spread.Sheets.Workbook('ss', { sheetCount: 1 });
const ordersTable = spread.dataManager().addTable('Orders', {
remote: {
read: {
url: 'https://demodata.mescius.io/northwind/api/v1/orders'
}
}
});3. TemplateSheet 생성
const reportSheet = spread.addSheetTab(0, 'report1', GC.Spread.Sheets.SheetType.reportSheet); const templateSheet = reportSheet.getTemplate();
4. TemplateSheet에 대한 값 설정 및 바인딩
const columns = ['orderId', 'customerId', 'orderDate', 'freight', 'shipName', 'shipCity', 'shipCountry'];
columns.forEach((columnName, i) => {
templateSheet.setValue(0, i, `${columnName[0].toUpperCase()}${columnName.substring(1)}`);
templateSheet.setTemplateCell(1, i, {
type: 'List',
binding: `Orders[${columnName}]`,
});
});5. 보고서 새로 고침
reportSheet.refresh();
간트시트(GanttSheet)
는 데이터 바인딩된 데이터테이블(DataTable)과 스프레드시트 사용자 인터페이스를 사용하는 Gantt 차트 동작을 제공합니다. 이 기능에는 표준 간트(Gantt) 기능(시계열, 작업 표시줄, 작업, 달력 기능 등)이 포함되어 있습니다.
이점
간트시트(GanttSheet)를 사용하는 주요 이점에는 다음이 포함됩니다.
계획 시각화: 프로젝트 작업, 타임라인 및 종속성을 명확하게 시각적으로 표현하여 더 쉽게 프로젝트를 만들고 효과적으로 관리할 수 있습니다.
작업 종속성: 작업 종속성을 정의하고 시각화하여, 작업이 서로 연결된 방식과 작업 지연이 전체 프로젝트 타임라인에 미치는 영향을 확인할 수 있습니다.
진행률 추적: 완료된 작업을 표시하고 계획된 타임라인과 비교하여 각 작업과 전체 프로젝트의 진행률을 추적합니다.
기한 관리: 프로젝트 마일스톤과 기한을 설정할 수 있으므로 프로젝트를 예정대로 진행하고 지정된 기간 내에 완료할 수 있습니다.
기능
SpreadJS 간트시트(GanttSheet)는 다음을 포함한 Gantt 차트 기능을 구현하는 데 도움이 되는 기능을 제공합니다.
시계열 - 확대/축소
스타일 - 작업 표시줄 스타일 규칙, 작업 표시줄 스타일, 눈금선, 비작업 시간
레이아웃 - 줄 모드, 작업 표시줄 높이, 날짜 텍스트 서식 지정, 작업 표시줄 둥글림
작업 - 작업 연산, 작업 완성
달력 - 작업 시간 및 다른 달력들
리소스 - 리소스를 작업에 연결
정렬 - 특정 작업 필드별로 작업 정렬
내보내기 및 가져오기 - JSON, SJS, XLSX 및 PDF
이 기능에 대해 더 자세히 알아보려면, SpreadJS 간트시트(GanttSheet) 데모를 확인하십시오.
샘플
간트시트(GanttSheet)를 SpreadJS에 추가하는 것은 매우 간단합니다.
<script src="/spreadjs/demos/en/purejs/node_modules/@mescius/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js" type="text/javascript"></script>
2. DataManager에 표 추가
var tableName = "Gantt_Id";
var baseApiUrl = getBaseApiUrl();
var apiUrl = baseApiUrl + "/" + tableName;
var dataManager = spread.dataManager();
var myTable1 = dataManager.addTable("myTable1", {
batch: true,
remote: {
read: {
url: apiUrl
}
},
schema: {
hierarchy: {
type: "Parent",
column: "parentId"
},
columns: {
id: { isPrimaryKey: true },
taskNumber: { dataType: "rowOrder" }
}
}
});3. GanttSheet 생성
var ganttSheet = spread.addSheetTab(0, "GanttSheet1", GC.Spread.Sheets.SheetType.ganttSheet);
4. 보기 추가
var view = myTable1.addView("myView1", [
{ value: "taskNumber", caption: "NO", width: 60 },
{ value: '=CONCAT("(L",LEVEL(),"-",LEVELROWNUMBER(),")")', caption: "L" },
{ value: "name", caption: "Task Name", width: 200 },
{ value: "duration", caption: "Duration", width: 90 },
{ value: "predecessors", caption: "Predecessors", width: 60 },
{ value: "cost", caption: "Cost", style: { formatter: "$0" } }
]);5. 새로운 GanttSheet에 해당 보기 바인딩
view.fetch().then(function() {
ganttSheet.bindGanttView(view);
});
지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
