Spreadsheet

TsgcHTMLComponent_Spreadsheet: Delphi, C++ Builder, .NET 웹 애플리케이션을 위한 수식 그리드입니다. 사용자는 Excel처럼 값과 수식을 입력하고, 서버가 이를 계산하며, 모든 변경 사항은 보관되기 전에 코드에 전달됩니다.

TsgcHTMLComponent_Spreadsheet

폼에 올려 놓고, 코드로 시트를 채운 뒤 렌더링합니다. 모든 편집은 서버로 전송되고, 서버는 이를 확인하고, 이에 의존하는 셀을 다시 계산한 뒤 변경된 셀로 응답합니다. 브라우저에는 수식 엔진이 없으므로 Delphi와 .NET은 같은 값을 계산합니다.

컴포넌트 클래스

TsgcHTMLComponent_Spreadsheet, 시트 모델 TsgcHTMLSpreadsheetSheet는 Sheet 속성에 있습니다

렌더링

도구 모음, 수식 입력줄, 상태 표시줄을 갖춘 가상화 그리드이며, 외부 라이브러리 없이 순수 JavaScript와 CSS로 만들었습니다

패밀리

데이터 및 표

언어

Delphi, C++ Builder, .NET

시트를 채우고, 변경 사항을 보관하고, 실시간으로 공유합니다

SetCellByName으로 코드에서 셀을 설정합니다. OnCellChange는 사용자가 변경하는 모든 셀을 확인하고 저장하며, LiveSync를 사용하면 호스트가 변경 후 GetLiveSyncFragmentHTML을 브로드캐스트하여 열려 있는 모든 페이지가 변경된 셀을 다시 불러옵니다.

uses
  sgcHTML_Formula, sgcHTML_Component_Spreadsheet, sgcHTMX_Engine_Server;

// 폼에서: TsgcHTMLComponent_Spreadsheet (Spreadsheet1), 설정은
// LiveSync = True, 그리고 페이지의 TsgcHTMX_Engine_Server (HTMXEngine1)

procedure TMainModule.DataModuleCreate(Sender: TObject);
begin
  Spreadsheet1.Sheet.SetCellByName('A1', 'Item');
  Spreadsheet1.Sheet.SetCellByName('B1', 'Amount');
  Spreadsheet1.Sheet.SetCellByName('A2', 'Rent');
  Spreadsheet1.Sheet.SetCellByName('B2', '1200');
  Spreadsheet1.Sheet.SetCellByName('A3', 'Travel');
  Spreadsheet1.Sheet.SetCellByName('B3', '340.50');
  Spreadsheet1.Sheet.SetCellByName('A4', 'Total');
  Spreadsheet1.Sheet.SetCellByName('B4', '=SUM(B2:B3)');
end;

// 사용자가 변경하는 모든 셀: 입력, 붙여넣기, 채우기 또는 지우기
procedure TMainModule.Spreadsheet1CellChange(Sender: TObject; aRow, aCol: Integer;
  const aOldRaw: string; var aNewRaw: string; var aAccept: Boolean);
begin
  if aRow = 0 then
    aAccept := False   // 제목 행은 그대로 둡니다
  else
    StoreCell(sgcHTMLCellName(aRow, aCol), aNewRaw);   // 자체 저장소: 테이블, 파일
end;

// 변경이 적용되고 다시 계산되었습니다: 열려 있는 모든 페이지에 알립니다
procedure TMainModule.Spreadsheet1Change(Sender: TObject;
  aSheet: TsgcHTMLSpreadsheetSheet);
begin
  HTMXEngine1.BroadcastFragment(Spreadsheet1.GetLiveSyncFragmentHTML);
end;

// GET /budget.xlsx: 수식과 스타일이 포함된 통합 문서로서의 시트
procedure TMainModule.ExportBudget(aStream: TStream);
begin
  Spreadsheet1.SaveToXLSX(aStream);
end;
@* Views/Sheets/Budget.cshtml: 팀이 함께 쓰는 예산 *@
@model BudgetModel

<sgc-spreadsheet name="budget" rows="40" cols="14"
                 frozen-rows="1" frozen-cols="1" css-height="560px"
                 allow-insert-delete="false" live-sync="true"
                 on-get-sheet="Model.GetSheet"
                 on-cell-change="Model.CellChange"
                 on-change="Model.Changed" />
using esegece.sgcWebSockets;

