JavaScript
-
동적으로 추가된 셀렉트박스에서 원하는 옵션 선택하기개발/Javascript & jQuery 2019. 3. 6. 11:13
동적으로 셀렉트 박스에 옵션을 생성하여 추가해준 후,특정 이벤트 발생에 따라 원하는 옵션을 선택해줘야 할 때가 아주 많이 발생한다... 그럴 때는 당황하지 말고 이렇게 12345//옵션 순서를 알 경우 : 선택하고자 하는 옵션 순번을 명시하여 선택$("#selectBox option:eq(n)").prop("selected", true); //해당 옵션의 value를 알 경우 : 선택하고자 하는 value를 명시하여 선택$("#selectBox").val("값").prop("selected", true);cs 해주면 된다. 처음에는 attr()을 써서 시도해보았으나 안되길래 찾아봤더니 동적으로 추가된 요소에 대해서는 attr() 이 안 먹는 모양
-
팝업창 하나만 띄우기개발/Javascript & jQuery 2019. 2. 14. 09:11
팝업창을 띄우는 함수가 여러개 있으며이미 띄워진 팝업창이 있으면 팝업창을 닫고 새 팝업창을 띄워야 하는 경우전역변수를 하나 선언해두고 이 변수를 이용해서 팝업창을 열면 된다. 무슨 말이냐고 하면 12345678910111213141516171819var win; function popup1(){ if(win != null){ win.close(); } win = window.open('url1', 'name', 'x', 'y', 'width', 'height'); win.focus();} function popup2(){ if(win != null){ win.close(); } win = window.open('url2', 'name', 'x', 'y', 'width', 'height'); win.foc..
-
[jqGrid] 그리드 내 행마다 수정/삭제 버튼 삽입하기개발/Javascript & jQuery 2019. 1. 24. 12:24
jqGrid를 쓰다보면 언젠가 아래 이미지처럼 그리드의 행마다 수정 삭제 버튼을 넣어줘야 하는 경우가 생길 수도 있다. 출처는 요 아래http://trirand.com/blog/jqgrid/jqgrid.html → Functionality > Formatter actionshttp://www.guriddo.net/documentation/guriddo/javascript/user-guide/formatters/ 실제 소스에 적용한다면 이런 느낌으로 들어간다. 123456789101112131415161718192021222324252627282930 $$("#list").jqGrid({ url: "url", datatype : "json", mtype: "post", colNames:[ ' ', 'id'..
-
jqGrid 위키문서 정리 - 플러그인 특징 및 설치개발/Javascript & jQuery 2018. 4. 23. 11:39
준비 중인 프로젝트에서 jqGrid를 사용하는데 내가 유일한 초기 투입 개발자니까 미리 준비하면 좋겠다고 하셔서 공부를 시작했다.요기에 정리되어 있는 공식문서를 공부할 겸 따로 정리해본당 → http://www.trirand.com/jqgridwiki/doku.php?id=wiki:features 1. 특징1) 기본 그리드• UI테마에 기초한 CSS 사용 : jQueryUI의 테마를 활용하여 그리드를 표현→ jQueryUI 테마 다운로드 필요• 페이징 : 페이징 기능을 사용하여 데이터 출력 가능하며, 한 페이지에 총 몇 행을 출력할지는 개발자가 지정할 수 있음• 사용자가 컬럼 너비 조정 가능• 데이터 정렬 : 사용자가 헤더를 클릭하여 데이터 정렬 가능. 개발자가 특정 타입을 기준으로 데이터 정렬하도록 지..
-
달력 그리기개발/Javascript & jQuery 2018. 2. 22. 16:55
문득 자바스크립트를 써서 달력을 그리면 좋겠다는 생각이 들었다. 찾아보니 역시 훌륭하신 분들이 공개해주신 소스가 많았다.그중 아래 소스가 제일 맘에 들어서 저장 http://jsfiddle.net/radlohead/8b44ft0w/ DOCTYPE html> Making Calendar .wrap { width: 500px; margin : 0 auto; } .btn-holder { text-align: center; margin : 10px 0 10px 0; } #calendar table { text-align : center; border-collapse : collapse; } #calendar table thead td { height : 30px; font-weight : bold; } #cal..
-
데이터 정렬하기개발/Javascript & jQuery 2018. 2. 7. 13:58
배열 내 데이터를 정렬할 일이 생겼을 때, 편하게 sort 함수나 reverse 함수를 써서 정렬할 수도 있고괜히 정렬 알고리즘을 짜서 정렬할 수도 있다.오늘은 한가하니까 두 방법을 모두 써서 배열 내 데이터를 정렬했다. 1. Array.prototype.sort(), Array.prototype.reverse() 를 사용하여 정렬 오늘은 작정하고 공부를 하는 날이니까 여유롭게 기술문서를 보러갔다.https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort sort() 함수에 대한 기술을 먼저 보러 갔더니 눈에 띄는 구절이 있다. sort () 메서드는 배열의 요소를 적절한 위치에 정렬하고 배열을 반환합니다..
-
기본 로직을 활용하여 특별한 날 생성하기개발/Javascript & jQuery 2018. 2. 6. 16:23
다이어터에게 보상데이가 있는 것처럼, 자기 자신에게 선물을 주는 날을 만든다는 사람의 글을 봤다. 한달에 하루나 이틀 정도 날을 잡아서 그날만큼은 자기가 좋아하는 간식을 사먹는다는 그 아이디어가 정말 귀엽고 좋다고 생각했다. 하루에 만원쓰기 운동을 시작한지 며칠 안됐지만 벌써부터 지쳐가는 내 자신을 한심하게 보느니그냥 이렇게라도 숨통을 틔워줄 겸, 마침 지금 혼자서 만들고 있는 가계부 프로그램에 도입해도 좋을 것 같다는 생각도 들어서 잠깐 코드를 짜봤다. 기본적인 로직은 로또 번호 발생기와 동일하다.여기에 특별한 날을 한달에 2일 이상 잡을 경우 오름차순으로 정렬하여 출력하는 로직만 추가했다. 자바스크립트 내장함수를 몇 개 사용했는데, 이것도 나름 깊이있게 공부하려다보니 쓰잘데기없이 말이 많아져서 따로 ..
-
Spring + MyBatis + DB = 작은 웹사이트 - (9) CRUD개발/Web Project (1) - Spring MVC + java + DB 2018. 1. 28. 21:01
전체 글 목록을 읽어오는 기능과 페이징 처리 기능을 넣었으니 새로 글쓰기, 상세 데이터 조회, 글 수정, 글 삭제 기능을 구현해서 CRUD 풀셋을 완성할 차례다. 처음 밝혔듯이 원래는 상세 조회, 수정, 삭제, 입력을 모두 하나의 jsp 에서 처리할 수 있게 구현하려고 했으나...구체적인 설계 계획없이 일단 만들기 시작하다가 꼬이면서 수정, 입력을 각각의 별도 화면에서 처리하는 것으로 바꿨다. 1. 글 신규 작성 + CKEditor 삽입 목록 조회 화면에서 글 쓰기 버튼을 클릭하면 loaction.href 를 이용하여 글 작성 화면으로 이동한다 $("#toWrite").click(function(){location.href="/home/note/writeNoteView"; }); //게시물 작성 화면@R..