CODEWITHSUNDEEP
javascripthtmljsonfancytree
Ganesh Babu
Ganesh Babu

Reputation: 3670

How to generate json after drag and drop using fancy tree js?

I am using FancyTree js for maintaining my user level structure. But I cannot get the whole json after submitting a button. Here is my code:

    <script>
$("#user_tree").fancytree({
            extensions: ["dnd"],
            source: {
              url: "/assets/json/ajax-tree-fs.json"
            },
            dnd: {
              autoExpandMS: 400,
              focusOnClick: true,
              preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
              preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
              dragStart: function(node, data) {

                return true;
              },
              dragEnter: function(node, data) {

                 return true;
              },
              dragDrop: function(node, data) {
                data.otherNode.moveTo(node, data.hitMode);
              }
            },
            activate: function(event, data) {

            },
            lazyLoad: function(event, data) {
              data.result = {url: "/assets/json/ajax-sub2.json"}
            }
          });
</script>
<input type="button" class="submit_user" />

Everything is working fine. But, when I try to get the generated elements after drag and drop like this, it is not working.

$(document.body).on('click','.submit_user',function(){

        console.log($("#user_tree").fancytree("getTree").data);


      });

I tried this from the following link: 

http://wwwendt.de/tech/fancytree/demo/#sample-multi-ext.html

Upvotes: 0

Views: 1538

Answers (1)

mar10
mar10

Reputation: 14794

You can retrieve the tree as list of nested objects like so:

var tree = $("#tree").fancytree("getTree");
data = tree.toDict()

See here for details: http://www.wwwendt.de/tech/fancytree/doc/jsdoc/Fancytree.html#toDict

Upvotes: 2

Related Questions