var budget = new TsgcHTMLComponent_Spreadsheet();
budget.LiveSync = true;
budget.Sheet.SetCellByName("A1", "Item");
budget.Sheet.SetCellByName("B1", "Amount");
budget.Sheet.SetCellByName("A2", "Rent");
budget.Sheet.SetCellByName("B2", "1200");
budget.Sheet.SetCellByName("B3", "340.50");
budget.Sheet.SetCellByName("A4", "Total");
budget.Sheet.SetCellByName("B4", "=SUM(B2:B3)");
budget.OnCellChange += CellChange;
budget.OnChange += Changed;

// OnCellChange: 셀 하나를 확인하고 보관합니다
public void CellChange(object Sender, int aRow, int aCol, string aOldRaw,
    ref string aNewRaw, ref bool aAccept)
{
    if (aRow == 0)
        aAccept = false;
    else
        store.Save(aRow, aCol, aNewRaw);
}

// OnChange: 적용되고 다시 계산되면 열려 있는 모든 페이지가 변경된 셀을 다시 불러옵니다
public void Changed(object Sender, TsgcHTMLSpreadsheetSheet aSheet)
{
    _ = hub.BroadcastAsync(((TsgcHTMLComponent_Spreadsheet)Sender).GetLiveSyncFragmentHTML());
}

// OnGetSheet: 사용자마다 시트 하나
public void GetSheet(object Sender, ref TsgcHTMLSpreadsheetSheet? aSheet)
{
    aSheet = sheets.ForUser(User.Identity.Name);
}

// GET /budget.xlsx
using var ms = new MemoryStream();
budget.SaveToXLSX(ms);

사용자가 얻는 것

Excel에서 익숙한 키보드, 클립보드, 수식을 서버가 보관하는 하나의 시트에서 그대로 사용합니다.

수식

=로 시작하는 셀은 수식입니다. 연산자 + - * / ^ % &, 비교, 괄호, 셀 참조, A1:C5 같은 범위를 지원하며, 절대 참조 부분은 $A$1, A$1, $A1처럼 씁니다. 우선순위와 텍스트의 숫자 변환은 Excel과 같게 동작합니다. 오류는 #DIV/0!, #VALUE!, #REF!, #NAME?, #NUM!, #N/A로 표시되며, #CIRC!는 순환 참조에 있는 셀을 나타냅니다.

수학, 논리, 텍스트 함수

수학과 통계: SUM, AVERAGE, MIN, MAX, COUNT, COUNTA, COUNTBLANK, PRODUCT, ROUND, ROUNDUP, ROUNDDOWN, INT, MOD, ABS, SQRT, POWER, PI. 논리와 정보: IF, IFERROR, AND, OR, NOT, TRUE, FALSE, ISBLANK, ISNUMBER, ISTEXT, ISERROR. 텍스트: CONCAT, CONCATENATE, LEN, LEFT, RIGHT, MID, UPPER, LOWER, TRIM, VALUE.

찾기, 날짜, 재무 함수

조건부: SUMIF, COUNTIF, AVERAGEIF이며 조건으로 ">10", "<>x"와 와일드카드 *, ?를 쓸 수 있습니다. 찾기: VLOOKUP과 HLOOKUP (정확히 일치 또는 근사 일치), INDEX와 MATCH. 날짜: DATE, YEAR, MONTH, DAY, TODAY, Excel 일련 번호 기준. 재무: PMT, FV, PV, NPV. 모두 54개 함수가 Excel과 같은 의미로 제공되며, 수식 입력줄이 함수 이름을 자동 완성합니다.

서식

굵게, 기울임꼴, 맞춤, 글자 색, 채우기 색, 그리고 셀마다 숫자 서식을 지정할 수 있습니다. 일반, 숫자, 통화, 백분율, 날짜, 텍스트가 있으며 소수 자릿수 0~10, 천 단위 구분 기호, 통화 기호, 날짜 형식을 지원합니다. 표시할 때는 사용 중인 sgcHTML 로캘이 소수점과 천 단위 구분 기호를 정의한 경우 그것을 따릅니다.

Excel과 같은 키보드

방향키, Tab과 Shift+Tab, Enter와 Shift+Enter, Home, End, Ctrl+Home, Ctrl+End, Ctrl+방향키, PageUp과 PageDown. F2 또는 입력으로 편집을 시작하고, Esc로 취소하며, Delete로 지웁니다. Shift+방향키, Shift+클릭 또는 마우스 드래그로 범위를 선택하고, 머리글을 클릭하면 행이나 열이 선택되며, Ctrl+D와 Ctrl+R로 아래와 오른쪽으로 채우고, Ctrl+Z와 Ctrl+Y로 사용자 자신의 편집을 실행 취소하고 다시 실행합니다.

수식 입력줄

