본문 바로가기

분류 전체보기423

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.
자바스크립트 대용량 데이터 처리 (게시판 관리자페이지 데이터 일괄 수정작업) 기능 구현상 (관리페이지) 전체 게시판들의 속성값을 한꺼번에 설정하고 수정변경해야만 했다. A게시판 - 읽기권한변경B게시판 - 삭제C게시판 - 숨김설정D게시판 - 변경사항없음E게시판 - 변경사항없음F게시판 - 쓰기권한변경G게시판 - 신규게시판생성 A~F까지의 메타데이터를 조회해서 클라이언트에 저장해둔다.(전역변수)클라이언트에서 사용자의 동작에 따라 변경된 내용을 전역변수에 수정변경한다.전역변수(수정된 게시판들의 메타데이터)를 서버로 넘겨 저장한다.이때 각 게시판들이 Update가 되었는지, 신규로 Insert 되었는지, Delete 되었는지를 판단하고 각 비즈니스 로직을 탄다. 라고 생각한 뒤, 구현을 했다. jstree 플러그인으로 게시판목록을 그렸고각 게시판목록을 클릭하면 우측의 설정template에.. 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.
Spring(Mybatis) 게시판 이전글 다음글 가져오기 구현방법 및 쿼리 1. 화면단 //이전글 $("#preDoc").on("click",function(){ _this.preNextDoc('pre'); }); //다음글 $("#nxtDoc").on("click",function(){ _this.preNextDoc('next'); }); preNextDoc : function(flag){ var _this = this; var params = { docnum : _this.docnum, brdCode : _this.brdCode, brdType : _this.brdType, flag : flag, //pre,nxt viewFlag : _this.viewFlag } $.ajax({ type:"POST", url: ePortalConfig.boardContext+"/preNex.. 2019. 1. 23.
자바스크립트 데이터 정렬하기(큰값순정렬,작은순정렬) var List = [ { "AAA": 10 }, { "AAA": 235 }, { "AAA": 234 }, { "AAA": 860 }, { "AAA": 15 }, { "AAA": 11 } ]; //큰 순서대로 정렬 List.sort(function(a,b) { if (a.AAA*1 > b.AAA*1) return -1; if (a.AAA*1 b.AAA*1) return 1; if (a.AAA*1 < b.AAA*1) return -1; return 0; }); 2019. 1. 22.
자바스크립트 구분값 별 총 갯수 구하기 특정 키값에 구분값(코드)가 들어있고그 구분값의 갯수를 구해야 하는 요구조건이 있었다. 즉 아래 테스트데이터를 보면AAA라는 동일한 키를 가진 값이 구분값을 10, 20, 30.... 갖고있으면10이라는 값을 가진 데이터의 갯수20이라는 값을 가진 데이터의 갯수30이라는 값을 가진 데이터의 갯수를계산해야 하는 거였고10이 3개 / 20이 2개 / 30이 1개가 나와야 했다. 그걸 자바스크립트 코드로 짜보았다. // 테스트데이터 var dataList = [ { "AAA": "10" }, { "AAA": "20" }, { "AAA": "30" }, { "AAA": "10" }, { "AAA": "20" }, { "AAA": "10" } ]; //자바스크립트 소스 var dataSum = {}; //초기화 .. 2019. 1. 22.

티스토리툴바