jQuery

SPA Application인 회사 프로그램을 개발하면서 JqGrid를 통해 그리드를 생성하는 일이 다수 있었다. JqGrid는 jQuery에서 제공하는 라이브러리로 페이저, 셀 수정, 멀티 체크 등의 기능을 위해 주로 사용하게 되었다. 내 경우에는 주로 서버에서 가져온 데이터를 여러 방향으로 사용하면서 가공한 데이터로 그리드를 초기화하다보니 ajax로 바로 가져온 JSON 형태의 데이터를 사용하는 것이 아니라 가져온 로컬 데이터를 사용했다. 기본 구조 pager 그리드를 pagination하고자할 때 pager로 사용할 해당 element를 줄 수 있다. div를 전달하면 된다. colModel 각 컬럼의 속성을 정의한다. const colModel = [ { name: '컬럼명', index: '보여..

jQuery 에서 라이브러리 형태로 제공되는 다이얼로그를 사용하면 보다 간단하게 세련된 디자인의 다이얼로그를 사용할 수 있게 된다. 아래 링크에서 해당 라이브러리를 받을 수 있다. 이 때 반드시 필요한 파일은 jquery-ui.js와 jquery-ui.css 두 가지이다. https://jqueryui.com/download/ Download Builder | jQuery UI Download Builder jqueryui.com jQuery Dialog 호출 방식 먼저 다이얼로그를 호출할 Element가 필요하다. 그 다음, 해당 Element에 다이얼로그를 호출하는 코드는 아래와 같다. 주로 사용해본 옵션과 함수들을 나열했다. $('#dialogSample').dialog({ dialogClass: ..

일반적으로 jQuery를 사용해 요소에 이벤트를 걸고자 할 때, 아래와 같이 걸게 된다. $().on("event", function(e) { ... }); 이렇게 이벤트를 걸던 중, 해당 이벤트를 바인딩할 때 존재하는 데이터를 함께 전달해야하는 상황이 있었다. 나는 단순히 아래와 같이 했지만.. 해당 이벤트가 바인딩되기 보다는 해당 이벤트의 콜백함수가 바로 실행되는 문제가 생겼다. $().on("event", function(e, data) { ... }); 제이쿼리 공식 API 문서를 보면 데이터를 함께 전달하고자 할 때에는 아래와 같이 보내야 한다고 명시하고 있다. $().on("event", {dataName: data}, function(e) { ... });

$.each() 특정 요소의 하위 요소를 하나씩 꺼내기를 반복한다. Javascript의 Array.forEach와 같은 기능을 한다. + $.each()에서는 일반적인 for문처럼 break, continue가 되지 않는지 의문이었으나 아래와 같이 대체하여 사용할 수 있다. $.each(list, function(idx, item) { if(expression) { return false; // break; return true; // continue; } });

Closest(), find() 함수는 모두 선택한 요소를 기점으로 특정 요소를 찾는 역할을 한다. Closest() jQuery 선택자로 선택한 요소로부터 상위 요소로 옮겨가며 해당 조건에 맞는 요소를 찾을 때까지 탐색한다. 조건에 맞는 가장 가까운 부모 요소를 찾으면 탐색을 중단한다. find() jQuery 선택자로 선택한 요소로부터 하위 요소로 옮겨가며 해당 조건에 맞는 요소를 찾을 때까지 탐색한다. 조건에 맞는 가장 가까운 자식 요소를 찾으면 탐색을 중단한다. cf. filter() 자신의 자식(하위) 요소들 중 조건에 맞는 모든 요소를 찾는다. find()와 마찬가지로 자식 요소에서 검색하는 역할을 수행하나, 그 대상이 하나인지 여러개인지에 차이가 있다. cf. Javascript - Arra..

outerHTML, innerHTML HTML에서 제공하는 함수로, 자신을 포함한 HTML, 자신 하위의 HTML을 반환한다. Test cf. innerTEXT : 내부의 텍스트를 반환한다. cf. jQuery에서 innerHTML과 유사한 html() 함수는 제공하나, outerHTML 기능을 제공하진 않는다. 하지만 outerHTML함수와 같은 기능으로 동작하는 함수를 사용자 정의 함수로 구현할 수 있다. $.fn.outerHTML = function () { return $(this).clone().wrapAll("").parent().html(); } 선택한 요소를 div(다른 태그여도 상관없다.)로 감싸고, 이 div(선택한 요소의 parent)의 내부 html을 추출하는 방식이다.

offset(), offset(coordinateObj) jQuery 선택자로 선택한 요소의 좌표를 가져오거나 설정할 수 있다. 인자가 없을 경우 요소의 좌표를 가져오고, 인자(top, left 속성을 지닌 객체)를 넣어줄 경우 해당 좌표로 요소를 이동시킨다.