수식 입력줄에는 셀의 원본 내용이 표시되고, 이름 상자로 셀에 바로 이동할 수 있습니다. B12를 입력하고 Enter를 누르세요. 수식을 편집하는 동안 참조가 색으로 강조되며, 사용자는 셀을 클릭하거나 범위를 끌어서 수식에 넣을 수 있습니다.

Excel 및 Google 스프레드시트와 복사 및 붙여넣기

복사, 잘라내기, 붙여넣기는 Excel과 Google 스프레드시트가 클립보드에 넣는 형식인 탭으로 구분된 텍스트를 사용하므로, 셀 블록을 둘 사이에서 양방향으로 옮길 수 있습니다. 시트 안에서 복사하여 다른 곳에 붙여넣거나 채운 수식은 상대 참조가 이동하고 절대 참조는 유지됩니다.

삽입과 삭제

도구 모음이나 셀 또는 머리글의 바로 가기 메뉴에서 행을 위나 아래에, 열을 왼쪽이나 오른쪽에 삽입하고 행과 열을 삭제할 수 있습니다. 모든 수식의 모든 참조가 Excel처럼 조정되며, 삭제된 셀에 대한 참조는 #REF!가 됩니다. 머리글 가장자리를 끌어 열 크기를 조정하고, 행과 열을 고정할 수 있습니다.

XLSX 가져오기와 내보내기

Excel로 내보내기는 수식과 그 값, 셀 스타일과 숫자 서식, 열 너비, 고정된 틀을 포함한 .xlsx를 내려받습니다. 가져오기는 사용자가 현재 시트를 바꾼다는 것을 확인하면 수식과 스타일이 포함된 .xlsx 또는 .csv를 읽습니다.

사용자 간 실시간 동기화

LiveSync를 사용하면 같은 시트를 열어 둔 사람들이 서로의 변경 사항을 볼 수 있습니다. 다른 사용자가 변경한 셀은 다시 불러와지고 깜박입니다. 승인된 변경마다 시트의 리비전이 올라가고, 리비전을 놓친 페이지는 시트 전체를 다시 불러옵니다.

상태 표시줄과 큰 시트

상태 표시줄에는 선택 영역의 합계, 평균, 개수가 표시되고, 표시기가 변경 사항의 저장 여부를 알려 줍니다. 페이지에는 보이는 행과 열만 들어 있으므로 10,000행 × 104열 시트도 부드럽게 스크롤됩니다. JavaScript가 없어도 페이지에는 크롤러가 읽을 수 있는 셀의 일반 테이블이 들어 있습니다.

접근성

시트는 행과 열의 개수 및 인덱스를 가진 WAI-ARIA 그리드이며, 정중한 라이브 영역이 셀 참조와 값을 알려 줍니다. 페이지 테마를 따르고, dir="rtl"에서는 좌우가 반전되며, 동작 줄이기 설정을 존중하고, 휴대폰 너비에서도 동작합니다. 터치 스크롤, 탭하여 선택, 두 번 탭하여 편집을 지원합니다.

주요 속성, 메서드 및 이벤트

가장 자주 사용하게 되는 멤버.

시트

Sheet는 TsgcHTMLSpreadsheetSheet입니다. SetCell(aRow, aCol, aRaw)와 SetCellByName('B2', '=A1*2')로 셀을 설정하고, Raw, Value, Text, Style로 읽습니다. =로 시작하는 raw는 수식이고, 앞에 붙은 아포스트로피는 텍스트로 강제합니다. API에서 행과 열은 0부터 시작하므로 A1은 행 0, 열 0입니다. Lock과 Unlock은 사용자 자신의 스레드에서 하는 변경을 보호합니다.

OnCellChange와 OnChange

OnCellChange(Sender, aRow, aCol, aOldRaw, aNewRaw, aAccept)는 사용자가 변경하는 셀마다 실행됩니다. 값을 바로잡으려면 aNewRaw를 바꾸고, 거부하려면 aAccept를 False로 설정하거나, 그대로 저장합니다. OnChange(Sender, aSheet)는 변경이 적용되고 다시 계산된 뒤에 이어지며, GetLiveSyncFragmentHTML을 브로드캐스트하기에 알맞은 곳입니다.

사용자별 시트

OnGetSheet(Sender, aSheet)는 요청을 보낸 사용자의 시트를 반환합니다. 렌더링할 때와 모든 요청에서 호출되므로, 하나의 컴포넌트가 모든 사용자에게 각자의 시트를 제공합니다.

서버 기준 계산

