초급 개발자 mylee 개발 노트

jqGrid를 쓰면서 자주 사용했던 메서드들 총정리나중에 또 까먹을까봐 기록해두는 중... 🤔 1. setRowData그리드의 특정 행 데이터를 업데이트할 때 사용한다.문법$("#grid").jqGrid('setRowData', rowid, data, cssp)매개변수rowid: 업데이트할 행의 ID (필수)data: 업데이트할 데이터 객체 (필수)cssp: CSS 속성 (선택)사용 예시// 단일 컬럼 업데이트$("#myGrid").jqGrid('setRowData', rowId, {'name': 'John'});// 여러 컬럼 동시에 업데이트$("#myGrid").jqGrid('setRowData', rowId, { 'name': 'John', 'age': 25, 'city': 'Se..

오늘 코드 리뷰하다가 이벤트 중복 바인딩 이슈가 있어서 해보는 정리🤔 이벤트 중복 바인딩이 발생하는 경우실제로 발견한 중복 코드:// 상단에 있던 코드$('#btnSearch').unbind().click(_eventSearch); //검색 버튼 클릭// 하단에 있던 코드$('#btnSearch').click(function(e){ $("#page").val(1); _eventSearch(); e.preventDefault();}); 이러면 검색 버튼 누를 때 _eventSearch 함수가 두 번 실행될 수 있음.근데 다행히 unbind()가 있어서 이전 이벤트는 제거됐었다.  비슷한 중복 패턴들:// 패턴 1: document.ready 안에서 중복$(document).ready(fu..

# amtFormatJson 함수 기본 구조 function amtFormatJson(amount) { if (!amount) return ""; amount = String(amount).replace(/[^0-9]/g, ""); return amount.replace(/\B(?=(\d{3})+(?!\d))/g, ",");}   # 사용 예시// 일반 숫자 포맷팅amtFormatJson(10000); // "10,000"amtFormatJson("5000000"); // "5,000,000"// jQuery에서 활용$("#price").text(amtFormatJson(data.price));// form 데이터 포맷팅$("input[name='amount']").val(am..

프로젝트하면서 제일 많이 만드는 게시판 예제로 정리해봄.기본적인 CRUD랑 검색, 정렬 다 들어있음.   1. HTML 구조 검색 글쓰기     2. jqGrid 초기화 및 설정 $(document).ready(function() { initGrid(); initEvents();});function initGrid() { $("#boardGrid").jqGrid({ url: '/api/board/list', datatype: 'json', mtype: 'POST', colNames: ['번호', '제목', '작성자', '작성일', '조회수', 'boardId'], ..

내가 보려고 카테고리별로 나눈 jqGrid의 주요 메서드와 이벤트 1. 데이터 관련 메서드일단 제일 많이 쓰는 데이터 가져오기/설정하기 메서드들// 데이터 가져오기$grid.getRowData(rowId) // 특정 행 데이터. 제일 자주 씀$grid.getDataIDs() // 모든 행 ID 배열. forEach 돌릴 때 씀$grid.getLocalRow(rowId) // 로컬 데이터에서 가져올 때$grid.getCell(rowId, colName) // 특정 셀만 필요할 때$grid.getCol(colName) // 컬럼 전체 값이 필요할 때$grid.getGridParam('data') // 그리드 전체 데이..

## 문제 상황게시글 수정 시 기존 첨부파일을 삭제해도 atchFileId 값이 계속 남아있어서,파일이 없는데도 DB에 atchFileId가 들어가는 현상 발생 ## 원인 분석1. 파일 정보가 저장되는 방식:// hidden input에 파일 ID 저장// 각 파일행의 숨겨진 div에 파일 상세 정보 저장  2. 삭제 버튼 클릭 시 파일명만 초기화하고 atchFileId는 그대로 남아있었음$(".btn_delete").click(function() { var row = $(this).closest("tr"); row.find('input[name="fileName"]').val(""); // 파일명만 초기화 row.find('.file-info').html(""); // 파일 정보는 ..

오늘 댓글 수정/등록 기능 구현하다가 this 때문에 발생한 TroubleShooting 정리...🤔   # 문제상황 처음에 이렇게 작성했는데 this가 undefined로 나옴// 수정/등록 버튼 클릭 이벤트$("#btnSaveEdit").on("click", function(e) { saveComment(true); // 수정 모드});$("#btnSave").on("click", function(e) { saveComment(false); // 신규 작성 모드});// 댓글 저장 함수function saveComment(isEdit) { var content = isEdit ? $(this).closest("tr").find(".comment-edit").val(..

오늘 댓글 삭제 기능 구현하다가 생긴 TroubleShooting 정리...🥲   # 문제상황 댓글 삭제 버튼에 이벤트를 아래처럼 걸었는데 아무리 눌러도 반응이 없었다.$("#btnDelete").on("click", function(e){ var commentIdx = $(this).closest("tr").find("input[name='commentIdx']").val(); if(!commentIdx){ alert("댓글을 찾을 수 없습니다."); return; } location.href = "/comment/delete/" + commentIdx;});  # 원인알고보니 동적으로 생성된 요소에는 이벤트가 바인딩이 안 되는 문제였다.페이지 로드 시점..

테이블에서 행 추가/삭제하는 기능 드디어 구현 성공했다.특히 첨부파일 여러 개 업로드하는 부분에서 행을 추가하고 체크박스로 삭제하는 기능이 필요했는데, jQuery로 해결했다. 1. 기본 HTML 구조: 순번 내용 1 행 추가선택 삭제   2. jQuery로 구현한 핵심 기능들:2-1. 행 추가 기능fu..

오늘 파일 업로드 기능 구현하다가 생긴 트러블 슈팅 정리 파일 업로드할 때 popup window 써서 처리하려니 이벤트 흐름 파악이 중요했음.  1. 기본 구조 btnFileUpload 버튼 클릭 → eventFileUpload 함수 호출 → _setUploadWindow로 팝업 오픈 → 팝업에서 파일 선택 후 확인 → _setFileUploadSendResult 콜백으로 결과 받음  2. 실제 구현 $(document).on("click", "[id^='btnFileUpload']", function(e) { var rowIndex = $(this).closest("tr").index(); // 현재 행 인덱스 eventFileUpload(rowIndex); e.preventDef..