! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!
제품 버전 확인하기

PivotGrid 컬럼의 헤더변경 > Q&A | 토론

본문 바로가기
로그인

로그인후 이용해주세요

아직 회원이 아니신가요?

회원가입
로그인
MESCIUS 카카오톡 채널 추가
메시어스 +
카카오톡 채널 추가를 통해 MESCIUS의 최신 정보, 이벤트, 세미나 정보를 빠르게 받아 보실수 있습니다
홈 링크 페이스북 링크 유튜브 링크

Wijmo

Q&A | 토론 - PureJS

PureJS PivotGrid 컬럼의 헤더변경

페이지 정보

작성자 행복날개
프로필 보기 쪽지 보내기
작성일 2023-11-09 14:00 조회 339회 댓글 1건
제품 버전 : 5.20193.646
컨트롤 이름 : PivotGrid

본문

---------------------------------

col1Code : col1코드 (소팅용) 

col1Name : col1이름 

col1Code : col2코드(소팅용) 

col1Name : col2이름

solutionCode : solution코드(소팅용) 

solutionCoName : solution명

amt : 값

-----------------------------------


설정값은

{ 

  "rowFields"              : "['col1Code', 'col1Name', 'col2Code', 'col2Name']",

  "columnFields"         : "['solutionCode', 'solutionCoName']",

  "valueFields"            : "['amt']"

} 


인 경우 결과가 아래처럼 나오는데요


--------------------------------------------------------------------------------------------- 

             solutionCode                                             |   1         |      2

---------------------------------------------------------------------------------------------

col1Code   |    col1Name   |  col2Code    |    col2Name  |     나이키    |  아디다스

---------------------------------------------------------------------------------------------

1             | 신발             |    1-1           |  가가            |     10       |     -1

---------------------------------------------------------------------------------------------

2             | 양말             |    2-1           | 나-1            |      10       |     10 

---------------------------------------------------------------------------------------------

2             | 양말             |    2-2           | 나-2            |      10       |     10 

---------------------------------------------------------------------------------------------


[ 질문 ]

1. 위 결과화면에서 정렬용으로 사용된 col1Code, col2Code, solutionCode를 안보이게 하러면 어떻게 해야하나요?


2.  보여지는 헤더이름을 변경하려면 어떻게 해야하나요?

col1Name => 구분

col2Name => 항목

solutionName => 솔루션


3. 값이 마이나스 인 경우 색상 변경



최종 원하는 화면

--------------------------------------------------------------------------------------------- 

구분          |   항목           |     나이키    |  아디다스

---------------------------------------------------------------------------------------------

신발          |    가가           |     10       |     -1

---------------------------------------------------------------------------------------------

양말          |    나-1           |      10       |     10 

---------------------------------------------------------------------------------------------

양말          |    나-2           |      10       |     10 

---------------------------------------------------------------------------------------------


도움 주시면 정말 갑사하겠습니다.


  • 페이스북으로 공유
  • 트위터로 공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

2 답변

PureJS Re: PivotGrid 컬럼의 헤더변경

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 MESCIUS루시
프로필 보기 쪽지 보내기
작성일 2023-11-10 16:39 댓글 2건

본문

안녕하세요 메시어스입니다.


문의하신 내용에 대해 답변드립니다.


1.PivotGrid 헤더의 행/열 숨김 처리 방법 문의

=> 헤더를 숨김처리하기 위해서는 loadedRows 이벤트 내에서 숨김처리하고 싶은 영역의 행/열이 visible 속성을 false로 설정하시면 됩니다.


loadedRows:function(s,e){
      pivotGrid.rowHeaders.columns[0].visible = false;
      pivotGrid.columnHeaders.rows[0].visible = false;
}


2. rowFields에 설정된 헤더 이름 변경 방법 문의

=> rowFields에 설정된 헤더 이름을 변경하기 위해서는 PivotPanel getField 메서드를 통해 변경할 필드를 가져온 뒤 header 속성을 통해 값을 설정하면 됩니다.

  var Color = ng.fields.getField('Color');
  Color.header ="색상"


3. PivotGrid 조건부 스타일 설정 방법

=> 해당 기능의 경우, PivotGrid의 formatItem 이벤트를 이용하여 조건부 스타일을 설정할 수 있습니다. 자세한 코드는 아래 샘플에서 확인하실 수 있습니다.



- loadedRows API 문서

- header API 문서

- formatItem API 문서 


관련 API 문서를 공유드리며 다른 궁금한 점이 생기면 문의주시기 바랍니다.


감사합니다.

메시어스 드림

댓글목록

삭제된 댓글

행복날개
프로필 보기 쪽지 보내기
작성일

삭제된 댓글 입니다.

행복날개님의 댓글

행복날개
프로필 보기 쪽지 보내기
작성일

친절한 답변 감사합니다.

특정 로우의 컬럼 즉, 특정 셀의 값만 소수점 2째짜리로 표현이 가능할까요?

PureJS Re: PivotGrid 컬럼의 헤더변경

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 MESCIUS루시
프로필 보기 쪽지 보내기
작성일 2023-11-14 17:04 댓글 0건

본문

안녕하세요 메시어스입니다. 


특정 셀의 format을 설정하기 위해서는 FlexGrid 셀에 사용자 정의 컨텐츠를 설정할 수 있는 cellTemplate 및 format을 이용하여 구현하실 수 있습니다.


아래 간단한 코드를 참고하여 주시기 바랍니다.


  new wijmo.grid.FlexGrid('#theGrid', {
    autoGenerateColumns: false,
    columns: [
      {
        header: 'Country', binding: 'country', width: '*',
        cellTemplate: '<img src="https://assets.codepen.io/975719//${item.country}.png"/> ${text}'
      },
      {
        header: 'sales', binding: 'sales', width: 170, aggregate: 'Sum', format:"n1",
        cellTemplate: (ctx) => {
          if(ctx.row.index === 1){ // 행 인덱스가 1일 때
            ctx.text = wijmo.Globalize.format(ctx.value,'n2') // 포맷팅 처리 및 text 속성에 할당, 
          }
          return `${ctx.text}`
        }
      }
    ],
    itemsSource: getCv()
  });
}


더불어 관련 데모 및 API 문서 링크를 공유드리며 다른 궁금한 점이 생기면 문의주시기 바랍니다.


- 셀 템플릿 데모 

- 날짜 및 숫자 서식 데모

- Globalized API 문서

- cellTemplate API 문서

- ICellTemplateContext Interface API 문서


감사합니다.

메시어스 드림

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

카테고리

인기글

더보기

최신글

더보기

셀럽

최근 7일 종합
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.