기본 JavaScript 스프레드시트 포맷:셀 포맷
23836 단어 excelformattingwebdevjavascript
Syncfusion JavaScript Spreadsheet의 셀 형식 기능을 사용하면 셀 또는 셀 범위의 글꼴, 문자, 색상, 굵은 글꼴 또는 기울임꼴 등의 속성을 변경할 수 있습니다.
대형 워크시트를 처리할 때 텍스트를 포맷하면 데이터의 가시성을 향상시키는 데 도움이 된다.스프레드시트 컨트롤에서 사용할 수 있는 다양한 유형의 셀 형식 옵션은 다음과 같습니다.
글꼴 스타일
모든 글꼴과 스타일은 특정한 용도가 있다.그것은 우리가 전자 표에 표시하려고 하는 내용의 기조를 직접 반영했다.Syncfusion JavaScript 스프레드시트는 글꼴 시리즈, 글꼴 크기, 굵기, 기울임꼴, 색상, 밑줄 등 다양한 사용자 정의 글꼴 스타일 옵션을 지원합니다.
기본 글꼴 시리즈는 Calibri**이고 기본 글꼴 크기는 11pt**입니다.
텍스트 정렬
텍스트 정렬은 셀의 텍스트를 다시 정렬하는 데 사용됩니다.기본 텍스트 정렬은 l*eft*****세 가지 정렬 옵션이 있습니다.
수직 정렬
수직 정렬은 셀에서 텍스트를 수직으로 정렬하는 데 사용됩니다.기본 수직 정렬은 아래쪽입니다.트리 정렬 옵션이 있습니다.
채우기 색상
채우기 색상은 특정 셀이나 셀 범위에 대한 주의를 끄는 데 도움이 됩니다.계산 공식이나 특정 값의 결과를 강조표시할 수 있습니다.스프레드시트 컨트롤의 리본에 있는 홈 탭에서 색상 채우기 옵션을 찾을 수 있습니다.
국경
Excel 워크시트에 테두리를 추가하는 것은 테이블 데이터로 표시할 특정 데이터를 강조 표시하는 가장 간단한 방법입니다.스프레드시트에서 사용할 수 있는 다양한 유형의 테두리 옵션은 다음과 같습니다.
유형
행동
상단 테두리
셀이나 셀 범위의 위 테두리를 지정합니다.
왼쪽 테두리
셀 또는 셀 범위의 왼쪽 테두리를 지정합니다.
오른쪽 테두리
셀 또는 셀 범위의 오른쪽 테두리를 지정합니다.
하단 테두리
셀 또는 셀 범위의 아래 테두리를 지정합니다.
테두리 없음
셀이나 셀 영역의 테두리를 지울 수 있습니다.
모든 테두리
셀이나 셀 범위의 모든 테두리를 지정합니다.
수평 테두리
셀이나 셀 범위의 위쪽 테두리와 아래쪽 테두리를 지정합니다.
수직 테두리
셀이나 셀 범위의 왼쪽 테두리와 오른쪽 테두리를 지정합니다.
외부 경계
셀 범위의 외부 경계를 지정합니다.
내부 테두리
일련의 셀의 내부 테두리를 지정합니다.
테두리의 색상, 크기 및 스타일도 변경할 수 있습니다.스프레드시트에서 지원되는 다양한 유형의 치수 및 스타일은 다음과 같습니다.
유형
행동
얇다
1 픽셀 테두리 크기(기본값)를 지정합니다.
중등적
2 픽셀의 테두리 크기를 지정합니다.
두터웠어
3 픽셀의 테두리 크기를 지정합니다.
고체
솔리드 테두리를 만드는 데 사용됩니다(기본값).
점선
점선 테두리를 만드는 데 사용됩니다.
널리 퍼져 있었어
점선 테두리를 만드는 데 사용됩니다.
이중적
이중 테두리를 만드는 데 사용됩니다.
줄 바꾸기 문자
줄 바꿈 문자를 사용하면 하나의 셀에 여러 줄로 큰 내용을 표시할 수 있습니다.기본적으로 줄 바꿈 문자 지원이 활성화되어 있습니다.
allowWrap 속성을 사용하면 스프레드시트 구성 요소의 줄 바꿈 텍스트 지원을 사용하거나 사용하지 않습니다.
셀 병합
셀 병합을 사용하면 같은 행이나 열의 두 개 이상의 셀을 하나의 셀로 병합할 수 있습니다.여러 개의 값이 있는 셀을 결합하면 왼쪽 상단의 셀 데이터는 결합된 셀의 데이터가 됩니다.
기본적으로 셀 결합 옵션이 활성화되어 있습니다.제목이 스프레드시트의 특정 부분에 가운데에 있을 때 일반적으로 사용됩니다.
allowMerge 속성을 사용하여 스프레드시트에서 셀 병합 옵션을 사용하거나 사용하지 않습니다.
셀 스타일은 어디에서 찾을 수 있습니까?
리본의 홈 탭에서 셀 형식 옵션을 찾을 수 있습니다.옵션은 다음 화면 캡처와 같이 글꼴, 색상, 채우기 색상 및 테두리를 포함합니다.
기본 탭의 셀 형식 옵션코드를 통해 스프레드시트에 셀 형식 추가
JavaScript 스프레드시트 컨트롤에서cellFormat과setBorder 공통 방법을 사용하여 형식 옵션과 범위를 각각 전달하고 코드를 통해 셀 형식을 추가할 수 있습니다.또한 스타일 속성을 사용하여 셀 객체에서 셀 형식 문자열을 설정할 수 있습니다.
다음 코드 예시는 단원격 형식을 보여 줍니다.
/**
* Cell formatting sample
*/
let columns: ColumnModel[] = [{ width: 80 }, { width: 140 }, { width: 100 }, { width: 232 }, { width: 120 }, { width: 100 },
{ width: 100 }, { width: 120 }, { width: 80 }];
let rows: RowModel[] = [
{
height: 36,
//Applying cell formatting through cell binding.
cells: [{ style: { textAlign: 'right' } }, { style: { textIndent: '2pt' } }, { style: { textAlign: 'right' } },
{ style: { textIndent: '2pt' } }, { index: 5, style: { textAlign: 'right' } },
{ index: 7, style: { textAlign: 'center' } }, { index: 8, style: { textAlign: 'right' } }]
}, { height: 42 }, { height: 42 }, { height: 42 }, { height: 42 }, { height: 42 },
{ height: 42 }, { height: 42 }, { height: 42 }, { height: 42 }, { height: 42 }, { height: 42 }, { height: 42 }, { height: 42 },
{ height: 42 }, { height: 42 }];
let sheet: SheetModel[] = [{
name: 'Order Details',
ranges: [{ dataSource: (dataSource as any).orderDetails }],
columns: columns,
rows: rows,
showGridLines: false
}];
//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
sheets: sheet,
showFormulaBar: false,
showRibbon: false,
created: createdHandler,
beforeCellRender: beforeCellRender
});
spreadsheet.appendTo('#spreadsheet');
function createdHandler(): void {
//Applying cell formatting dynamically using cellFormat method
spreadsheet.cellFormat({ fontWeight: 'bold', backgroundColor: '#4b5366', color: '#ffffff', fontSize: '12pt' }, 'A1:I1');
spreadsheet.cellFormat({ fontWeight: 'bold', textIndent: '2pt' }, 'B2:B16');
spreadsheet.cellFormat({ fontStyle: 'italic', textIndent: '2pt' }, 'D2:D16');
spreadsheet.cellFormat({ textIndent: '2pt' }, 'E1:E16');
spreadsheet.cellFormat({ textIndent: '2pt' }, 'G1:G16');
spreadsheet.cellFormat({ textAlign: 'center', fontWeight: 'bold' }, 'H2:H16');
spreadsheet.cellFormat({ fontFamily: 'Helvetica New', verticalAlign: 'middle' }, 'A1:I16');
//Applying border to a range
spreadsheet.setBorder({ border: '1px solid #e0e0e0' }, 'A1:I16', 'Outer');
spreadsheet.setBorder({ border: '1px solid #e0e0e0' }, 'A2:I15', 'Horizontal');
}
function beforeCellRender(args: CellRenderEventArgs): void {
if (!spreadsheet.isOpen && spreadsheet.activeSheetIndex === 0) {
if (args.cell && args.cell.value) {
//Applying cell formatting before rendering the particular cell
switch (args.cell.value) {
case 'Delivered':
spreadsheet.cellFormat({ color: '#10c469', textDecoration: 'line-through' }, args.address);
break;
case 'Shipped':
spreadsheet.cellFormat({ color: '#62c9e8' }, args.address);
break;
case 'Pending':
spreadsheet.cellFormat({ color: '#FFC107', textDecoration: 'underline' }, args.address);
break;
case 'Cancelled':
spreadsheet.cellFormat({ color: '#ff5b5b' }, args.address);
break;
}
}
}
}
코드를 통해 서식이 지정된 스프레드시트결론
나는 당신이 지금 Syncfusion JavaScript Spreadsheet 컨트롤의 단원격 형식 기능을 더욱 잘 이해할 수 있기를 바랍니다.다음 포맷 블로그에서는 조건 포맷 기능이나 스프레드시트에서 원하는 기타 기능에 대해 논의할 수 있습니다.아래의 평론 부분에서 당신의 생각을 공유하세요.
Syncfusion 사용자인 경우 Essential Studio for JavaScriptproduct setup를 다운로드하여 이 컨트롤을 시험적으로 사용할 수 있습니다.그렇지 않으면 무료로 다운로드할 수 있습니다 30-day trial.
이러한 기능에 대해 궁금한 점이 있으시면 저희 support forums, Direct-Trac 또는 feedback portal 로 연락 주십시오.우리는 기꺼이 당신을 도울 것입니다!
Reference
이 문제에 관하여(기본 JavaScript 스프레드시트 포맷:셀 포맷), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/syncfusion/formatting-the-essential-javascript-spreadsheet-cell-formatting-2h0e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
