본문 바로가기

Web/jQuery27

jstree 사용방법 / 핸들링 방법 모음!! ( 특정노드선택, 부모노드 아이디찾기, 특정노드열기, 노드선택해제 등등) jstree를 사용해서 개발했던 여러 화면에서 기능들을 좀 정리해보았다.따라서 id값이 좀 중구난방인데 사용방법에 대해서 참고하면 좋을듯.jstree 처음 사용할때 워낙 애먹었던 기억이 있었고자주 사용하는 기능에 대해 전체적으로 정리되어 있던 포스팅은보지 못했던것 같아서 ^^jstree를 공부하고 계시는 개발자분들에게 도움이 되었으면 한다. (1) jstree 전체객체 참조 (여러방법이 있음) var _model = $("#jstree").jstree(true)._model.data; $.each(_model, function(_idx, _idata){ console.log( _idata.id); console.log( $("#"+_idata.id) ); } }); var obj = $('#jstree'.. 2019. 1. 24.
Jstree 사용방법 정리(노드옮기기,노드오픈,노드닫기 등) / 실무활용 예제 jstree 사용방법 (1) jstree 라이브러리를 불러오고, jstree를 그릴 영역에 id값 설정 (2) 사용방법jstree template에 jstree를 그릴 아이디타켓DOM을 설정해주고Data를 조회해 바인딩하여 사용하면 된다. -plugins에 jstree 기능들을 추가하여 사용하면 됨.난 아래 3가지 기능을 주로 사용했다.search : jstree 데이타 내 검색 가능dnd : jstree 드래그앤드랍 이동처리contextmenu : 오른쪽마우스클릭으로 수정,삭제,추가등의 로직처리 var resData = [ { "parent": "#", "text": "샘플데이터1" ,"data" : { "url" : "/context/url1" } }, { "parent": "#", "text": ".. 2019. 1. 24.
jQuery Datepicker 플러그인 사용예제 (달력이미지추가) 게시판에서 다음과 같이 예약발행 기능을 추가했다. 예약발행 / 기간발행 2가지의 기능을 추가해서설정한 예약된 시간에 발행되도록 하는 기능과지정된 기간동안에만 발행되었다가 해당기간이 끝나면 게시글을 내리는 기능이었다.어쨌든 날짜를 선택해야 하는 inputbox란에 달력이미지를 추가하고Datepicker를 사용해 구현하였다. 이미지는 Datepicker 옆에 img를 넣어처리 //달력icon클릭시 datepicker실행 $('#startDt').click(function(e) { e.preventDefault(); $("#startDatePicker").focus(); }); $('#endDt').click(function(e) { e.preventDefault(); $("#endDatePicker").fo.. 2019. 1. 23.
$.getJSON 으로 JSON DATA 읽어오기 jQuery 에서는 getJSON()함수를 통하여 json파일을 읽어올 수 있다.HTTP GET 방식 요청을 통해 서버로부터 받은 JSON 데이터를 로드하는 것이며 JSON DATA를 읽어오는 ajax라고 생각하면 쉽다. jQuery.getJSON( url [, data ] [, success ] ) 형식으로 사용한다.URL은 정보를 요청할 URL 혹은 읽어올 파일 위치정보를 입력하면 된다.DATA는 서버로 보낼 DATASUCCESS는 요청이 성공하면 실행될 콜백함수를 뜻한다. 간단한 예제를 보자. personInfo.json과 jsontTest.jsp 파일을 준비하고 다음과 같이 작성한다. [ { "firstName": "John", "lastName": "Smith", "age": 25, "addre.. 2016. 11. 4.
[jQuery] form 객체 json 변환/ serializeArray() 위와 같이 form태그에 있는 객체들을 json형태로 보내고자 한다. 이럴 때 serializeArray()를 사용한다. form을 submit하기전 var arr = $("#frm_act_boardWrite").serializeArray(); console.log("",arr); 을 찍어 확인해보았다. arr = [ {name : ‘cmd’ , value : ‘111111111’}, {name : ‘brd_type’ , value : ‘22222222222’}, {name : ‘brd_cd’ , value : ‘3333333333’}, …… ]; 다음과 같이 Object형태의 배열로 변환이 되었음을 확인할 수 있다. 2016. 9. 20.
[jQuery] AJAX 참고_정리내용 출처 : http://hyeonstorage.tistory.com/65 좋은 내용이 있길래 AJAX 복습겸 OR 나중에 참고할겸 남겨놓는다. .serialize() : 선택한 form의 데이터를 ajax로 전송할 수 있도록 직렬화 한다. / $("#name").serialize(); // id name form의 데이터를 직렬화한다. a=1&b=2 .serializeArray() : 선택한 form의 데이터를 ajax로 전송할 수 있도록 배열로 직렬화 한다. / $("#name").serializeArray(); // id name form의 데이터를 배열로 직렬화한다. [ { name : "a", value : "1" }, { name : "c", value:"3"}] $.ajax() : ajax 비동.. 2016. 9. 6.