고급기능 JavaScript Excel 스프레드시트 사용 사례: 미디어 산업
페이지 정보
작성자 GrapeCity
작성일 2023-08-24 17:35 조회 156회
댓글 0건
본문
첨부파일
관련링크
사용 사례가 포함되어 있습니다.
많은 분야 및 산업에 사용할 수 있도록 말이죠!
콘텐츠 출시 예정 시기를 표시하는 콘텐츠 캘린더와 출시 추적기 만드는 방법을 보여 줍니다.
샘플을 다운로드하여 SpreadJS 기능을 함께 활용해 보시길 바랍니다.
SpreadJS 설정
먼저 HTML 페이지 및 이와 함께 사용되는 JavaScript 파일을 만듭니다.
HTML 페이지와 함께 사용할 JavaScript 파일을 생성하여 시작하겠습니다.
<!doctype html>
<html lang="en" style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="./node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="./node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
<div class="sample-tutorial">
<div id="ss" style="width:100%;height:100%"></div>
</div>
</body>
</html>터미널에서 NPM을 사용하여 응용 프로그램에 SpreadJS를 설치할 수 있습니다.
npm install @grapecity/spread-sheets
달력 템플릿 디자인
를 사용하면 아주 간단하게 템플릿을 만들 수 있습니다.
템플릿 디자이너의 익숙한 Excel 인터페이스를 사용해 모든 종류의 Excel 보고서 템플릿을 빠르게 디자인해 보세요.
필요한 Excel 양식을 별도의 코딩 없이도 쉽고 빠르게 생성이 가능합니다.
먼저, 시트에 달력을 만듭니다.
셀에 달력을 채우는 데 사용할 수 있는 날짜가 있는 드롭다운을 추가합니다.
드롭다운은 'currentMonth'라는 사용자 정의 이름으로 설정할 수 있습니다.
다음, 일요일로 시작하여 토요일로 끝나는 요일을 연속으로 설정할 수 있습니다.
이 두 가지가 있다면 월을 올바른 날짜로 채우는 동적 배열 함수를 만들 수 있습니다.
이와 같은 경우 SEQUENCE 및 WEEKDAY 함수를 사용합니다.
요일의 서식을 날짜로 지정할 수도 있습니다.
=SEQUENCE(6,7,currentMonth-WEEKDAY(currentMonth)+1,1)
또한 달력의 각 날짜에 대해 범위 셀타입을 사용하여 지금 서식을 지정할 수 있도록 특정 데이터를 표시합니다.
새 시트를 만들고 시트에 있는 셀의 서식을 다음과 같이 지정하면 됩니다.
그런 다음 시트 바인딩을 설정하고 측면 패널에서 필드를 드래그합니다.
마지막으로, SpreadJS 템플릿 디자이너에서는 달력에 사용할 수 있는 데이터가 포함된 표를 만들 수 있습니다.
시트 탭 하단의 '+' 아이콘을 사용하여 시트를 추가합니다.
표를 추가할 셀을 강조 표시합니다.
Insert(삽입) > Table(표)를 클릭하고 팝업 메뉴에서 '확인'을 클릭합니다.
Table Design(표 디자인 탭)이 열리면 왼쪽 상단의 텍스트 상자에 입력하여 표 이름을 변경합니다.
이제 달력 디자인을 완료했으므로, 응용 프로그램에 로드하기 위해 저장할 수 있습니다.
편집 가능하게 저장하려면 파일 > 저장 > SJS 파일 저장으로 이동합니다.
이 경우 'media_template.sjs'로 저장합니다.
응용 프로그램에 파일을 로드하려면 파일을 JS 파일로 내보내야 합니다.
파일 > 내보내기 > SpreadJS JSON > JavaScript 파일 내보내기로 이동하여 파일을 내보낼 수 있습니다.
HTML 파일에 이 새로운 파일에 대한 참조를 추가했는지 확인해야 합니다.
<script src="media_template.js" type="text/javascript"></script>
범위 템플릿 만들기 및 설정
생성된 시트를 기반으로 달력의 특정 날짜에 대해 생성된 표에서 각 필드에 로드되는 범위 템플릿을 만들 수 있습니다.
function createRangeTemplates(spread) {
var calendarSheet = spread.getSheetFromName("Content Calendar");
calendarSheet.suspendPaint();
var format = '=IFERROR(RANGEBLOCKSPARKLINE("Day Template"!$A$2:$C$4,'
+ 'OBJECT('
+ '"date",@,'
+ '"task",IFERROR(FILTER(calendarTable[Task],calendarTable[Date]=@),""),'
+ '"editor",IFERROR(FILTER(calendarTable[Editor],calendarTable[Date]=@),""),'
+ '"status",IFERROR(FILTER(calendarTable[Status],calendarTable[Date]=@),""),'
+ '"month",MONTH($B$4))),"")';
calendarSheet.getCell(6, 1).formatter(format);
for (var r = 6; r <= 11; r++) {
for (var c = 1; c <= 7; c++) {
calendarSheet.getCell(r, c).formatter(format);
}
}
calendarSheet.resumePaint();
}범위 템플릿을 만든 후 이를 달력의 모든 셀에 대한 포맷터로 설정할 수 있습니다.
우리가 만든 데이터가 포함된 올바른 서식의 달력이 생성되었습니다.
미디어 범위 추적기
응용 프로그램의 마지막 조각, 미디어 범위 추적기를 추가해 보겠습니다.
추적기는 추적 목적으로 모든 항목 및 항목의 상태를 보여 줍니다.
먼저 SpreadJS 템플릿 디자이너에서 .SJS 파일을 열고, 새 시트를 만듭니다.
시트에 'ArticlesPlanned' 및 'ArticlesLive'라고 하는 표 두 개를 추가합니다.
이 작업은 앞서 사용한 것과 동일한 프로세스로 실행할 수 있습니다.
이전과 마찬가지로 이 파일을 저장하여 JS로 내보낼 수 있습니다.
이제 새 시트를 사용하여 응용 프로그램에 로드해야 합니다.
Table(표)에 데이터를 추가할 수 있으며, Table(표)을 바인딩할 개체를 만들면 됩니다.
function createMediaCoverageTables(spread) {
var mediaCoverageTrackerSheet = spread.getSheetFromName("Media Coverage Tracker");
var mediaCoverageData = {
articlesLive: [
{article: "Businesses and Spreadsheets", publication: "NYTimes", type: "Feature", date: "7/3/2023", status: "Live"},
{article: "Top Spreadsheet Software 2023", publication: "Forbes", type: "Review", date: "7/6/2023", status: "Live"},
{article: "New Spreadsheet Software Releases", publication: "WIRED", type: "Release", date: "7/13/2023", status: "Live"},
{article: "Upcoming Excel Changes", publication: "CNET", type: "Broadcast", date: "7/17/2023", status: "Live"}
],
articlesPlanned: [
{article: "The Best Spreadsheet Functions for Your Workbook", publication: "The Verge", type: "Review", date: "7/20/2023", status: "Planned"},
{article: "Spreadsheets in Layman's Terms", publication: "Medium", type: "Feature", date: "7/24/2023", status: "Planned"}
]
};
...
}해당 데이터가 있으므로 시트에서 표를 가져오고, 표 열을 만듭니다.
각 표를 위에서 만든 개체에서 가져온 자체 데이터 소스와 바인딩할 수 있습니다.
function createMediaCoverageTables(spread) {
...
mediaCoverageTrackerSheet.suspendPaint();
var tableArticlesLive = mediaCoverageTrackerSheet.tables.findByName("ArticlesLive");
var tableArticlesPlanned = mediaCoverageTrackerSheet.tables.findByName("ArticlesPlanned");
var tc1 = new GC.Spread.Sheets.Tables.TableColumn();
tc1.name("Article");
tc1.dataField("article");
var tc2 = new GC.Spread.Sheets.Tables.TableColumn();
tc2.name("Publication");
tc2.dataField("publication");
var tc3 = new GC.Spread.Sheets.Tables.TableColumn();
tc3.name("Type");
tc3.dataField("type");
var tc4 = new GC.Spread.Sheets.Tables.TableColumn();
tc4.name("Date");
tc4.dataField("date");
tc4.formatter("M/d/yyyy");
tableArticlesLive.autoGenerateColumns(false);
tableArticlesLive.bind([tc1, tc2, tc3, tc4], 'articlesLive', mediaCoverageData);
tableArticlesPlanned.autoGenerateColumns(false);
tableArticlesPlanned.bind([tc1, tc2, tc3, tc4], 'articlesPlanned', mediaCoverageData);
mediaCoverageTrackerSheet.resumePaint();
}상단의 코드를 실행하면 미디어 추적 및 콘텐츠 달력 일정이 모든 데이터와 함께 통합 문서에 로드됩니다.
이로써 SpreadJS를 사용하여 간단한 미디어 응용 프로그램이 작성해 보았습니다.
더 많은 기능과 데이터를 포함하도록 응용 프로그램을 확장할 수 있지만, 이를 바탕으로 충분히 자체 응용 프로그램을 구현할 수 있습니다.
SpreadJS의 기능에 대한 자세한 내용은 통해 SpreadJS SpreadSheets의 기능 작동 방식에 대해 확인해 보시길 바랍니다!
감사합니다.
지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
