FlexGrid 2019 v3 에서의 열 그룹

추천0

페이지 정보

작성자 GrapeCity

작성일 2019-11-13 08:46 조회 4,385회 댓글 0건

본문

관련링크

FlexGrid는 항상 마스터/세부 정보, 데이터 그룹화, 트리 스타일 그룹화 및 행 세부 사항과 같은 다양한 형식의 계층적 데이터를 지원했습니다. 데이터를 행으로 그룹화하고 해당 그룹을 조작하는 것은 항상 간단했지만, 지금까지는 데이터를 열로 쉽게 그룹화할 수 없었습니다.

이 기능에 대한 수많은 요청을 받았으며, 이를 수행하는 방법을 보여주는 샘플을 만들었지만 상당한 양의 코드가 필요했습니다.

최신 FlexGrid 릴리스에는 사용하기 쉬운 열 그룹에 대한 지원이 추가되었습니다.

예를 들어, 각 항목에 계층 구조 자산 목록이 포함된 데이터가 있다고 가정해보겠습니다.

let data = [  
{  
    name: 'Constant Growth', currency: 'USD',  
    perf: { ytd: .0523, m1: 0.0142, m6: 0.0443, m12: 0.0743 },  
    alloc: { stock: 0.17, bond: 0.32, cash: 0.36, other: 0.15, amount: 23432 }  
}, {  
    name: 'Optimus Prime',  
    currency: 'EUR',  
    perf: { ytd: .0343, m1: 0.043, m6: 0.0244, m12: 0.0543 },  
    alloc: { stock: 0.61, bond: 0.8, cash: 0.9, other: 0.22, amount: 43223 }  
}, {  
    name: 'Crypto Planet',  
    currency: 'BTC',  
    perf: { ytd: .0343, m1: 0.014, m6: 0.034, m12: 0.01243 },  
    alloc: { stock: 0.1, bond: 0, cash: 0, other: 0.9, amount: 2234 }  
}, { …

이 데이터를 쉽게 다음과 같이 FlexGrid에 바인딩 할 수 있습니다.

let theGrid = new FlexGrid('#theGrid', {  
  autoGenerateColumns: false,  
  columns: [  
    { binding: 'name', header: 'Name', width: 150 },  
    { binding: 'currency', header: 'Curr', width: 80, align: 'center' },  
    { binding: 'perf.ytd', header: 'Perf/YTD', format: 'p2', width: 100 },  
    { binding: 'perf.m1', header: 'Perf/1M', format: 'p2', width: 80 },  
    { binding: 'perf.m6', header: 'Perf/6M', format: 'p2', width: 80 },  
    { binding: 'perf.m12', header: 'Perf/12M', format: 'p2', width: 80 },  
    { binding: 'alloc.stock', header: 'Stocks', format: 'p0', width: 80 },  
    { binding: 'alloc.bond', header: 'Bonds', format: 'p0', width: 80 },  
    { binding: 'alloc.cash', header: 'Cash', format: 'p0', width: 80 },  
    { binding: 'alloc.other', header: 'Other', format: 'p0', width: 80 },  
    { binding: 'alloc.amount', header: 'Amount', format: 'c0', width: 100 }  
  ],  
  itemsSource: getFundData()  
});

그리고 다음과 같은 훌륭한 결과를 얻을 수 있습니다. :

FlexGrid의 열 그룹

그러나 최신 버전의 FlexGrid에서는 columnGroups 속성을 계층적 버전의 열 데이터로 설정하면 훨씬 더 나은 결과를 얻을 수 있습니다.

let theGrid = new FlexGrid('#theGrid', {
  autoGenerateColumns: false, 
  columnGroups: [
    { binding: 'name', header: 'Name', width: 150 },
    { binding: 'currency', header: 'Curr', width: 80, align: 'center' },
    { header: 'Perf', align: 'center', collapseTo: 'perf.ytd', columns: [
      { binding: 'perf.ytd', header: 'YTD', format: 'p2', width: 100 },
      { binding: 'perf.m1', header: '1 M', format: 'p2', width: 80 },
      { binding: 'perf.m6', header: '6 M', format: 'p2', width: 80 },
      { binding: 'perf.m12', header: '12 M', format: 'p2', width: 80 }
    ]},
    { header: 'Allocation', align: 'center', collapseTo: 'alloc.amt', columns: [
      { binding: 'alloc.stock', header: 'Stocks', format: 'p0', width: 80 },
      { binding: 'alloc.bond', header: 'Bonds', format: 'p0', width: 80 },
      { binding: 'alloc.cash', header: 'Cash', format: 'p0', width: 80 },
      { binding: 'alloc.other', header: 'Other', format: 'p0', width: 80 },
      { binding: 'alloc.amount', header: 'Amount', format: 'c0', width: 100 }
    ]}
  ],
  itemsSource: getFundData()
});

열 데이터에 다른 열을 포함하는 두 개의 "부모" 열을 추가한 것을 제외하고 열 데이터는 거의 동일합니다.

결과는 다음과 같습니다.

FlexGrid의 열 그룹