CustomRenderer로 숫자를 별로 표시하고, CustomEditRenderer로 1~5점을 선택하는 예제입니다.
만족도 셀을 더블클릭하거나 선택 후 F2를 누르십시오. 별을 누른 뒤 확인하면 저장하고, 취소 또는 Esc를 누르면 원래 값으로 돌아갑니다.
Tab으로 버튼을 이동하고 Enter 또는 Space로 누를 수 있습니다. 바깥 셀을 클릭해도 선택한 점수가 적용됩니다.
// 그리드 속성: editable: true
// 행 데이터: { rating: 3 }
{
dataField: "rating", headerText: "만족도", width: 240,
dataType: "numeric", // 편집 후에도 숫자로 저장합니다.
renderer: {
type: "CustomRenderer",
jsClass: AUIGrid.RatingRenderer
},
editRenderer: {
type: "CustomEditRenderer",
jsClass: AUIGrid.RatingEditor,
vPosition: "bottom"
}
}데이터에는 숫자 하나를 저장합니다. 직접 만드는 과정은 8. 사용자 정의 렌더러 만들기에서 확인할 수 있습니다.
AUIGrid.js 다음에 아래 JS와 CSS를 연결합니다.
<script src="./js_20261019/renderers/AUIGrid.RatingRenderer.js"></script>
<link rel="stylesheet" href="./js_20261019/renderers/AUIGrid.RatingRenderer.css" />
<script src="./js_20261019/editRenderers/AUIGrid.RatingEditor.js"></script>
<link rel="stylesheet" href="./js_20261019/editRenderers/AUIGrid.RatingEditor.css" />데이터 확인을 누르면 현재 저장된 값을 표시합니다.