개요
RealGrid2에서 필드와 컬럼은 데이터를 표시하는데 사용됩니다.
- DataField: 데이터 저장을 위한 논리적 장소를 담당하는 객체입니다.
- DataColumn: DataField의 정보를 화면에 표현하기 위한 속성을 담고 있는 객체입니다.
필드 정의
필드 정의 시 객체 배열 형식을 가져야 하며 각 객체는 한개의 필드로 구성됩니다.
gridView.setFields([
{
fieldName: "KorName",
dataType: "text",
},
{
fieldName: "Gender",
dataType: "text",
},
{
fieldName: "Age",
dataType: "number",
},
{
fieldName: "OrderDate",
dataType: "datetime",
},
]);기본설정
- fieldName: 가져올 데이터의 Key 값과 동일한 이름으로 지정합니다.
- dataType: 가져오는 데이터의 데이터 타입을 정의합니다.
- 데이터 타입 종류 :
text : 텍스트(기본 값)
number : 숫자
datetime : 날짜
boolean : boolean
자주 사용하는 옵션
- booleanFormat : Boolean 형식의 값일 때 서식
- datetimeFormat : 날짜 형식의 값일 때 서식
- valueExpression : calculated 필드일 경우 사용될 수식
- valueCallback : calculated 필드일 경우 수식을 지정하여 계산 될 콜백
컬럼 정의
컬럼 정의 시 객체 배열 형식을 가져야 하며 각 객체는 한개의 컬럼으로 구성됩니다.
gridView.setColumns([
{
name: "KorName",
fieldName: "KorName",
width: "60",
header: {
text: "이름",
},
},
{
name: "Gender",
fieldName: "Gender",
width: "40",
header: {
text: "성별",
},
},
{
name: "Age",
fieldName: "Age",
width: "40",
header: {
text: "나이",
},
},
{
name: "OrderDate",
fieldName: "OrderDate",
width: "100",
header: {
text: "전화번호",
},
},
]);자주 사용하는 속성
- name: 사용할 컬럼명을 설정합니다.
- fieldName: 컬럼과 연동할 필드명을 설정합니다.
- checked : 헤더 체크박스 체크 여부
- fillWidth : 컬럼 그룹 내 너비
- footer : 컬럼 푸터 (여러 개 있을 경우 첫 번째 아이템)
- footers : 컬럼 푸터 컬렉션 오브젝트
- groupFooter : 그룹 푸터 (여러 개일 경우 첫번째 아이템)
- groupFooters : 그룹 푸터 컬렉션 오브젝트.
- header : 컬럼 헤더
- headerSummaries : 헤더 Summary 컬렉션 오브젝트.
- headerSummary : 헤더 Summary (여러 개일 경우 첫 번째 아이템)
- width : 컬럼 너비
- visible : 컬럼 표시 여부
- renderer : 렌더러
- styleName : 스타일 클래스 명
- editButtonVisibility : 셀 편집기 버튼의 표시 방법
gridView.setColumns([
{
fieldName: "field1",
name: "column1",
editor: {
type: "dropdown",
},
editButtonVisibility: "always", //always: 항상표시
},
]);- editor : 편집기
- exportStyleName : excel로 export될때 사용될 스타일 명
- numberFormat : 컬럼에 지정되어 있는 숫자 형식의 값일 때 표시되는 서식 천단위기호,소수점을 변경하는 경우 ;로 구분해서 지정.
- popupMenu : 팝업메뉴
- button : 데이터 셀 우측에 표시할 버튼
- buttonVisibility : 컬럼 버튼의 표시 방법
- datetimeFormat : 컬럼에 지정되어 있는 날짜 형식의 값일 때 표시되는 서식 undefined이면 GridBase.formatOptions에 지정된 numberFormat이 적용된다.
- labelField : 컬럼 셀에 표시될 값의 목록을 지정하는 필드
- labels : 컬럼 셀에 표시될 값의 목록
- lookupData : values와 labels를 설정한다.
- lookupDisplay : 컬럼 셀에 values 목록 중 셀의 값에 해당하는 위치에 있는 labels 항목의 값의 표시 여부
- lookupKeyFields : lookupKeyFields
- lookupSourceId : 등록한 lookupSourceTree의 id
- readOnly : readOnly 여부
gridView.setColumns([
{
fieldName: "field1",
name: "column1",
readOnly: true, // 읽기 전용
},
]);그리드에서 버튼을 사용하는 방법
그리드에는 여러가지 버튼을 제공하고 있습니다.
각 버튼마다 보여짐의 설정 하실 수 있으며, 각 버튼의 종류 및 가이드는 아래를 참고하세요.
- editButtonVisibility : 그리드 드롭다운 버튼, 날짜 버튼 등
gridView.setColumns([
{
fieldName: "field1",
name: "column1",
editor: {
type: "dropdown", // 또는 "date"
},
editButtonVisibility: "always", // 항상표시
},
]);editButtonVisibility 속성의 옵션 종류
- always : 항상 표시
- default : 마우스가 셀 위에 있거나, 셀을 선택한 상태에서만 표시
- hidden : 표시하지 않음
- rowfocused : 행이 선택된 상태에서 표시
- visible : 셀을 선택한 상태에서 표시
- buttonVisibility : 셀버튼, 팝업버튼
gridView.setColumns([
{
fieldName: "field1",
name: "column1",
button: "action", // 셀 버튼 적용
// button : "popup" // 팝업 버튼 적용
buttonVisibility: "always", // 항상표시
},
]);buttonVisibility 속성의 옵션 종류
- always : 항상 표시
- default : 마우스가 셀 위에 있거나, 셀을 선택한 상태에서만 표시
- hidden : 표시하지 않음
- rowfocused : 행이 선택된 상태에서 표시
- visible : 셀을 선택한 상태에서 표시
- 렌더러 버튼 버튼 렌더러는 renderer.type = "button" 으로 지정하면 사용할 수 있습니다.
gridView.setColumns([
{
fieldName: "field1",
name: "column1",
editable: false,
renderer: {
type: "button", // 렌더러 버튼 적용
},
},
]);버튼 렌더러 클릭 시 onCellItemClicked이벤트가 발생하게 됩니다.
해당 이벤트를 통해 원하는 동작을 구현 해보시기 바랍니다.
gridView.onCellItemClicked = function (grid, index, clickData) {
alert(clickData.value + " 버튼이 클릭 되었습니다.");
return true;
};자주 사용하는 콜백함수
조건에 따라 셀버튼, 팝업 버튼이 보여지길 원할 때
조건에 따라 셀 버튼 또는 팝업 버튼을 숨기거나 보여지길 원하는 경우 아래와 같이 buttonVisibleCallback을 사용 하실 수 있습니다.
buttonVisibleCallback을 사용하는 경우, buttonVisibility 속성은 무시되기 때문에 해당 콜백함수내에서 버튼이 보여지는 조건은 직접 설정 해주셔야 합니다.
gridView.setColumns([
{
fieldName: "field1",
name: "column1",
button: "action", // 셀 버튼 적용
buttonVisibleCallback: function (grid, index, focused, mouseEntered) {
return (grid.getValue(index.itemIndex, index.fieldName) === "AAA" &&(focused || mouseEntered));
},
},
]);특정 조건에 따라 컬럼에 스타일을 적용 할 때
특정 조건에 따라 컬럼에 css 스타일이나 editable 등 속성을 적용하는 경우 styleCallback을 통해 구현 하실 수 있습니다.
gridView.setColumns([
{
fieldName: "field1",
name: "column1",
styleCallback: (grid, dataCell) => {
if(dataCell.value === "AAA"){
return {styleName: 'font-theme', editable : false}
}
}
},
]);화면에 표시하는 값을 조건에 따라 설정 할 때
화면에 표시하는 값을 조건에 따라 설정하고 싶은 경우 다음과 같이 displayCallback을 통해 설정 하실 수 있습니다.
gridView.setColumns([
{
fieldName: "field1",
name: "column1",
displayCallback: (grid, index, value) => {
if(value === "AAA"){
return "Ax3"
}
}
},
]);클릭 이벤트
그리드 셀이 클릭되었음을 알리는 콜백
- 이벤트 2번째 파라미터를 통해 클릭된 위치(type)를 가져오실 수 있습니다.
onCellClicked
gridView.onCellClicked = function (grid, clickData) {
console.log("onCellClicked: " + JSON.stringify(clickData));
};그리드 셀이 더블 클릭되었음을 알리는 콜백
- 이벤트 2번째 파라미터를 통해 클릭된 위치(type)를 가져오실 수 있습니다.
onCellDblClicked
gridView.onCellDblClicked = function (grid, clickData) {
console.log("onCellDblClicked: " + JSON.stringify(clickData));
};그리드 셀에 포함된 엘리먼트가 클릭되었음을 알리는 콜백
- 이벤트 2번째 파라미터를 통해 클릭된 위치(type)를 가져오실 수 있습니다.
onCellItemClicked
gridView.onCellItemClicked = function (grid, index, clickData) {
console.log("onCellItemClicked: " + JSON.stringify(clickData));
return true;
};사용자가 checkBar의 Header를 클릭하여 전체선택, 해제를 하거나 또는 checkAll true / false 을 입력하여 전체선택, 해제를 했음을 알리는 콜백
onItemAllChecked
gridView.onItemAllChecked = function (grid, checked) {
console.log("onItemAllChecked: " + checked);
};사용자가 checkBar의 체크박스를 클릭하거나 checkItem을 호출하여 체크를 변경했음을 알리는 콜백
onItemChecked
gridView.onItemChecked = function (grid, itemIndex, checked) {
console.log("onItemChecked: " + checked + " at " + itemIndex);
};사용자가 checkBar의 체크박스를 클릭하거나 checkItem을 호출하여 체크를 변경했음을 알리는 콜백
onItemsChecked
gridView.onItemsChecked = function (grid, items, checked) {
console.log(
"onItemChecked: " + items.join() + " are checked as " + checked
);
};SearchCellEditor 에서 버튼을 클릭했음을 알리는 콜백
onSearchCellButtonClick
gridView.onSearchCellButtonClick = function (grid, index, text) {
console.log("onSearchCellButtonClick: " + " button was clicked!");
};컬럼 순서 및 컬럼 방향 등을 설정하는 방법
리얼그리드에서는 컬럼 순서 및 컬럼 방향 등을 설정하는 것을 컬럼 레이아웃(컬럼 그룹핑)이라고 합니다.
레이아웃 관련 자세한 예제는 여기에서 확인해보실 수 있습니다.
const layout = [
{
name: "companyGroup",
direction: "horizontal", // horizontal or vertical
items: ["Country", "CompanyName"],
header: {
text: "Company",
},
},
"OrderID",
"CustomerID",
"EmployeeID",
"OrderDate",
"Phone",
];
gridView.setColumnLayout(layout);
레이아웃 적용 시 자주 사용하는 속성
- column : 컬럼명
- direction : 셀 배치 방향
- header : 헤더의 레이아웃 설정 정보
- hideChildHeaders : 하위 레이아웃의 헤더 숨김 여부
- items : 하위 레이아웃 아이템들
- visible : 표시 여부
- width : 너비
- name : 레이아웃 명
컬럼 정보를 변경하는 방법
설정되어 있는 컬럼 정보를 변경하는 방법은 여러가지가 있습니다.
const columns = [
{
name: "KorName",
fieldName: "KorName",
width: "60",
header: {
text: "이름",
},
editable: true,
},
{
name: "Gender",
fieldName: "Gender",
width: "40",
header: {
text: "성별",
},
editable: false,
},
];위와 같이 컬럼이 설정되어 있을 때
- 컬럼명(name)으로 컬럼 헤더 텍스트와 편집여부를 변경
gridView.columnByName("KorName").header.text = "이름 컬럼 헤더 텍스트 변경";
gridView.columnByName("KorName").editable = false;- 필드명(fieldName)으로 컬럼 헤더 텍스트와 편집여부 변경
gridView.columnByField("Gender").header.text = "성별 컬럼 헤더 텍스트 변경";
gridView.columnByField("Gender").editable = true;컬럼 너비 및 순서 변경
일반적인 컬럼의 정보를 변경할땐 위에서 언급한 columnByName()을 사용하고 화면 구성과 관계된 정보는 layoutByName()을 통해 컬럼 레이아웃 설정정보를 변경 하실 수 있습니다.
컬럼 너비 변경
gridView.layoutByName("Column1").cellWidth = 150;컬럼 순서 변경
gridView.layoutByName("Column1").vIndex = 4;컬럼의 배경색상, 폰트 크기 등 style을 변경하는 방법
컬럼의 스타일(폰트 크기, 배경색상 등)을 적용하기 위해 styleName 속성을 통해 설정 하실 수 있습니다.
styleName 에는 다음과 같이 스타일 시트 또는 스타일 태그에 정의해놓은 스타일 클래스를 적용 시켜주시면 됩니다.
// js
gridView.setColumns([
{
name: "Age",
fieldName: "Age",
width: "60",
header: {
text: "나이",
},
styleName:'font-theme2'
},
{
name: "KorName",
fieldName: "KorName",
width: "60",
header: {
text: "이름",
},
styleName:'font-theme1'
},
]);
// css
.font-theme1 {
color: blue;
text-align: right;
background-color: pink;
}
.font-theme2 {
color: red;
text-align: left;
}조건에 따라 컬럼의 편집여부, css style 등을 변경 하는 방법
컬럼의 스타일, 편집 여부 등 각종 조건에 따라 적용 할 수 있도록 styleCallback을 사용하실 수 있습니다. 자세한 가이드는 여기를 참조하세요.
gridView.setColumns([
{
name: "Gender",
fieldName: "Gender",
width: "60",
header: {
text: "성별",
},
styleCallback: (grid, dataCell) => {
if (dataCell.value === "남") {
return { styleName: "font-theme1", editable: false };
}
},
},
]);
// css
.font-theme1 {
color: blue;
text-align: right;
background-color: pink;
}컬럼의 보여지는 값을 변경
화면에 표시하는 값을 설정하기 위해 displayCallback을 사용하실 수 있습니다. 다만, 해당 필드의 dataType이 number 인 경우에는 적용되어 있는 numberFormat을 초기화 시킨 후 사용해 주셔야 합니다.
자세한 가이드는 여기를 참조하세요.
dataType이 text인 경우
//
gridView.setColumns([
{
name: "KorName",
fieldName: "KorName",
width: "60",
header: {
text: "이름",
},
displayCallback: (grid, index, value) => {
return value + " 님";
},
},
]);dataType이 number인 경우
- 단순히 데이터 값 앞 또는 뒤에 문자열을 붙이기 위해선 prefix, suffix 속성을 통해 설정하실 수 있습니다.
//
gridView.setColumns([
{
name: "Amount",
fieldName: "Amount",
width: "60",
header: {
text: "금액",
},
prefix: "$",
},
]);- displayCallback을 사용해야하는 경우에는 아래와 같이 numberFormat을 null로 초기화 시킨 후, 보여지고자 하는 값으로 return 하실 수 있습니다.
gridView.setColumns([
{
name: "Age",
fieldName: "Age",
width: "60",
header: {
text: "나이",
},
numberFormat: null,
displayCallback: (grid, index, value) => {
return '만' value + '세'
}
},
]);
필드 및 컬럼 추가
설정되어 있는 컬럼들 외 컬름을 추가하는 경우 추가할 컬럼의 필드도 같이 추가해야 합니다.
let field = {
fieldName: "EmployeeID",
dataType: "text",
};
dataProvider.addField(field);
let col = {
name: "EmployeeID",
fieldName: "EmployeeID",
width: "90",
header: {
text: "Employee ID",
},
};
gridView.addColumn(col);컬럼 삭제
컬럼 추가와 반대로 removeField()와 removeColumn()을 통해 필드 및 컬럼을 제거하실 수도 있습니다.
gridView.removeColumn("EmployeeID");
dataProvider.removeField("EmployeeID");컬럼 정보 가져오기
생성된 모든 컬럼의 정보를 가져오는 경우
gridView.getColumns();현재 화면에 보여지고 있는 컬럼의 정보만 가져오는 경우
gridView.getDisplayColumns();컬럼명만 가져오는 경우
gridView.getColumnNames();특정 컬럼 props를 가져오는 경우
gridView.getColumnProperty("colName", "renderer");
// or
gridView.columnByName("colName").renderer;컬럼 헤더 및 데이터 줄바꿈
데이터 셀 영역에 줄바꿈을 하기 위해선 white-space css를 통해 다음과 같이 줄바꿈을 설정 하실 수 있습니다. 컬럼 헤더의 내용이 긴 경우, 자동으로 줄바꿈 되게 됩니다.
// js
gridView.setColumns([
{
name: "KorName",
fieldName: "KorName",
width: "60",
header: {
text: "이름"
},
styleName: "multiline-pre-line"
},
]);
// css
// 데이터의 길이가 긴 경우 자동 줄바꿈
.multiline-pre-line {
white-space: pre-line;
}
// 명시적으로 \n 사용시에만 줄바꿈
.multiline-pre {
white-space: pre;
}컬럼 숨기기
컬럼의 visible 속성을 통해 보여짐의 여부를 설정 하실 수 있습니다.
//이름(KorNanme)컬럼의 현재 visible 속성값을 가져오기
var visible = gridView.columnByName("KorName").visible;
//이름(KorName) 컬럼을 표시하지 않음.
gridView.columnByName("KorName").visible = false;
//이름(KorName) 컬럼을 표시.
gridView.columnByName("KorName").visible = true;자세한 정보는 가이드를 참고하세요.