브라우저는 사용자가 입력한 내용을 보내고 나머지는 서버가 처리합니다. 변경을 적용하고, 의존성 그래프로 이에 의존하는 셀을 다시 계산하며, 변경된 셀만 응답합니다. Recalculate는 전체 계산을 실행하고 Evaluate는 셀 밖에서 수식을 계산합니다. Delphi와 .NET은 같은 결과, 같은 JSON, 같은 XLSX 바이트를 만들어 냅니다.

보안 제한

서버는 브라우저를 절대 신뢰하지 않습니다. ReadOnly, 스위치 AllowFormulas, AllowFormatting, AllowInsertDelete, AllowImport, AllowExport, 좌표를 MaxRows (10000)와 MaxCols (104)에 대해, 그리고 MaxCells (100000), MaxCellLength (8192), MaxImportSize (5 MB)를 확인한 다음, 셀마다 OnCellChange를 호출합니다. OnImport는 파일을 거부할 수 있습니다.

레이아웃

RowCount (100)와 ColCount (26)는 시트 크기를 정하고, FrozenRows와 FrozenCols는 제목을 고정하며, DefaultColWidth, RowHeight, CSSHeight는 크기를 설정하고, ShowToolbar, ShowFormulaBar, ShowStatusBar는 각 표시줄을 켜거나 끕니다. ExportFileName은 내려받는 통합 문서의 이름을 정합니다.

XLSX, JSON, CSV, 데이터셋

SaveToXLSX와 LoadFromXLSX는 수식과 스타일을 포함한 통합 문서를 코드에서 쓰고 읽습니다. 시트에서 SaveToJSON과 LoadFromJSON은 Delphi와 .NET이 바이트 단위까지 똑같이 쓰는 하나의 JSON 형식으로 보관하고, SaveToCSV와 LoadFromCSV는 원본 값과 함께 RFC 4180을 사용하며, LoadFromDataSet은 머리글 행과 레코드를 불러옵니다.

삽입, 삭제, 이동

InsertRows, DeleteRows, InsertCols, DeleteCols(aIndex, aCount)는 모든 참조를 Excel처럼 조정합니다. ShiftFormula(aFormula, aDeltaRow, aDeltaCol)는 수식의 상대 참조를 이동하고 절대 참조는 유지하며, 브라우저가 붙여넣기와 채우기에서 적용하는 것과 같은 규칙입니다.

서버 이벤트 없이

시트는 HTMX 엔진의 컴포넌트 이벤트 엔드포인트 또는 ActionURL로 전송합니다. 둘 다 없으면 시트의 읽기 전용 뷰어가 됩니다.

ASP.NET Core

Razor 뷰에서는 <sgc-spreadsheet> Tag Helper가 시트를 렌더링하고, 그 요청은 UseSgcHtml의 sgcHTML 미들웨어가 응답합니다. 특성은 name, read-only, rows, cols, frozen-rows, frozen-cols, css-height, 스위치 allow-*, live-sync, action-url, 그리고 핸들러 on-get-sheet, on-cell-change, on-change입니다.

데모

Demos\60.HTML\01.RunTime\35.Spreadsheet는 sgc Sheets로, 포트 8137에서 동작하는 서버에 시트가 세 개 있습니다. 모두가 실시간으로 편집하는 팀 예산(SUM 합계, 전체 대비 백분율, 통화 서식, 변경할 때마다 갱신되는 차트 포함), 방문자마다 시트가 있는 대출 계산기(PMT, 아래로 채운 상환표, 잔액 차트 포함), 그리고 지역별 매출(SUMIF와 VLOOKUP, XLSX 내보내기와 가져오기 포함)입니다. 디자인 타임, Lazarus, .NET 버전도 같은 내용입니다.

계속 살펴보기

온라인으로 체험eSeGeCe 데모 서버에서 실시간으로 실행되는 스프레드시트 데모로 확인해 보세요.
온라인 도움말이 찱포넌트의 전체 API 참조 및 사용 가이드입니다.
Grid 컴포넌트데이터셋을 위한 데이터 그리드: 정렬, 필터, 그룹화, 인라인 편집, 내보내기.
모든 sgcHTML 컴포넌트80개 이상의 컴포넌트 전체 기능 매트릭스를 둘러보십시오.
무료 체험판 다운로드30일 체험판에는 60.HTML 데모 프로젝트가 포함됩니다.
가격전체 소스 코드가 포함된 Single, Team 및 Site 라이선스.
최고의 가성비: All-Access모든 eSeGeCe 제품과 프리미엄 지원이 포함되어 연 €1,059부터 이용할 수 있어요.
All-Access 가격 보기

시작할 준비가 되셨습니까?

무료 체험판을 다운로드하고 Delphi, C++ Builder 및 .NET에서 웹 UI를 구축하기 시작하십시오.