[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

테두리, 대각선, 눈금선

SpreadJS는 셀, 열 또는 행 주위에 테두리를 설정하는 기능을 지원합니다. 위젯은 기본적으로 눈금선(gridline)을 표시하며, 셀, 열 또는 행 주위의 테두리 색상이나 선 스타일을 설정할 수 있습니다. 눈금선의 색상과 표시 여부도 지정할 수 있으며, 셀 또는 셀 범위에 대각선도 설정할 수 있습니다.

테두리 색상 설정

SpreadJS는 셀의 각 면에 대해 테두리 색상을 설정하여 테두리를 사용자 정의할 수 있도록 지원합니다.

setBorder 메서드를 사용하여 테두리를 설정할 수 있습니다. 또한 borderBottom, borderTop, borderRight, borderLeft 메서드를 사용하여 셀 테두리를 설정할 수도 있습니다.



아래 코드 샘플은 셀의 테두리 색상을 설정하는 방법을 보여줍니다.

activeSheet.getRange(2, 2, 2, 2, GC.Spread.Sheets.SheetArea.viewport).setBorder(new GC.Spread.Sheets.LineBorder("#8A2BE2", GC.Spread.Sheets.LineStyle.medium), {all:true});
activeSheet.getRange(-1,5, -1, 1).borderTop(new GC.Spread.Sheets.LineBorder("#F0FFFF",GC.Spread.Sheets.LineStyle.medium));
activeSheet.getRange(-1, 5, -1, 1).borderLeft(new GC.Spread.Sheets.LineBorder("#F5F5DC",GC.Spread.Sheets.LineStyle.medium));
activeSheet.getRange(-1, 5, -1, 1).borderRight(new GC.Spread.Sheets.LineBorder("#FF02FF", GC.Spread.Sheets.LineStyle.dashDot));
activeSheet.getRange(-1, 5, -1, 1).borderBottom(new GC.Spread.Sheets.LineBorder("#FFE4C4",GC.Spread.Sheets.LineStyle.thin));
activeSheet.getRange(5, -1, 1, -1).borderTop(new GC.Spread.Sheets.LineBorder("#A52A2A",GC.Spread.Sheets.LineStyle.mediumDashed));
activeSheet.getRange(5, -1, 1, -1).borderLeft(new GC.Spread.Sheets.LineBorder("#FF02FF",GC.Spread.Sheets.LineStyle.medium));
activeSheet.getRange(5, -1, 1, -1).borderRight(new GC.Spread.Sheets.LineBorder("#5F9EA0", GC.Spread.Sheets.LineStyle.dashDot));
activeSheet.getRange(5, -1, 1, -1).borderBottom(new GC.Spread.Sheets.LineBorder("#6495ED",GC.Spread.Sheets.LineStyle.dotted));

테두리 선 스타일 설정

SpreadJS의 대각선 테두리 기능은 모든 유형의 선 스타일을 지원합니다. 지원되는 선 스타일은 다음과 같습니다:

  • dashDot

  • dashDotDot

  • dashed

  • dotted

  • double

  • empty

  • hair

  • medium

  • mediumDashDot

  • mediumDashDotDot

  • mediumDashed

  • SlantedDashDot

  • thick

  • thin



아래 이미지는 각 셀의 면마다 서로 다른 선 스타일과 색상이 설정된 예를 보여줍니다.

codecellbord.png

window.onload = function()
{
   var spread =
   new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
   var activeSheet = spread.getActiveSheet();
  
   // Set border lines to cell(1,1).
   var cell = activeSheet.getCell(1, 1, GC.Spread.Sheets.SheetArea.viewport);
   cell.borderLeft(new GC.Spread.Sheets.LineBorder("Red", GC.Spread.Sheets.LineStyle.thick));
   cell.borderTop(new GC.Spread.Sheets.LineBorder("Blue", GC.Spread.Sheets.LineStyle.double));
   cell.borderRight(new GC.Spread.Sheets.LineBorder
   ("Green", GC.Spread.Sheets.LineStyle.dashDot));
   cell.borderBottom(new GC.Spread.Sheets.LineBorder
   ("Yellow", GC.Spread.Sheets.LineStyle.mediumDashed));
}

위에 언급된 선 스타일 외에도, 대각선 테두리는 JSON 직렬화/역직렬화, Excel I/O, PDF 내보내기(인쇄용)를 지원합니다.

셀에 대각선 설정하기

복잡한 데이터 헤더를 구성할 때, 셀에 대각선 테두리를 설정하여 시각적으로 구분할 수 있습니다.

셀 또는 셀 범위에 대각선을 설정하려면 diagonalUp 메서드와 diagonalDown 메서드를 사용할 수 있습니다.

  • diagonalUp 메서드는 셀의 오른쪽 위에서 왼쪽 아래 방향으로 선을 나타냅니다. (아래 그림의 노란 선 참조)

  • diagonalDown 메서드는 셀의 왼쪽 위에서 오른쪽 아래 방향으로 선을 나타냅니다. (아래 그림의 녹색 선 참조)sk ChatGPT



다음 코드 샘플은 셀에 대각선을 설정하는 방법을 보여줍니다.

var sheet = spread.getActiveSheet();
var cell = sheet.getCell(1, 1);
cell.diagonalDown(new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.thick));
cell = sheet.getCell(1, 3);
cell.diagonalDown(new GC.Spread.Sheets.LineBorder("green" ,GC.Spread.Sheets.LineStyle.double));
cell.diagonalUp(new GC.Spread.Sheets.LineBorder("yellow",GC.Spread.Sheets.LineStyle.double));

눈금선 옵션 설정

SpreadJS는 options.gridline 속성을 통해 눈금선의 색상을 설정하고, 위젯에서 수평 또는 수직 눈금선을 표시할지를 지정할 수 있습니다. 기본적으로 시트는 수직 및 수평 눈금선을 모두 표시하며, 기본 눈금선 색상은 #d0d7e5입니다.

다음 코드 샘플은 눈금선의 표시 여부와 색상을 설정하는 방법을 보여줍니다.

worksheet.options.gridline = {color:"#FF2235", showVerticalGridline: true, showHorizontalGridline: false};