Functionality was pretty simple: folder structure in left container, folder content in right container. It was pretty clear that we were going to use jsTree, but we struggled a bit too much with the events, binding and the simple fact that we wanted to know when we were selecting a node.

Documentation has not made my life easy, that's true, but it looks like I was not the only one struggling with the node selection. At the end, I managed to find why I was wrong and why the documentation was right (I'm always very pleased when this happens).

Let me show you my code, because a line of code is worth plenty of words:
$(function () {
  var myTree = $("#basetree").jstree({ 
       "xml_data" : {        
        "ajax" : {
         "url" : "_xml_flat.xml", // Data is loaded from a flat xml file
         "data" : function (n) { 
          return { 
           id : n.attr ? n.attr("id") : 0, rand : new Date().getTime()
          }; 
         }
        }        
       },      
       "plugins" : [ "themes", "ui",  "xml_data" ]
      });
    myTree.bind("click.jstree", function (event, data) {      
       console.log("Bind Result: " + event.type);
      });
    myTree.bind("select_node.jstree", function (event, data) {      
       console.log(data.inst.get_text(data.rslt.obj) + " - " + data.rslt.obj.attr("id")); // ID - Text
      });          
 });

'개발 > jQuery 플러그인 메뉴관련' 카테고리의 다른 글

jsTree 이벤트 데이타 "data.rslt"  (0) 2011.05.07
jsTree onselect & onclick events  (0) 2011.04.12
jsTree(jQuery)  (0) 2011.04.07

+ Recent posts