이벤트 활용

그리드 하단 커스텀 패널

QCELL은 커스텀 하단 패널 기능을 제공합니다.

1. 하단 패널 활성화

QCELL.create
  ({
    "parentid"    : "QCellArea", // 그리드를 생성할 부모 영역 ID
    "id"          : "QCell1",  // QCELL ID
    "data"        : {"input": cell_data},  // 초기 데이터
    "bottompanel" : true,   // 하단 패널 활성화
  )}

2. 하단 패널 스타일 설정

● useexcelstylepanel: false를 사용하여 기본 마우스 오버/셀 클릭 시 표시되는 패널을 비활성화합니다.

● 이 속성은 커스텀 패널(resetCustomPanel)을 사용할 때 함께 설정하는 것이 권장됩니다.

useexcelstylepanel: false

3. 하단 패널 높이 조정

bottompanelheight 속성을 사용하여 패널의 높이를 지정합니다.

bottompanelheight: 50

4. 커스텀 패널 내용 설정

resetCustomPanel 메서드를 사용하여 하단 패널에 표시할 내용을 동적으로 변경합니다.

qcell.resetCustomPanel('총 합계 : ￦' + sum + '원 / 상용월급여액 합계 : ￦' + regularsalary + '원');

5. 하단 패널 갱신 콜백 (예제 코드)

아래는 resetCustomPanel과 함께 사용하는 하단 패널 갱신 코드입니다. 값 변경 이벤트(valuechanged)와 함께 사용됩니다.

function bottompanel() {
    var regularsalary = qcell.getColSum(6).toLocaleString();   // 상용월급여액 합계
    var flatsalary = qcell.getColSum(7).toLocaleString();      // 상용정액급여 합계
    var overtimepay = qcell.getColSum(8).toLocaleString();     // 상용초과급여 합계
    var specialsalary = qcell.getColSum(9).toLocaleString();   // 상용특별급여 합계
    var sum = qcell.getColSum(6) + qcell.getColSum(7) + qcell.getColSum(8) + qcell.getColSum(9);
    var formattedSum = sum.toLocaleString();

     // 하단 패널 내용 갱신
    qcell.resetCustomPanel(
        '총 합계: ￦' + formattedSum +  '원 / ' +
         '상용월급여액 합계: ￦' + regularsalary +  '원 / ' +
         '상용정액급여 합계: ￦' + flatsalary +  '원 / ' +
         '상용초과급여 합계: ￦' + overtimepay +  '원 / ' +
         '상용특별급여 합계: ￦' + specialsalary +  '원'
    );
}

---