RealGrid HELP4. 정렬(Sort)
들어가며
이번 강좌에서는 피벗화면을 구성하는 행, 열, 값 필드들을 개발자의 의도에 맞게 정렬하는 방법에 대해 알아보도록 하겠습니다.
이론
피벗으로 표시된 데이터들을 원하는 순서대로 보여주기를 원한때 정렬 기능을 사용하여 볼 수 있습니다.
RealPivot에서 정렬 하는 방법은 4가지 방법이 있습니다.
정렬하는 방법 4가지
- setFieldMapping()에 지정하는 PivotField의 sortDir속성에 정렬방향을 지정하는 방법
- setPivotFields()에 지정하는 columns, rows 속성에 지정하는 방법
- sort() 함수로 정렬하는 방법
- 피벗내 Setup UI를 이용한 방법
이전 강좌에서 setPivotFields()를 사용하여 정렬하는것을 잠깐 언급하였었습니다. 이번 강좌에서는 해당 내용을 포함하여 Setup UI를 이용한 방법을 제외한 3가지 방법에 대해 배워 보도록 하겠습니다.
실습
-
setFieldMapping()를 사용하여 고객사 descending, 제품명 ascending, 영업년도 descending, 영업분기 ascending 정렬을 해보도록 하겠습니다.
pivot.setFieldMapping([{ name: "CustomerID", sourceField: "CustomerID", fieldHeader: "고객사", valueEnable: false, sortDir: "descending" }, { name: "ProductName", sourceField: "ProductName", fieldHeader: "제품명", valueEnable: false, sortDir: "ascending" }, { name: "OrderYear", sourceField: "OrderDate", dateType: "year", fieldHeader: "영업년도", valueEnable: false, sortDir: "descending" }, { name: "OrderQuarter", sourceField: "OrderDate", dateType: "quarter", fieldHeader: "영업반기", valueEnable: false, displayLabels: { 1: "1사분기", 2: "2사분기", 3: "3사분기", 4: "4사분기" }, mustValues: [1, 2, 3, 4], sortDir: "ascending" }, { name: "UnitPrice", sourceField: "UnitPrice", fieldHeader: "판매액 합", numberFormat: "#,##0", labelEnable: false }]); pivot.setPivotFields({ columns: [{ name: "OrderYear" }, { name: "OrderQuarter" }], rows: [{ name: "CustomerID" }, { name: "ProductName" }], values: [{ name: "UnitPrice" }] }); pivot.drawView(); -
setPivotFields()를 사용하여 고객사 ascending, 제품명 descending, 영업년도 ascending, 영업분기 descending 정렬을 해보도록 하겠습니다.
pivot.setFieldMapping([{ name: "CustomerID", sourceField: "CustomerID", fieldHeader: "고객사", valueEnable: false }, { name: "ProductName", sourceField: "ProductName", fieldHeader: "제품명", valueEnable: false }, { name: "OrderYear", sourceField: "OrderDate", dateType: "year", fieldHeader: "영업년도", valueEnable: false }, { name: "OrderQuarter", sourceField: "OrderDate", dateType: "quarter", fieldHeader: "영업반기", valueEnable: false, displayLabels: { 1: "1사분기", 2: "2사분기", 3: "3사분기", 4: "4사분기" }, mustValues: [1, 2, 3, 4] }, { name: "UnitPrice", sourceField: "UnitPrice", fieldHeader: "판매액 합", numberFormat: "#,##0", labelEnable: false }]); pivot.setPivotFields({ columns: [{ name: "OrderYear", direction: "ascending" }, { name: "OrderQuarter", direction: "descending" }], rows: [{ name: "CustomerID", direction: "descending" }, { name: "ProductName", direction: "descending" }], values: [{ name: "UnitPrice", expression: "sum" }] }); pivot.drawView(); -
sort()를 사용하여 고객사 descending, 제품명 ascending, 영업년도 descending, 영업분기 ascending 정렬을 해보도록 하겠습니다.
pivot.sort({ column: { method: "label", labels: [ { name: "OrderYear", direction: "descending"}, { name: "OrderQuarter", direction: "ascending"} ] }, row: { method: "value", labels: [ { name: "CustomerID", direction: "descending"}, { name: "ProductName", direction: "ascending"} ] } }); -
sort()를 row value로 descending 정렬. 값에 따라 행 정렬이 일어납니다.
pivot.sort({ row: { method: "value", fieldName: "UnitPrice", direction: "descending" } }); pivot.drawView(); -
sort()를 colum, row value로 descending 정렬, 값에 따라 행과 열의 정렬이 일어납니다.
pivot.sort({ column: { method: "value", fieldName: "UnitPrice", direction: "descending" }, row: { method: "value", fieldName: "UnitPrice", direction: "descending" } }); pivot.drawView();
실행화면
피벗 설정이 완료되지 않은 상태이기 때문에 버튼을 누르기 전까지는 빈 화면만 보입니다.
- 고객사 descending, 제품명 ascending, 영업년도 descending, 영업분기 ascending 정렬
- 고객사 ascending, 제품명 descending, 영업년도 ascending, 영업분기 descending 정렬
- 고객사 descending, 제품명 ascending, 영업년도 descending, 영업분기 ascending 정렬
- row value로 descending 정렬
- column, row value로 descending 정렬
전체 소스코드
SCRIPT
<link rel="stylesheet" type="text/css" href="css/default_blue.css">
<script type="text/javascript" src="scripts/realgridjs-lic.js"></script>
<script type="text/javascript" src="scripts/realgridjs_eval.1.1.27.min.js"></script>
<script type="text/javascript" src="scripts/realgridjs-api.1.1.27.js"></script>
<script type="text/javascript" src="messages/realpivot-messages.js"></script>
<script type="text/javascript" src="scripts/realpivot_eval.1.0.0.min.js"></script>
<script type="text/javascript" src="scripts/jszip.min.js"></script>
<script>
var pivot;
var dataProvider;
$(document).ready( function(){
RealGridJS.setRootContext("/script");
dataProvider = new RealGridJS.LocalDataProvider();
var fields = [{
fieldName: "OrderID"
}, {
fieldName: "CustomerID"
}, {
fieldName: "EmployeeID"
}, {
fieldName: "OrderDate",
dataType: "datetime",
datetimeFormat: "yyyy-MM-dd a hh:mm:ss",
amText: "오전",
pmText: "오후"
}, {
fieldName: "CompanyName"
}, {
fieldName: "Country"
}, {
fieldName: "Phone"
}, {
fieldName: "ProductName"
}, {
fieldName: "QuantityPerUnit"
}, {
fieldName: "Quantity",
dataType: "number"
}, {
fieldName: "UnitPrice",
dataType: "number"
}];
dataProvider.setFields(fields);
var datas = [{
"OrderID":"10248",
"CustomerID":"VINET",
"CustomerID2":"VINAC",
"EmployeeID":"5",
"OrderDate":"1996-01-04 오전 12:00:00",
"RequiredDate":"1996-08-01 오전 12:00:00",
"ShippedDate":"1996-07-16 오전 12:00:00",
"ShipVia":"3",
"Freight":"32.3800",
"ShipName":"Vins et alcools Chevalier\r\nVins et alcools Chevalier\r\nVins et alcools Chevalier",
"ShipAddress":"59 rue de l\u0027Abbaye",
"ShipCity":"Reims",
"ShipRegion":null,
"ShipPostalCode":"51100",
"ShipCountry":"France",
"CompanyName":"Vins et alcools Chevalier\r\n",
"Country":"France",
"Shipping":"True",
"SmallFlag":"http://dev.demo.realgrid.net/img/demo/smallflag/fr.png",
"NormalFlag":"http://dev.demo.realgrid.net/img/demo/normalflag/fr.png",
"Phone":"26.47.15.10",
"ProductName":"Queso Cabrales",
"QuantityPerUnit":"1 kg pkg.",
"Quantity":"1200",
"UnitPrice":"14.0000"
}, {
....
}];
dataProvider.fillJsonData(datas);
$("#btnSort1").click(function () {
pivot.setFieldMapping([{
name: "CustomerID",
sourceField: "CustomerID",
fieldHeader: "고객사",
valueEnable: false,
sortDir: "descending"
}, {
name: "ProductName",
sourceField: "ProductName",
fieldHeader: "제품명",
valueEnable: false,
sortDir: "ascending"
}, {
name: "OrderYear",
sourceField: "OrderDate",
dateType: "year",
fieldHeader: "영업년도",
valueEnable: false,
sortDir: "descending"
}, {
name: "OrderQuarter",
sourceField: "OrderDate",
dateType: "quarter",
fieldHeader: "영업반기",
valueEnable: false,
displayLabels: {
1: "1사분기",
2: "2사분기",
3: "3사분기",
4: "4사분기"
},
mustValues: [1, 2, 3, 4],
sortDir: "ascending"
}, {
name: "UnitPrice",
sourceField: "UnitPrice",
fieldHeader: "판매액 합",
numberFormat: "#,##0",
labelEnable: false
}]);
pivot.setPivotFields({
columns: [{
name: "OrderYear"
}, {
name: "OrderQuarter"
}],
rows: [{
name: "CustomerID"
}, {
name: "ProductName"
}],
values: [{
name: "UnitPrice"
}]
});
pivot.drawView();
});
$("#btnSort2").click(function () {
pivot.setFieldMapping([{
name: "CustomerID",
sourceField: "CustomerID",
fieldHeader: "고객사",
valueEnable: false
}, {
name: "ProductName",
sourceField: "ProductName",
fieldHeader: "제품명",
valueEnable: false
}, {
name: "OrderYear",
sourceField: "OrderDate",
dateType: "year",
fieldHeader: "영업년도",
valueEnable: false
}, {
name: "OrderQuarter",
sourceField: "OrderDate",
dateType: "quarter",
fieldHeader: "영업반기",
valueEnable: false,
displayLabels: {
1: "1사분기",
2: "2사분기",
3: "3사분기",
4: "4사분기"
},
mustValues: [1, 2, 3, 4]
}, {
name: "UnitPrice",
sourceField: "UnitPrice",
fieldHeader: "판매액 합",
numberFormat: "#,##0",
labelEnable: false
}]);
pivot.setPivotFields({
columns: [{
name: "OrderYear",
direction: "ascending"
}, {
name: "OrderQuarter",
direction: "descending"
}],
rows: [{
name: "CustomerID",
direction: "ascending"
}, {
name: "ProductName",
direction: "descending"
}],
values: [{
name: "UnitPrice",
expression: "sum"
}]
});
pivot.drawView();
});
$("#btnSort3").click(function () {
pivot.sort({
column: {
method: "label",
labels: [
{ name: "OrderYear", direction: "descending"},
{ name: "OrderQuarter", direction: "ascending"}
]
},
row: {
method: "label",
labels: [
{ name: "CustomerID", direction: "descending"},
{ name: "ProductName", direction: "ascending"}
]
}
});
pivot.drawView();
});
$("#btnSort4").click(function () {
pivot.sort({
row: {
method: "value",
fieldName: "UnitPrice",
direction: "descending"
}
});
pivot.drawView();
});
$("#btnSort5").click(function () {
pivot.sort({
column: {
method: "value",
fieldName: "UnitPrice",
direction: "descending"
},
row: {
method: "value",
fieldName: "UnitPrice",
direction: "descending"
}
});
pivot.drawView();
});
});
</script>
HTML
<div id="realpivotDiv" style="width: 100%; height: 500px;"></div> <p></p> 1. <button type="button" class="btn btn-primary btn-xs" id="btnSort1">setFieldMapping()</button>고객사 descending, 제품명 ascending, 영업년도 descending, 영업분기 ascending 정렬 2. <button type="button" class="btn btn-primary btn-xs" id="btnSort2">setPivotFields()</button>고객사 ascending, 제품명 descending, 영업년도 ascending, 영업분기 descending 정렬 3. <button type="button" class="btn btn-primary btn-xs" id="btnSort3">sort()</button>고객사 descending, 제품명 ascending, 영업년도 descending, 영업분기 ascending 정렬 4. <button type="button" class="btn btn-primary btn-xs" id="btnSort4">sort()</button>row value로 descending 정렬 5. <button type="button" class="btn btn-primary btn-xs" id="btnSort5">sort()</button>column, row value로 descending 정렬