시트 내에 헤더 주변이나 푸터 주변에 고정된 행을 생성하여 사용하 실 수 있습니다.
솔리드로 만들어진 행은 시트의 열의 개수나 너비에 영향을 받지 않고 독립적으로 구성됩니다.
[솔리드로 생성된 행 예]
options.Solid = [
{
"id": "mySolidRow", //솔리드 행의 ID 부여
"Space": 5, //솔리드 행의 위치 (아래에 위치 참고)
"Height": 40, //솔리드 행의 높이 설정
"Cells": "Today,Spacer1,DESC,BtnRed,Spacer1,BtnYellow,Spacer2,DESC2,DESC3", //커스텀 셀의 순서
"CanFormula": 1,
"CalcuOrder": "DESC3",
//각 셀의 기능 정의
"Spacer1": { // 중간 공백 셀
Type: "Text",
Width: 3,
CanEdit: 0,
CanFocus: 0
},
"Spacer2": { // 중간 공백 셀 정의
Type: "Text",
Width: 10,
CanEdit: 0,
CanFocus: 0
},
"Today": { //오늘 날짜 셀
Type: "Text",
CanFocus: 0,
CanEdit: 0,
Color: "#334477",
TextColor: "#EEEEEE",
Align: "Center",
Value: "오늘일자 : " + IBSheet.dateToString(new Date(), "yyyy-MM-dd")
},
"DESC": { // 레이블 셀
Type: "Text",
CanFocus: 0,
CanEdit: 0,
Align: "Right",
Width: 120,
Value: "위험도 변경 :"
},
"BtnRed": { //위험 버튼 셀
Type: "Button",
Button: "Button",
Name: "redBtn",
Class: "RED",
Value: "위험",
Width: 40,
OnClick: function (e) {
if (e.row) {
e.row.Color = "#FFAAAA";
e.sheet.refreshRow(e.row);
}
}
},
"BtnYellow": { //주의 버튼 셀
Type: "Button",
Button: "Button",
Name: "yellowBtn",
Class: "YELLOW",
Value: "주의",
Width: 40,
OnClick: function (e) {
if (e.row) {
e.row.Color = "#FFFFAA";
e.sheet.refreshRow(e.row);
}
}
},
"DESC2": { // 레이블 셀
Type: "Text",
Value: "검수까지 남은 기한:",
Align: "Right",
CanFocus: 0,
CanEdit: 0,
Width: 120
},
"DESC3": { // Formula를 이용한 남은기한 계산 셀
Type: "Text",
Color: "#DDD",
Formula: function (f) {
return f.Row ? ((f.Row.DTDY31 - new Date(2018, 1, 23)) / 86400000) + " 일" : "";
},
Width: 120
}
}
];
솔리드 행은 Space 속성 값에 따라 다음과 같이 위치할 수 있습니다.
위치 | Space값 | 생성예 |
---|---|---|
시트 밖 상단 | -1 | ![]() |
시트 안 헤더 위 | 0 | ![]() |
시트 안 헤더 아래 | 1 | ![]() |
시트 안 푸터 위 | 2 | ![]() |
시트 안 푸터 아래 | 3 | ![]() |
시트 안 가로스크롤바 아래 | 4 | ![]() |
시트 밖 하단 | 5 | ![]() |
솔리드 행을 이용하여 그룹행이나 찾기행을 만들어 사용하실 수 있습니다.
다음과 같은 구성을 통해 그룹행을 생성하실 수 있습니다.
그룹행 생성시 열의 헤더셀을 드래그하여 그룹행 위로 드롭하면 해당 열을 기준으로 한 그룹핑이 이루어 집니다.
options.Solid = [
{
"id":"myGroupRow", //솔리드 행의 ID 부여
"Space":0, //솔리드 행의 위치
"Kind":"Group" //솔리드 행의 종류
}
];
찾기 행을 통해 시트 내에 원하는 데이터를 선택하거나 표시할 수 있습니다.
options.Solid = [
{
"Kind": "Search", // 솔리드 행의 종류
"Space": 1, // 솔리드 행의 위치
"id": "searchZone", // 솔리드 행의 ID 부여
Cells: "Expression,Spacer1,Filter,Select,Mark,Find,Clear,Spacer2", // 솔리드 행 내에 Cell 생성.
//Expression, Filter, Select, Mark, Find, FindPrev, Clear는 내장 설정 예약어
Expression: { // 검색하기 위한 expression 설정
Action: "Last", // expression 셀 내용이 변경되었을때 취할 동작에 대한 설정
//Filter,Select,Mark,Find,FindPrev,Last 를 설정할 수 있음(Last는 이전 행동을 계속함.)
Left: "5", // 셀 좌측에 지정한 px 만큼의 빈 공간 생성
MinWidth: "90", // 최소 너비 px 단위
// MaxWidth: "300",
EmptyValue: "<s>검색어를 입력해 주세요</s>" // input의 placeholder 속성과 동일한 기능
},
Spacer1: { // 중간 공백 셀 정의
Width: "10",
Type: "Empty",
CanFocus:0
},
Spacer2: {
Width: "10",
Type: "Empty",
CanFocus:0
},
Filter: { //필터 기능 버튼 (Expression 셀에 입력한 글자를 바탕으로 전체 열에 대해 필터링 실시)
ButtonText: "필터"
},
Select: { //선택 기능 버튼 (Expression 셀에 입력한 글자를 바탕으로 행단위로 선택)
ButtonText: "선택"
},
Mark: { //표시 기능 버튼 (Expression 셀에 입력한 글자를 포함하고 있는 행에 배경색을 변경)
ButtonText: "마킹"
},
Find: { //찾기 기능 버튼 (Expression 셀에 입력한 글자를 포함하고 있는 셀을 찾음. 아래로 계속 찾기 가능)
ButtonText: "찾기"
},
Clear: { //클리어 기능 버튼 (위에서 한 행위(필터,선택,마킹등을 원상복귀))
ButtonText: "클리어",
Width: "50"
}
}
];
product | version | desc |
---|---|---|
core | 8.0.0.0 | 기능 추가 |