고급 그룹

새 창에서 데모를 열어 디자이너 열기

고급 그룹 인터페이스는 다음과 같습니다.

type GroupCell = DataCellBase & {
    type: 'Group';
    bins?: IGroupBin[];
    formula?: string;
};
interface IGroupBin {
    caption: string;
    groupBy: string; // formula string
    stopIfTrue?: boolean; // whether one record matches this rule then keep going to match other rules, default is true
    alwaysVisible?: boolean; // whether this rule is visible when there is no record matches this rule, default is false
}

고급 그룹화 방법은 여러 가지가 있습니다.

1. 규칙별 그룹화

   사용자가 여러 고급 규칙을 추가하여 서로 다른 레코드를 일치시킬 수 있습니다.

   const spread = new GC.Spread.Sheets.Workbook('ss', { sheetCount: 1 });
   const salesTable = spread.dataManager().addTable('Sales', {
       remote: {
           read: {
               url: 'https://developer.mescius.com/spreadjs/demos/server/api/Sales'
           }
       }
   });
   salesTable.fetch().then(() => {
       const reportSheet = spread.addSheetTab(0, 'report1', GC.Spread.Sheets.SheetType.reportSheet);
       const templateSheet = reportSheet.getTemplate();
       // set value and binding for the template
       templateSheet.setTemplateCell(1, 0, {
           type: 'Group',
           binding: "Sales[Sales]",
           bins: [ // group data by sales value.
               {caption: "Sales <= 200", groupBy: "=([@Sales] <= 200)"},
               {caption: "Sales > 200 && Sales <= 500", groupBy: "=AND([@Sales] > 200, [@Sales] <= 500)"},
               {caption: "Sales > 500", groupBy: "=([@Sales] > 500)"},
           ]
       });
       templateSheet.setTemplateCell(1, 1, {
           type: 'Group',
           binding: `Sales[Salesman]`,
       });
       templateSheet.setTemplateCell(1, 2, {
           type: 'Group',
           binding: `Sales[Sales]`,
       });
       templateSheet.setTemplateCell(1, 3, {
           type: 'Group',
           binding: `Sales[Product]`,
       });
       reportSheet.refresh();
   });
   

2. 수식별 그룹화

   사용자가 수식을 사용하여 모든 레코드를 계산한 다음 수식의 계산 결과를 기준으로 그룹화할 수도 있습니다.

   const spread = new GC.Spread.Sheets.Workbook('ss', { sheetCount: 1 });
   const salesTable = spread.dataManager().addTable('Orders', {
       remote: {
           read: {
               url: 'https://demodata.mescius.io/northwind/api/v1/orders'
           }
       }
   });
   salesTable.fetch().then(() => {
       const reportSheet = spread.addSheetTab(0, 'report1', GC.Spread.Sheets.SheetType.reportSheet);
       const templateSheet = reportSheet.getTemplate();
       // set value and binding for the template
       templateSheet.setTemplateCell(1, 0, {
           type: 'Group',
           binding: "Orders[OrderDate]",
           formula: '=YEAR([@OrderDate])&"/"&MONTH([@OrderDate])' // group data by year/month
       });
       templateSheet.setTemplateCell(1, 1, {
           type: 'Group',
           binding: `Orders[ShipName]`,
       });
       templateSheet.setTemplateCell(1, 2, {
           type: 'Summary',
           aggregate: "Sum",
           binding: `Orders[Freight]`,
       });
       reportSheet.refresh();
   });