2011-12-30 2 views
4

JStree를 사용하여 카테고리/하위 카테고리 트리를 만들려고합니다. 꽤 많은 시간이 걸렸지 만 데이터베이스에서 검색하는 JSON 데이터를 사용하여 트리를 만들 수있었습니다 (PHP를 사용하여 쿼리 및 JSON 객체 작성).JStree : 트리에서 드래그 앤 드롭

이제 드래그 동작을 추적 할 수 있기를 바랍니다. & I : 하위 카테고리 x 메인 카테고리에서 메인 카테고리로 드래그 b. 작업 후에 데이터베이스를 변경하려면이 내용을 기록해야합니다. 'check_move'또는 'drop_finish'함수가 필요하다고 생각했습니다. 드롭 마침이 전혀 작동하지 않으면 이벤트가 트리거되지 않습니다. 이것은 내 노드가 jstree-drop 클래스를 가지고 있지 않기 때문인 것으로 보이지만 올바르게 삽입 된 클래스를 얻지 못하는 것 같습니다. 작동하지 않습니다.

check_move 함수는 다른 하위 범주를 통과 할 때 계속 트리거되어 원치 않는 데이터가로드됩니다.

내 (테스트) JSON 데이터 :

[ 
{ 
    "metadata": { 
     "id": "1" 
    }, 
    "data": "Geluid", 
    "children": [ 
     { 
      "data": "Speakers", 
      "attr": { 
       "href": "" 
      }, 
      "metadata": { 
       "id": "1" 
      } 
     }, 
     { 
      "data": "Versterkers", 
      "attr": { 
       "href": "" 
      }, 
      "metadata": { 
       "id": "3" 
      } 
     } 
    ] 
}, 
{ 
    "metadata": { 
     "id": "2" 
    }, 
    "data": "Licht", 
    "children": [ 
     { 
      "data": "Parren", 
      "attr": { 
       "href": "" 
      }, 
      "metadata": { 
       "id": "2" 
      } 
     } 
    ] 
} 
] 

내 JStree 코드 :

$(function() { 
    $("#Create").click(function() { 
    $("#tree").jstree("create"); 
    });  
    $("#Rename").click(function() { 
    $("#tree").jstree("rename"); 
    }); 
    $("#Remove").click(function() { 
    $("#tree").jstree("remove"); 
    }); 


    $("#tree").jstree({ 
     "dnd" : { 
      "drop_finish" : function (data) { 
     alert ("Drag OK"); 
      //alert("Dragged: " + data.o.attr('id') + " to " + data.r.attr('id'));   
     } 
     }, 
     "themes" : { 
      "theme" : "classic", 
      "dots" : true, 
      "icons" : false 
     }, 
     "json_data" : { 
      "ajax" : { 
       "url" : "get_category_tree.php" 
      } 
     }, 
     "plugins" : [ "themes", "json_data", "ui", "crrm", "checkbox", "dnd" ] 
    }) 
    .bind("select_node.jstree", function (e, data) { 
     var req = new ZaxasRequest(); 
     req.getContent("category_content.php?id=" + data.rslt.obj.data('id') +"", "category_content"); 
    }) 
}); 

기본적으로,이 ID의를 좀하고 싶습니다. 메인 카테고리와 하위 카테고리 ID가 동일 할 수도 있다는 사실에 대해 걱정하지 마십시오. 나중에 문제를 해결할 것입니다.) 누구나 올바른 방향으로 나를 가리킬 수 있습니까?

+0

비슷한 질문에 대한 답은 여기에서 찾을 수 있습니다. http://stackoverflow.com/questions/6110708/bindmove-node-jstree-data-rslt-obj-undefined-how-to : [1] [1] [여기를 클릭] -get-node-data – Teja

답변

0

바인드 이동 이벤트 및 CRRM 플러그인을 사용 ... 나중에 몇 가지 코드 예제를 게시합니다 .. JSTree CRRM

+0

2016 년 현재 제공하신 링크에 CRRM 플러그인이 없습니다. –