그누보드 쇼핑몰 만들기 #1

그누보드로 쇼핑몰 만들기#1

그누보드 쇼핑몰을 만들기 시작해서 

쇼핑몰 설정부분은 우선 패스하겠다. 

회사명이나 사업자 등록번호 입력하는거야 일반 개발자면 금방하겠지.

옵션이야 간단하게 리스트로 만들수도 있겠지만..

한눈에 보기 쉽게 트리형태로 만들어 보기로 했다. 

대분류 옵션을 등록하는 로직.

기본적인 수정, 저장, 삭제하는 로직

트리 안에서 드래그 앤 드롭으로 트리를 저장하는 로직이 필요하다. 

지금까지는 등록, 수정, 저장, 삭제 하는 로직까지는 만들어 놨는데.. 

ajax와 php코드로. 

dynatree에서 움직였을 때 상태 저장하는게 가장 관건임..(우선 나중으로 미뤘다. )

간단하게 dynatree에 대한 설명을 하겠다. 

1. 트리생성 

  - $("#tree").dynatree({});

2. 데이터 불러오기

  - $("#tree").dynatree({

initAjax:{ url : 경로}

    });

3. 노트 클릭시 이벤트 

  - onActivate:function(node){}

  - 현재 클릭한 노드의 데이터를 뽑아오기 위해 사용

4. 드래그 앤 드롭

  - dnd : {

onDragStart:function(node) {

//드래그 시작했을 때

},

onDragStop:function(node){

//드래그를 멈췄을 때

}, 

autoExpandMS :자동으로 펼쳐주는 속도

preventVoidMoves :true : 자기자신에게 드래그 되는걸 막는것

onDragEnter : function(node, sourceNode){

//드롭시 영역에 들어갔을 때 라고 생각하면 편함.

}, 

onDragOver:function(node, sourceNode, hitMode){

//노드가 갈수 있는곳인지 파악한다. 

},

onDrop:function(node, sourceNode, hitMode, ui, draggable){

//드롭했을 때 이벤트 

},

onDragLeave:function(node, sourceNode){

// 드롭할 수 있는 영역에 들어갔다 나올때 호출된다. 

}

     }

예제 보면 다 나와있다. 

debugLevel : 0, 1, 2 를 사용하는데

0. 은 콘솔에 안찍어줌

1. 간단하게 찍어줌

2. 자세하게 찍어줌

콘솔에서 확인하면서 값들을 확인하는 것이 좋다.