반응형 Library & Framework48 [jQuery] 특정 DOM요소 앞뒤로 삽입하기 (ft. after()/before()& insertAfter()/insertBefore() ) - 특정 DOM요소 앞 뒤에 값 삽입하기 - 우선 제목에 나와있는 after(), insertAfter(), before(), insertBefore()에 대해 알아보자. 메소드 내용 after() 지정한 요소 뒤에 새로운 요소를 삽입 A.after(B) - A 뒤에 B를 추가 insertAfter() 지정한 요소 뒤에 새로운 요소를 삽입 A.insertAfter(B) - B 뒤에 A를 추가 before() 지정한 요소 앞에 새로운 요소를 삽입 A.before(B) - A 앞에 B를 추가 insertBefore() 지정한 요소 앞에 새로운 요소를 삽입 A.insertBefore(B) - B 앞에 A를 추가 이제 예제를 통해 접해보자. ▷예제1) $(".btnCtrl").click(function(){ v.. 2020. 10. 1. [jQuery] 특정 HTML DOM 요소 제거하기 (ft. .remove()) - HTML DOM 요소 제거하기 - HTML에서 사용되는 특정 DOM 요소를 제거하는 방법에 대해 알아보자. jQeury에서 제공하는 .remove()를 사용할 것이다. 예제를 통해 가볍게 접해보자. ▷예제1) .remove() Test Type1 Test Type2 jQuery로 DOM 요소를 선택하고 .remove()를 사용만 해주면 끝이다. 생각보다 자주 쓰이게 되는 기능이라 알아두면 좋다. 2020. 8. 5. [jQuery] 지정된 dom 요소 드래그 기능 부여하기 (ft. jQuery UI - .draggable()) - 지정된 dom 요소 드래그 기능 부여하기 - dom 요소를 제어할 때 드래그 기능을 사용해야 하는 경우가 생길수 있는데 최근에 자주 쓰게 되어서 정리해두고자 한다. jQuery UI 에서 제공하는 기능들이 생각보다 다양한데 이 드래그 기능 역시 jQuery UI에서 제공해주는 기능이다. 상세한 옵션은 많지만 아주 간단하게 드래그만 되도록 선언해 주는 방법에 대해 예제를 통해 접해보자. ▷예제1) ... 보면 알겠지만 dom 요소를 jQeury로 선택하고나서 .draggable()을 선언만 해주면 드래그가 가능하다. 상세 옵션은 아래에서 참조하여 개발하도록 하자. 참고 : https://superkts.com/jquery/draggable (jQuery 공작소) https://api.jqueryui.c.. 2020. 7. 10. [jQuery] radio / checkbox script로 제어하기 (feat. prop, is, checked) - radio, checkbox script제어하기 - input type 의 radio 와 checkbox는 참 많이 쓰이는 것들인데 스크립트로 제어하다보니까 자꾸 까먹어 정리해두고자 한다. 코드를 중심으로 살펴보자. ▷ checkbox 제어 // 전체 체크 박스 가져오기 (by. name) $("input:checkbox[name=mineCheck]") // 전체 개수 (by. name) $("input:checkbox[name=mineCheck]").length; //선택된 개수 (by. name) $("input:checkbox[name=mineCheck] : checked").length; // 전체 체크 및 해제 (by. name) $("input:checkbox[name=mineCheck]".. 2020. 3. 29. [jqGrid] colNames 손쉽게 설정하기 - colNames 손쉽게 설정하기 - jqGrid를 설정할때 colNames와 colModel 옵션을 넣어주는 부분이 있는데, 보통 아래와 같이 따로 변수로 관리를 해두고 옵션에 넣어두는 식으로 사용하고는 한다. var colNames = ['게시글관리번호', '번호', '제목', '작성자', '날짜', '조회수']; var colModel = [{name:'bbsMgtNo', index:'bbsMgtNo', align:'center', hidden:true}, {name:'bbsNum', index:'bbsNum', align:'left', width:'12%'}, {name:'bbsTitle', index:'bbsTitle', align:'center', width:'50%'}, {name:'bbs.. 2020. 3. 16. [jqGrid] 다양한 옵션 및 사용법 모음 (colmodel, option, event, methods) - 다양한 옵션 모음 - 옵션에 대해 알아보기 이전에 일단 아래와 같은 기본 구조를 가지고 시작한다 치고 진행 하도록 한다. ▷ 기본 구조 var searchResultColNames = ['게시글관리번호', '번호', '제목', '작성자', '날짜', '조회수']; var searchResultColModel = [{name:'bbsMgtNo', index:'bbsMgtNo', align:'center', hidden:true}, {name:'bbsNum', index:'bbsNum', align:'left', width:'12%'}, {name:'bbsTitle', index:'bbsTitle', align:'center', width:'50%'}, {name:'bbsWriter', index:'bb.. 2020. 3. 14. [jQuery] $(function(){}); 문법의 의미 (feat. document.ready, window.onload 차이점) - $(function(){}); 문법의 의미 - 그렇게 큰 의미를 가진 문법은 아니고 그저 $(document).ready(function(){...}) 와 같은 의미를 가진 문법이다. 그저 간편하게 줄인것이다. 여기서 더 나아가 (function(){...})() 가 존재하는데 이건 즉시실행함수라고 인터넷이 찾아보면 널려있다. (비슷한 역할이지만 제이쿼리 없이 사용가능한 스크립트 문법이다.) 그러면 다음으로 넘어가 $(document).ready() 와 window.onload = function(){} 이 둘의 차이점은 뭘까? $(document).ready()는 리소스 호출과 상관없이 DOM만 생성되어도 실행되는 문법이고 window.onload는 DOM뿐만 아니라 리소스 호출도 완료되었을 때 실.. 2020. 3. 8. [jqGrid] No such method: GridUnload ERROR - No such method: GridUnload ERROR - jqGrid를 사용하다가 갑자기 No such method : GridUnload 에러가 발생했는데, 다른 원인이 있을 수 있으나 진행하고 있던 프로젝트에서 발생한 원인은 .jqGrid('GridUnload')를 사용한게 원인이 되었다. 아마 jqGrid 버전에 따른 오류로 생각되는데, 해결방법은 아주 간단하다. $.jqgrid.gridUnload("#mainGrid"); 같은 기능을 다른 방식으로 적용시켜주면 된다. 2020. 3. 8. [jqGrid] 변경된 값 리로드(재조회)가 안될때 해결하기 (feat. GridUnload) - 조회 시 변경된 값으로 조회가 안될 때 해결방법 - 조회를 시도할 때 변경된 값으로 조회가 안되고, 첫번째 조회 했던 그 값으로만 조회 되는 기이한 현상이 발생하는 경우가 있다. 이럴때 간단하게 해결하는 방법은 그냥 한줄만 추가해주면 되는데, 그냥 단순하게 데이터를 날려버리고 다시 그려주는 방식이라 생각하면된다. $("#mainGrid").jqGrid("GridUnload"); function searchData(mode) { var postData = objConvertJson($("#fieldSurvForm")); $("#mainGrid").jqGrid("GridUnload"); $("#mainGrid").jqGrid({ url : "/board/searchData.do", datatype : ".. 2020. 3. 7. 이전 1 2 3 4 5 6 다음 반응형
