고급기능 SpreadJS를 이용하여 팀 별 데이터 취합하기
추천0
페이지 정보
작성자 MESCIUS루카스
작성일 2024-04-15 16:38 조회 47회
댓글 0건
본문
첨부파일
관련링크
비즈니스 환경에서 데이터는 중요한 자산으로, 이를 효율적으로 취합하고 관리하는 작업은 필수적입니다.
작게는 부서 단위부터 크게는 전사적으로 취합 과정을 거치게 되는데, 이 때 SpreadJS를 사용하면 조금 더 편하게 취합하고 관리할 수 있습니다.
SpreadJS를 활용하여 여러분의 웹 시스템에 Excel 화면을 구현해 보세요!
템플릿 파일을 각자의 컴퓨터에 다운로드 하여 데이터를 입력하고, 해당 파일을 다시 담당자에게 이메일이나 메신저를 통해 전달하는 대신, 웹 화면에서 바로 데이터를 입력하여 데이터가 취합되도록 구현할 수 있습니다.
또한, 팀 별로 접근 가능한 시트를 제한하여, 다른 팀의 데이터에는 접근하지 못하도록 설정할 수도 있습니다.
이번 스터디에서 팀 별로 데이터를 취합하는 방법을 설명하겠습니다.
각 팀 별 아이디에는 권한이 조금씩 다르게 들어갑니다.
다음은 취합 시스템을 만들기 위한 순서입니다.
- 로그인 페이지 구성
- 템플릿 작성
- 취합 페이지 구성(SpreadJS)
- 관리자로 로그인한 경우
- 생산 1팀으로 로그인한 경우
- 생산 2팀으로 로그인한 경우
- 생산 3팀으로 로그인한 경우
- 통합 문서 저장
💡 완성된 샘플은 첨부 파일에서 다운로드 할 수 있습니다.
1. 로그인 페이지 구성
먼저, ID 별 권한을 부여해야 하기 때문에 로그인 기능이 필요합니다.
이 샘플에서 로그인은 간단하게 localStorage로 구현하였습니다.
각 ID 별 권한은 아래와 같습니다.
A(관리자) : 디자이너 컴포넌트, 모든 시트 열람, 수정 가능, 생산 3팀 시트 행 추가 불가B(생산 1팀원) : 생산1팀 시트만 열람 가능C(생산 2팀원) : 생산2팀 시트만 열람 가능, 초록색 배경 셀 입력 불가D(생산 3팀원) : 통합 시트와 생산3팀 시트만 열람 가능, 생산 3팀 시트는 행 추가 가능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="spreadjs culture" content="ko-kr" />
<title>생산팀 자재 관리 샘플</title>
<link href="login.css" rel="stylesheet"/>
</head>
<body>
<div class="contents">
<div class="login-wrapper">
<div id="login-error-msg-holder">
<p id="login-error-msg">Invalid ID or Password</p>
</div>
<h2>Login</h2>
<form id="login-form">
<input type="text" name="userName" placeholder="ID">
<input type="password" name="userPassword" placeholder="Password">
<input type="submit" value="Login" id="login-form-submit">
</form>
<div>
* A-관리자, B-생산1팀, C-생산2팀, D-생산3팀 </br>
* 비밀번호 : 1234
</div>
<div style="float:right;color:#EAEAEA;">
</br>
Designed by MESCIUS
</div>
</div>
</div>
</body>
<script>
window.onload = function () {
const loginForm = document.getElementById("login-form");
const loginButton = document.getElementById("login-form-submit");
const loginErrorMsg = document.getElementById("login-error-msg");
const user = ["A", "B", "C", "D"];
const password = 1234;
loginButton.addEventListener("click", (event) => {
event.preventDefault();
const username = loginForm.userName.value;
const userpassword = loginForm.userPassword.value;
if (user.includes(username) && userpassword == password) {
localStorage.setItem('username',username);
location.href = "./main.html";
} else {
loginErrorMsg.style.opacity = 1;
}
});
}
</script>
</html>2. 템플릿 작성
SpreadJS에 기본적으로 띄울 템플릿을 작성합니다.
기본적인 템플릿 작성 방법은 아래 링크에서 확인하실 수 있습니다.
이번 스터디에서 작성할 템플릿의 주요 특징은 아래와 같습니다.
- '통합', '생산1팀', '생산2팀', '생산3팀' 시트를 생성합니다.
- 각 팀의 시트에서 입력된 값은 '통합' 시트에 참조되어 반영됩니다.
- '생산2팀' 시트에서 입력할 수 없는 셀은 녹색으로 표시합니다.
- '생산3팀' 시트에는 행을 추가할 수 있습니다.
* 작성된 템플릿은 샘플에 포함되어 있습니다.
3. 취합 페이지 구성 (SpreadJS)
본격적으로 로그인 이후의 페이지를 작성합니다.
먼저, 필요한 라이브러리와 css를 로드하고 페이지를 구성합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="spreadjs culture" content="ko-kr" />
<title>생산 자재 관리</title>
<link href="./css/gc.spread.sheets.excel2013white.17.0.3.css" rel="stylesheet" type="text/css" />
<link href="./lib/css/gc.spread.sheets.designer.17.0.3.min.css" rel="stylesheet" type="text/css">
<link href="./custom.css" rel="stylesheet" type="text/css">
</head>
<body unselectable="on">
<button id="save" onclick="saveWorkbook()">저장</button>
<div id="gc-designer-container" role="application"></div>
<script type="text/javascript" src="./scripts/gc.spread.sheets.all.17.0.3.min.js"></script>
<script type="text/javascript" src="./scripts/plugins/gc.spread.sheets.shapes.17.0.3.min.js"></script>
<script type="text/javascript" src="./scripts/plugins/gc.spread.sheets.charts.17.0.3.min.js"></script>
<script type="text/javascript" src="./scripts/plugins/gc.spread.sheets.slicers.17.0.3.min.js"></script>
<script type="text/javascript" src="./scripts/plugins/gc.spread.sheets.print.17.0.3.min.js"></script>
<script type="text/javascript" src="./scripts/plugins/gc.spread.sheets.barcode.17.0.3.min.js"></script>
<script type="text/javascript" src="./scripts/plugins/gc.spread.sheets.pdf.17.0.3.min.js"></script>
<script type="text/javascript" src="./scripts/plugins/gc.spread.pivot.pivottables.17.0.3.min.js"></script>
<script type="text/javascript" src="./scripts/plugins/gc.spread.sheets.tablesheet.17.0.3.min.js"></script>
<script type="text/javascript" src="./scripts/plugins/gc.spread.sheets.ganttsheet.17.0.3.min.js"></script>
<script type="text/javascript" src="./scripts/plugins/gc.spread.sheets.formulapanel.17.0.3.min.js"></script>
<script type="text/javascript" src="./scripts/plugins/gc.spread.report.reportsheet.17.0.3.min.js"></script>
<script type="text/javascript" src="./scripts/plugins/gc.spread.sheets.io.17.0.3.min.js"></script>
<script type="text/javascript" src="./scripts/interop/gc.spread.excelio.17.0.3.min.js"></script>
<script type="text/javascript" src="./scripts/resources/ko/gc.spread.sheets.resources.ko.17.0.3.min.js"></script>
<script type="text/javascript" src="./lib/scripts/gc.spread.sheets.designer.resource.ko.17.0.3.min.js"></script>
<script type="text/javascript" src="./lib/scripts/gc.spread.sheets.designer.all.17.0.3.min.js"></script>
<script type="text/javascript" src="./libraries/code.jquery.com_jquery-3.7.1.min.js"></script>
<script type="text/javascript" src='./license.js' type="text/javascript"></script>
</body>
</html>그 후 로그인 아이디를 받고 미리 만든 템플릿을 SpreadJS에 불러옵니다.
이때, 관리자는 편집이 가능하도록 디자이너 컴포넌트를 함께 불러옵니다.
let spread;
window.onload = function () {
let GUID = localStorage.getItem('username'); //A-전체, B-생산1팀, C-생산2팀, D-생산3팀
if(GUID === "A") {
let designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"));
spread = designer.getWorkbook();
}
else {
spread = new GC.Spread.Sheets.Workbook(document.getElementById("gc-designer-container"));
}
$.ajax({
//템플릿 불러오기
url: "./자재 관리 현황.ssjson",
datatype: "json",
success: function (data) {
spread.suspendPaint();
spread.suspendCalcService();
spread.suspendEvent();
spread.fromJSON(JSON.parse(data));
spread.resumeEvent();
spread.resumeCalcService();
spread.resumePaint();
},
error: function (ex) {
alert('Exception:' + ex);
}
});
}4. 관리자로 로그인한 경우
관리자는 별도 설정을 하지 않습니다.
if(GUID == "A") { // 별도 설정 X, 모든 시트 보임
}5. 생산 1팀으로 로그인한 경우
생산 1팀은 "생산1팀" 시트만 보이고, 다른 팀의 시트를 볼 수 없도록 탭 스트립을 보이지 않게 설정합니다.
else if(GUID == "B") { // 1,3,4번 시트 숨김
spread.options.tabStripVisible = false;
spread.getSheet(0).visible(false);
spread.getSheet(2).visible(false);
spread.getSheet(3).visible(false);
}6. 생산 2팀으로 로그인한 경우
생산 2팀은 "생산2팀" 시트만 보이고, 다른 팀의 시트를 볼 수 없도록 탭 스트립을 보이지 않게 설정합니다.
그리고 배경색이 녹색(#92d050)인 셀은 입력할 수 없도록 합니다.
else if(GUID == "C") { // 1,2,4번 시트 숨김
spread.options.tabStripVisible = false;
spread.getSheet(0).visible(false);
spread.getSheet(1).visible(false);
spread.getSheet(3).visible(false);
// 배경색이 '#92d050'인 셀은 입력 불가 설정
let sheet = spread.getSheet(2);
sheet.bind(GC.Spread.Sheets.Events.EditStarting, function (sender, args) {
if(args.sheet.getCell(args.row, args.col).backColor() == "#92d050") {
args.cancel = true;
}
});
}7. 생산 3팀으로 로그인한 경우
생산 3팀은 "통합" 시트와 "생산3팀" 시트만 보이고, 다른 팀의 시트를 볼 수 없도록 합니다.
"행 추가" 버튼 역할을 하는 셀이 있고, 이 셀을 클릭하면 행이 추가되며 추가된 행을 "통합" 시트에서도 자동으로 참조합니다.
else if(GUID == "D") { // 2,3번 시트 숨김
spread.getSheet(1).visible(false);
spread.getSheet(2).visible(false);
spread.setActiveSheetIndex(3);
// '행 추가' 셀 클릭 시 시트 행 추가
spread.getSheet(3).bind(GC.Spread.Sheets.Events.CellClick, function (sender, args) {
if(args.row == 2 && args.col == 7) {
// '생산3팀' 시트에 행을 추가하고 테두리, 텍스트 정렬 설정
args.sheet.addRows(args.sheet.getRowCount(), 1);
args.sheet.getRange(args.sheet.getRowCount()-1, 0, 1, 7).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { all: true });
args.sheet.getRange(args.sheet.getRowCount()-1, 0, 1, 7).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
// '통합' 시트에 행을 추가하고 '생산3팀' 시트 참조 수정, 테두리 텍스트 정렬 설정
spread.getSheet(0).addRows(spread.getSheet(0).getRowCount(), 1);
spread.getSheet(0).setFormula(22, 0, '생산3팀!A5:G' + args.sheet.getRowCount());
spread.getSheet(0).getRange(spread.getSheet(0).getRowCount()-1, 0, 1, 7).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { all: true });
spread.getSheet(0).getRange(spread.getSheet(0).getRowCount()-1, 0, 1, 7).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
}
});
} 8. 통합 문서 저장
입력이 완료된 통합 문서를 저장합니다.
실제 시스템 운영 시에 통합 문서를 저장할 때는 서버에 저장하겠지만, 이 샘플은 프론트 단에서만 동작하기 때문에 클라이언트 PC에 저장하는 것으로 대체하겠습니다.
통합 문서를 저장할 때 필요한 설정은 아래와 같습니다.
- 탭 스트립이 보여야 합니다.
- 숨김 처리된 시트가 모두 다시 보여야 합니다.
- 저장 후에는 탭 스트립 표시 여부와 시트 숨김 처리가 저장 전의 모습과 동일해야 합니다.
function saveWorkbook() {
let spread = GC.Spread.Sheets.findControl(ss);
let visibleArr = [];
// 현재 화면의 시트 숨김 정보 저장
for(let i=0;i<spread.getSheetCount();i++) {
visibleArr.push(spread.getSheet(i).visible());
}
// 현재 화면의 tabStripVisible 정보 저장
let tabStripVisible = spread.options.tabStripVisible;
// 기존의 숨김 시트 제외한 모든 시트 보이도록 설정한 후 ssjson으로 내보내기
for(let i=0;i<spread.getSheetCount();i++) {
spread.getSheet(i).visible(true);
}
// tabStrip 보이도록 설정 후 내보내기
spread.options.tabStripVisible = true;
const blob = new Blob([JSON.stringify(spread.toJSON())], {type: "text/plain;charset=utf-8"});
saveAs(blob, "export.ssjson");
// 다시 화면에는 원래대로 숨김 설정
for(let i=0;i<spread.getSheetCount();i++) {
spread.getSheet(i).visible(visibleArr[i]);
}
// 다시 화면에는 tabStripVisible 원래대로 설정
spread.options.tabStripVisible = tabStripVisible;
} 위의 모든 단계를 거쳐 완성된 샘플의 모습은 아래와 같습니다.
SpreadJS를 이용하여 팀 별 데이터를 받아 취합하는 방법에 대해 알아보았습니다.
이를 참고하여 데이터 취합 과정을 조금 더 편하게 만들어 보시기 바랍니다!
댓글목록
등록된 댓글이 없습니다.
