단속 > 단속 등록&열람: 라디오 버튼 커스텀 렌더러 추가 및 선택 UI 개선

src/main/webapp/WEB-INF/views/crdn/crndRegistAndView/list.jsp

@@ -111,6 +111,7 @@
 <!-- /Main body -->
 
 <script type="text/javascript">
+
     /**
      * 단속 등록/조회 목록 관리 모듈
      * 단속 목록을 조회하고 관리하는 기능을 제공합니다.
@@ -139,6 +140,57 @@
             SEARCH_COND.schAgrvtnLevyTrgtYn = schAgrvtnLevyTrgtYn;
         };
 
+        /**
+         * 라디오 버튼 커스텀 렌더러
+         * TUI Grid에서 라디오 버튼을 렌더링하는 클래스
+         */
+        function CustomRadioRenderer(props) {
+            this.el = document.createElement('div');
+            this.el.style.textAlign = 'center';
+            this.el.style.paddingTop = '5px';
+            
+            this.radioEl = document.createElement('input');
+            this.radioEl.type = 'radio';
+            this.radioEl.name = 'gridRowRadio';
+            this.radioEl.value = props.rowKey;
+            
+            // 라디오 버튼 클릭 이벤트
+            this.radioEl.addEventListener('click', function(e) {
+                e.stopPropagation();
+                // 그리드의 행을 선택하고 selectedRow 설정
+                var grid = CrdnRegistAndViewList.grid.instance;
+                if (grid) {
+                    var rowData = grid.getRow(props.rowKey);
+                    CrdnRegistAndViewList.selectedRow = rowData;
+                    // 다른 라디오 버튼들 해제
+                    document.querySelectorAll('input[name="gridRowRadio"]').forEach(function(radio) {
+                        if (radio !== this.radioEl) {
+                            radio.checked = false;
+                        }
+                    }.bind(this));
+                    this.radioEl.checked = true;
+                }
+            }.bind(this));
+            
+            this.el.appendChild(this.radioEl);
+            this.render(props);
+        }
+
+        CustomRadioRenderer.prototype.getElement = function() {
+            return this.el;
+        };
+
+        CustomRadioRenderer.prototype.render = function(props) {
+            // 현재 선택된 행과 비교하여 라디오 버튼 상태 설정
+            if (CrdnRegistAndViewList.selectedRow) {
+                var currentRowData = CrdnRegistAndViewList.grid.instance.getRow(props.rowKey);
+                var isSelected = currentRowData && 
+                               CrdnRegistAndViewList.selectedRow.crdnYr === currentRowData.crdnYr &&
+                               CrdnRegistAndViewList.selectedRow.crdnNo === currentRowData.crdnNo;
+                this.radioEl.checked = isSelected;
+            }
+        };
+
         /**
          * 단속 목록 관리 네임스페이스
          */
@@ -176,7 +228,7 @@
                     gridConfig.setOptGridId('grid');                    // 그리드를 출력할 Element ID
                     gridConfig.setOptGridHeight(470);                   // 그리드 높이(단위: px)
                     gridConfig.setOptRowHeight(30);                     // 그리드 행 높이(단위: px)
-                    gridConfig.setOptRowHeaderType('rowNum');           // 행 첫번째 셀 타입(rowNum: 순번, checkbox: 체크박스, '': 출력 안함)
+                    gridConfig.setOptRowHeaderType('');                 // 행 첫번째 셀 타입 비활성화 (라디오 버튼을 컬럼으로 구현)
                     gridConfig.setOptUseClientSort(true);              // 서버사이드 정렬 false
 
                     // 페이징 옵션 설정
@@ -184,7 +236,6 @@
                         useClient: true,                               // 클라이언트 페이징 여부(false: 서버 페이징)
                         perPage: perPage                                // 페이지당 표시 건수
                     });
-
                     gridConfig.setOptColumns(this.getGridColumns());
 
                     return gridConfig;
@@ -195,7 +246,35 @@
                  * @returns {Array} 그리드 컬럼 배열
                  */
                 getGridColumns: function() {
+                    var self = this;
                     return [
+                        {
+                            header: '선택',
+                            name: '_radio',
+                            align: 'center',
+                            width: 50,
+                            sortable: false,
+                            renderer: {
+                                type: CustomRadioRenderer
+                            }
+                        },
+                        {
+                            header: '번호',
+                            name: '_rowNum',
+                            align: 'center',
+                            width: 60,
+                            sortable: false,
+                            formatter: function(e) {
+                                // 전체 데이터 개수에서 현재 행 인덱스를 빼서 역순 번호 생성
+                                var grid = CrdnRegistAndViewList.grid.instance;
+                                console.log(e);
+                                if (grid) {
+                                    var totalCount = grid.getData().length;
+                                    return totalCount - e.row.rowKey;
+                                }
+                                return '';
+                            }
+                        },
                         {
                             header: '단속년도',
                             name: 'crdnYr',
@@ -330,6 +409,23 @@
                         if (ev.range && ev.range.row && ev.range.row.length > 0) {
                             var rowKey = ev.range.row[0];
                             CrdnRegistAndViewList.selectedRow = self.instance.getRow(rowKey);
+                            
+                            // 해당 행의 라디오 버튼 체크
+                            document.querySelectorAll('input[name="gridRowRadio"]').forEach(function(radio) {
+                                radio.checked = (radio.value == rowKey);
+                            });
+                        }
+                    });
+
+                    // 행 클릭 이벤트 - 라디오 버튼 즉시 체크를 위해 추가
+                    this.instance.on('click', function(ev) {
+                        if (ev.rowKey !== undefined && ev.rowKey !== null) {
+                            CrdnRegistAndViewList.selectedRow = self.instance.getRow(ev.rowKey);
+                            
+                            // 해당 행의 라디오 버튼 체크
+                            document.querySelectorAll('input[name="gridRowRadio"]').forEach(function(radio) {
+                                radio.checked = (radio.value == ev.rowKey);
+                            });
                         }
                     });