ASP.NET Core용 FlexGrid에서 계산된 열 만들기
페이지 정보
작성자 GrapeCity
작성일 2021-08-13 14:37 조회 4,359회
댓글 0건
본문
관련링크
계산된 열이 이를 달성하는 방법 중 하나입니다. 이러한 열 또는 필드는 런타임에 계산되어 적절히 표시될 수 있습니다.
예를 들어 할인과 함께 각 국가의 총 매출이 포함된 데이터 집합에서 금액 및 할인 열을 사용하여 런타임에 총 수익을 계산할 수 있습니다.
마찬가지로 해당 매출에 부과되는 세금도 수익 필드를 사용하여 계산할 수 있습니다.
ComponentOne FlexGrid의 계산된 필드
ComponentOne FlexGrid는 다음 두 가지 메서드를 사용하여 계산된 필드도 지원합니다.
FormatItem 이벤트를 사용한 필드 바인딩 해제
이런 식으로 계산된 열의 이름을 가져오고 현재 항목에 따라 계산된 값을 반환하는 계산된 필드 함수를 만들 수 있으며 그 결과는 formatItem 이벤트를 사용하여 FlexGrid에 표시될 수 있습니다.
Collection View의 계산된 필드를 사용합니다.
ComponentOne MVC Core 버전의 2021v1에서는 계산된 필드를 CollectionView에 추가하는 데 자주 사용되는 BaseCollectionViewService에 새 CalculatedFields 속성이 추가되었습니다.
이름과 해당 값을 계산하는 식(함수)을 제공하여 계산된 필드를 만들 수 있습니다.
이제 이 필드를 다른 열로 사용할 수 있습니다. 이 필드가 사용되는 곳마다 Collection View에서 계산된 값을 제공합니다. CalculatedFields 속성은 계산된 필드의 목록을 사용합니다.
계산된 필드는 더 나은 구현 메서드를 제공하는 것 외에도 FlexChart, OLAP 등과 같은 다른 컨트롤과 함께 사용할 수 있습니다.
에서 데모를 확인하세요.
FlexGrid의 바인딩 해제된 계산된 열
바인딩 해제된 계산된 열을 만들려면 먼저 항목에 따라 계산된 값을 반환하는 개체를 만듭니다.
const calcFields = {
Description: (item) => wijmo.format("This {Product} is of {Color} color", item),
Revenue: (item) => item.Amount * (1 - item.Discount),
Tax: (item) => calcFields.Revenue(item) * 0.1
}여기에 설명, 수익, 세금의 세 가지 계산된 필드가 추가됩니다.
각 필드에는 현재 항목을 매개 변수로 사용하여 계산된 값을 반환하는 함수가 있습니다. 세금 필드는 다른 계산된 필드를 사용하여 값을 계산합니다.
이제 FormatItem 이벤트에 대한 처리기를 만들어 계산된 열의 값을 업데이트합니다.
const calcFormatter = (s, e) => {
if (s.editRange) {
return;
}
if (s.cells === e.panel) {
let col = s.columns[e.col];
let header = col.header;
if (calcFields[header]) {
let item = s.rows[e.row].dataItem;
let calcValue = calcFields[header](item);
e.cell.textContent = wijmo.Globalize.format(calcValue, col.format);
s.setCellData(e.row, e.col, calcValue, false, false);
}
}
}처리기에서 현재 헤더가 계산된 필드인지 확인합니다.
그렇다면 현재 항목을 매개 변수로 사용하여 해당 함수를 호출하고 셀의 textContent뿐만 아니라 셀도 결과로 설정합니다.
그런 다음 FlexGrid를 만들고 이 함수에 formatItem을 할당할 수 있습니다. 열을 만들고 계산된 열의 올바른 헤더를 제공해야 합니다.
<c1-flex-grid auto-generate-columns="false" format-item="calcFormatter" id="unboundCalculated">
<c1-items-source source-collection="Model"></c1-items-source>
<c1-flex-grid-column binding="ID" is-read-only="true" width="40" align="center"></c1-flex-grid-column>
<c1-flex-grid-column binding="Country"></c1-flex-grid-column>
<c1-flex-grid-column binding="Product"></c1-flex-grid-column>
<c1-flex-grid-column binding="Color"></c1-flex-grid-column>
<c1-flex-grid-column header="Description" width="400" is-read-only="true"></c1-flex-grid-column>
<c1-flex-grid-column binding="Amount" format="c2"></c1-flex-grid-column>
@*calculated columns*@
<c1-flex-grid-column binding="Discount" format="p0"></c1-flex-grid-column>
<c1-flex-grid-column header="Revenue" format="c2" align="right" is-read-only="true"></c1-flex-grid-column>
<c1-flex-grid-column header="Tax" format="c2" align="right" is-read-only="true"></c1-flex-grid-column>
</c1-flex-grid>
셀을 편집이 계산된 필드를 어떻게 자동으로 업데이트하는지 확인하세요.
CollectionView를 사용하여 계산된 열
CollectionView에서 계산된 필드를 생성하려면 c1-calculated-field 태그를 사용하여 데이터 소스를 초기화하는 동안 계산된 필드 목록을 제공하면 됩니다.
<c1-items-source id="calculatedFld" source-collection="Model"> <c1-calculated-field name="Description" expression="'This ' + $.Product + ' is of ' + $.Color + ' color'"></c1-calculated-field> <c1-calculated-field name="Revenue" expression="$.Amount * (1 - $.Discount)"></c1-calculated-field> <c1-calculated-field name="Tax" expression="$.Revenue * 0.1"></c1-calculated-field> </c1-items-source>
여기서는 소스 데이터를 모델에 바인딩하고 계산된 필드 3개를 추가했습니다. $ 기호는 현재 항목에 대한 참조를 포함합니다. 이제 이를 FlexGrid의 데이터 소스로 간단히 설정할 수 있습니다.
<c1-flex-grid auto-generate-columns="false" id="boundCalculated" items-source-id="calculatedFld"> <c1-flex-grid-column binding="ID" is-read-only="true" width="40" align="center"></c1-flex-grid-column> <c1-flex-grid-column binding="Country"></c1-flex-grid-column> <c1-flex-grid-column binding="Product"></c1-flex-grid-column> <c1-flex-grid-column binding="Color"></c1-flex-grid-column> <c1-flex-grid-column binding="Description" width="400" is-read-only="true"></c1-flex-grid-column> <c1-flex-grid-column binding="Amount" format="c2"></c1-flex-grid-column> <c1-flex-grid-column binding="Discount" format="p0"></c1-flex-grid-column> <c1-flex-grid-column binding="Revenue" format="c2" align="right" is-read-only="true"></c1-flex-grid-column> <c1-flex-grid-column binding="Tax" format="c2" align="right" is-read-only="true"></c1-flex-grid-column> </c1-flex-grid>
계산된 필드는 모든 단순 필드와 동일한 바인딩 속성을 사용하여 FlexGrid에 표시할 수 있습니다.
표시되는 결과에서 시각적 차이는 눈에 띄지 않지만, 이러한 구현은 바인딩 해제된 계산된 열보다 훨씬 쉽고 빠릅니다.
이 collection view를 다른 컨트롤과 함께 사용할 수도 있습니다. 예를 들어 다음은 FlexPie를 만들고 각 국가에서 생성된 수익을 표시합니다.
<c1-flex-pie items-source-id="calculatedFld" id="boundChart" binding="Revenue" binding-name="Country">
<c1-flex-pie-datalabel connecting-line="true" position="Outside" content="{Country} - {value:c0}" />
</c1-flex-pie>
계산된 필드 스크린샷에서 볼 수 있듯이 미국의 수익은 0으로 설정되었습니다. 따라서 동일한 데이터 소스에 바인딩된 FlexPie에서도 수익이 업데이트됩니다. 바인딩 해제 및 계산된 열을 사용하는 동안에는 이러한 유형의 동기화가 불가능합니다.
이 블로그에 사용된 샘플은 에서 다운로드할 수 있습니다.
|
지금 바로 ComponentOne을 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
