피봇 틀고정 > Q&A | 토론

본문 바로가기

SpreadJS

Q&A | 토론

ReactJS 피봇 틀고정

페이지 정보

작성자 yeonjin 작성일 22-08-05 18:21 조회 29회 댓글 0건
제품 버전 : 15.0.6

본문

안녕하세요.


아래 사진과 같이 피봇의 왼쪽과 위 헤더 부분에 틀고정을 적용할 수 있나요?

frozenRowCount() 함수를 사용해서 틀고정을 적용할 수는 있지만

파라미터를 하드코딩 하면 피봇을 추가했을 때 피봇컬럼 또는 로우의 개수의 증가에 따라 틀고정이 동적으로 변하지 않는다는 문제가 있습니다. 


1. 이문제에 대한 해결방법이 있나요?

2. 피봇이 추가될때 발생하는 이벤트 리스너가 있나요?

3. 데이터가 시작하는 포지션을 알 수 있는 함수나 방법이 있나요?




답변 부탁드립니다.

감사합니다

  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

1 답변

ReactJS Re: 피봇 틀고정

페이지 정보

작성자 GCK루카스 작성일 22-08-08 16:48 댓글 0건

본문

안녕하세요 그레이프시티입니다.


틀고정 기능은 시트에 적용되는 것이기 때문에 피벗의 헤더 부분을 틀고정하는 기능을 지원하지는 않습니다.

다만, PivotTableChanged 이벤트와 피벗테이블의 범위와 필드의 개수를 가져와 계산하여 틀고정을 할 수 있습니다.

아래 샘플과 도움말을 참고해 주시기 바랍니다.

window.onload = function () {
  var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 2 });
  initSpread(spread);
  var pivotLayoutSheet = spread.getSheet(0);
  initPivotTable(pivotLayoutSheet);
};

function initSpread(spread) {
  spread.suspendPaint();
  let sheet = spread.getSheet(1);
  sheet.name("DataSource");
  sheet.setRowCount(117);
  sheet.setColumnWidth(0, 120);
  sheet.getCell(-1, 0).formatter("YYYY-mm-DD");
  sheet.getRange(-1,4,0,2).formatter("$ #,##0");
  sheet.setArray(0, 0, pivotSales);
  let table = sheet.tables.add('tableSales', 0, 0, 117, 6);
  for(let i=2;i<=117;i++)
  {
    sheet.setFormula(i-1,5,'=D'+i+'*E'+i)
  }
  table.style(GC.Spread.Sheets.Tables.TableThemes["none"]);
  let sheet0 = spread.getSheet(0);
  sheet0.name("PivotLayout");

  spread.resumePaint();

  sheet0.bind(GC.Spread.Sheets.Events.PivotTableChanged, function (sender, args) {
    if(args.type == "fieldChanged") {
      setTimeout(function() { //피벗테이블 범위가 변경되기까지 시간을 주기 위해
        var pivot = sheet0.pivotTables.get(args.pivotTableName);
        sheet0.frozenColumnCount(pivot.getRange().content.col + pivot.getFieldsByArea(GC.Spread.Pivot.PivotTableFieldType.rowField).length);
        sheet0.frozenRowCount(pivot.getRange().content.row + pivot.getFieldsByArea(GC.Spread.Pivot.PivotTableFieldType.columnField).length+1);
      }, 100);
    }
  });
}

function initPivotTable(sheet) {
  let myPivotTable = sheet.pivotTables.add("myPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.light8);
  myPivotTable.suspendLayout();
  myPivotTable.options.showRowHeader = true;
  myPivotTable.options.showColumnHeader = true;
  myPivotTable.add("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField);
  myPivotTable.add("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.rowField);
  myPivotTable.add("date", "Date", GC.Spread.Pivot.PivotTableFieldType.columnField);
  let groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }] };
  myPivotTable.group(groupInfo);
  myPivotTable.add("total", "Totals", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
  var panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel"));
  panel.sectionVisibility(GC.Spread.Pivot.PivotPanelSection.fields + GC.Spread.Pivot.PivotPanelSection.area);
  myPivotTable.resumeLayout();
  myPivotTable.autoFitColumn();

  //초기 틀고정 설정
  sheet.frozenColumnCount(myPivotTable.getRange().content.col + myPivotTable.getFieldsByArea(GC.Spread.Pivot.PivotTableFieldType.rowField).length);
  sheet.frozenRowCount(myPivotTable.getRange().content.row + myPivotTable.getFieldsByArea(GC.Spread.Pivot.PivotTableFieldType.columnField).length+1);
}

function _getElementById(id) {
  return document.getElementById(id);
}

PivotTableChanged Event | getFieldsByArea methodgetRange method


감사합니다.

그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2022 GrapeCity inc.