사용자 정의 에디트렌더러 - 시리즈바

월별 목표 칼럼은 기본 제공 SparkColumnRenderer로 표시하고, 사용자 정의 편집기 AUIGrid.SeriesBarEditor로 값을 수정합니다.

목표 셀을 더블클릭하거나 선택 후 F2 / 스페이스바를 누르십시오. 막대를 위아래로 끌거나 숫자를 입력해 월별 목표를 변경합니다.

← / → 키로 월을 선택하고 ↑ / ↓ 키로 5씩 조절합니다. Shift와 함께 누르면 50씩 조절합니다. Enter 또는 확인으로 적용하고 Esc 또는 취소로 닫습니다.

+10%, -10%는 전체 목표를 조절하고, 전년 실적 복사는 비교값을 목표에 반영합니다. 금액 단위는 백만 원입니다.

AUIGrid.js 다음에 편집기 JS와 CSS를 연결하고 칼럼의 editRenderer를 지정합니다.

<script src="./js_20261014/editRenderers/AUIGrid.SeriesBarEditor.js"></script>
<link rel="stylesheet" href="./js_20261014/editRenderers/AUIGrid.SeriesBarEditor.css" />

{
    dataField: "t1,t2,t3,t4,t5,t6,t7,t8,t9,t10,t11,t12",
    headerText: "2027 월별 목표 (편집)",
    renderer: { type: "SparkColumnRenderer" },
    editRenderer: {
        type: "CustomEditRenderer",
        jsClass: AUIGrid.SeriesBarEditor,
        vPosition: "bottom",
        extraProps: {
            labels: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
            compareField: "p1,p2,p3,p4,p5,p6,p7,p8,p9,p10,p11,p12",
            compareLabel: "전년 실적",
            step: 5,
            unit: "백만 원",
            gridID: "#grid_wrap"
        }
    }
}

이 예제의 값은 t1~t12, 비교값은 p1~p12 필드에 저장합니다. 편집기는 extraProps.gridID에 지정한 그리드의 updateRow()로 변경한 월별 값을 적용합니다.

쉼표로 묶은 dataField 이름의 필드는 초기 데이터에 빈 문자열로 넣습니다. 비교값은 선택 사항이며, extraProps.max를 생략하면 세로 눈금의 최대값을 자동으로 정합니다.

초기 데이터로 되돌리기