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

cell 배경색 동적 변경 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

PureJS cell 배경색 동적 변경

페이지 정보

작성자 aarmani 작성일 2023-12-05 16:52 조회 155회 댓글 0건
제품 버전 : wijmo/5.20211.781
컨트롤 이름 : wijimo

본문

이벤트가 발생하면 그리드를 동적으로 그려주고있습니다. 
값에 따라 cell  의 색깔이나 타입을 동적으로 변경해주고 싶은데 
어떻게 해야하나요.. 


HTML  

<div class="container-fluid">

  <!-- Export button -->

  <button class="btn btn-default" id="btnExport">셀 style 동적으으로 변경하기</button>


  <!-- FlexGrid -->

  <div id="flexGrid" class="grid"></div>

  <div id="flexGridFooter" class="gridFooter"></div>

</div>

JS  
function init() {

var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
  var data = [];
  for (var i = 0; i < countries.length; i++) {
    data.push({
      id: i,
      country: countries[i],
      sales: Math.random() * 10000,
      expenses: Math.random() * 5000
    });
  }
  // 데이터 그리드에 바인딩
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    autoGenerateColumns: false,
    columns: [
      { binding: 'country', header: 'Country', width: '2*' },
      { binding: 'sales', header: 'Sales', width: '*', format: 'n2' },
      { binding: 'expenses', header: 'remark', width: '*', format: 'n2' }
    ],
    itemsSource: data
  });

  document.querySelector('#btnExport').addEventListener('click', () => {
   for (var p = 0; p < theGrid.length; p++) {
var amount = theGrid.getCelldata(i, 1)  /// <-- Sales 값
if (amount > 50000 ){ // Sales값에 따라 cell 변경
         theGrid.setCellData(p, 2, '▲')
               이 위치에서 
Sales 값이 표시된 cell (
                row : p,  col : 1 )  위치의 폰트색깔 또는 배경색 또는 타입을 
                동적으로 변경해 표시하고싶습니다.  어떻게 할까요?
 }else{
        theGrid.setCellData(p, 2, '▼')
  }
}
  })

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

댓글목록

등록된 댓글이 없습니다.

1 답변

PureJS Re: cell 배경색 동적 변경

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

페이지 정보

작성자 MESCIUS루시 작성일 2023-12-06 11:16 댓글 0건

본문

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


문의하신 내용의 경우, 변수 및 셀을 나타내는 요소가 생성되었을 때 발생하는 formatItem 이벤트를 이용하여 구현할 수 있습니다. 클릭 이벤트에서 해당 변수를 true로 설정해주고 formatItem에서 내에서는 해당 변수가 true 일 때만 실행될 수 있도록 조건을 설정해줍니다.


자세한 코드는 아래 샘플을 참고하여 주시기 바랍니다. 샘플에서 버튼 클릭 시, sales 열의 배경색이 변경되는 것을 확인하실 수 있습니다.



- formatItem API 문서


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


감사합니다.

메시어스 드림

댓글목록

등록된 댓글이 없습니다.

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