CODEWITHSUNDEEP
javascriptjqueryajaxjqtree
Kyle
Kyle

Reputation: 1578

How can I save the order of the tree?

It's a little bit complicated to explain. I would like to save the position on which the tree has been repositioned, and then when the user opens the page again it will appear the way the user left it (I do not want to make it only for one user but for all, because only the admin is going to have access to it anyway). it sounds ununderstandable, that's why I made an example right below:

Simplifying:

1 - Get the order of the tree's elements that the user left

2 - Send it to my server as a text file (Probably Ajax)

enter image description here

Thus, when I reload the page or/and clean up the cache, it will still be in that position that I left. I want the "position" to be sent as a text file using ajax to my server. Is there a way to do it?

Thanks in advance.

<!DOCTYPE html>
<html>
<head>
	
	
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="./tree.jquery.js"></script>
	<link rel="stylesheet" href="./jqtree.css">
	<script src="./jquery-cookie/src/jquery.cookie.js"></script>
  
	

	<style>
		body{overflow-x:hidden}
		#navdata{width:auto; height:auto; flex:1; padding-bottom:1px;}
		#navgrid{width:50%; height:200px; overflow-x:hidden; overflow-y:scroll; border:solid 1px #79B7E7; background-color:white;}
        	#header{background-color: #79B7E7; width:100%; text-align: center;border: 1px solid white;}
      		.jqtree-element{background-color:#DDEBF7;border: 1px solid white;height:23px;color:red;}
      		.jqtree-tree .jqtree-title {color: black;}         
     		ul.jqtree-tree ul.jqtree_common {margin-left: 0px;}
      		ul.jqtree-tree .jqtree-toggler {color: #325D8A;}
      		ul.jqtree-tree .jqtree-toggler:hover {color: #3966df;text-decoration: none;}
      		.jqtree-tree .jqtree-title.jqtree-title-folder {margin-left: 0;}
      		span.jqtree-dragging {background: #79B7E7;}
      		ul.jqtree-tree li.jqtree-selected > .jqtree-element,ul.jqtree-tree li.jqtree-selected > .jqtree-element:hover {background: -webkit-gradient(linear, left top, left bottom, from(#BEE0F5), to(#79B7E7));}
   	</style>

	
</head>
<body>
	<div id="navgrid">
      <div id="header">Header</div>
		<div id="tree1"></div>
	</div>  
</body>


	<script type="text/javascript">
	 var ExampleData = {}; 
	 	 ExampleData.data = [
	    {
	        label: 'node1', id: 1,
	        children: [
	            { label: 'child1', id: 2 },
	            { label: 'child2', id: 3 }
	        ]
	    },
	    {
	        label: 'node2', id: 4,
	        children: [
	            { label: 'child3', id: 5 }
	        ]
	    }
	];
	
	ExampleData.getFirstLevelData = function(nodes) {
    if (! nodes) {
        nodes = ExampleData.example_data;
    }

    var data = [];

    $.each(nodes, function() {
        var node = {
            label: this.label,
            id: this.id
        };

        if (this.children) {
            node.load_on_demand = true;
        }

        data.push(node);
    });

    return data;
}

ExampleData.getChildrenOfNode = function(node_id) {
    var result = null;

    function iterate(nodes) {
        $.each(nodes, function() {
            if (result) {
                return;
            }
            else {
                if (this.id == node_id) {
                    result = this;
                }

                if (this.children) {
                    iterate(this.children);
                }
            }
        });
    }

    iterate(ExampleData.example_data);

    return ExampleData.getFirstLevelData(result.children);
}
	
	$('#tree1').tree({
	    data: ExampleData.data,
	    autoOpen: false,
	    dragAndDrop: true
	    
	});
    
	</script>

</html>

Upvotes: 1

Views: 2131

Answers (3)

Alaksandar Jesus Gene
Alaksandar Jesus Gene

Reputation: 6883

Updating the Code with HTML/JS/PHP with

Folder Structure

Root Folder
      stackoverflow-2.html
      libs/jquery/jquery.js
      libs/jqtree/tree.jquery.js
      libs/jqtree/jqtree.css
      scripts/stackoverflow-2.js //custom script created by me
      json/stackoverflow-2.json //json file output to create the nodes and children.
      php/stackoverflow-2.php //php commands to write.

stackoverflow-2.html //same as your reference. Changed only mapping of the library files.

<head>
    <script type="text/javascript" src="libs/jquery/jquery.min.js"></script>
    <script src="libs/jqtree/tree.jquery.js"></script>
    <link rel="stylesheet" href="libs/jqtree/jqtree.css">
    <script src="scripts/stackoverflow-2.js"></script>
    <style>
        body{overflow-x:hidden}
        #navdata{width:auto; height:auto; flex:1; padding-bottom:1px;}
        #navgrid{width:50%; height:200px; overflow-x:hidden; overflow-y:scroll; border:solid 1px #79B7E7; background-color:white;}
            #header{background-color: #79B7E7; width:100%; text-align: center;border: 1px solid white;}
            .jqtree-element{background-color:#DDEBF7;border: 1px solid white;height:23px;color:red;}
            .jqtree-tree .jqtree-title {color: black;}         
            ul.jqtree-tree ul.jqtree_common {margin-left: 0px;}
            ul.jqtree-tree .jqtree-toggler {color: #325D8A;}
            ul.jqtree-tree .jqtree-toggler:hover {color: #3966df;text-decoration: none;}
            .jqtree-tree .jqtree-title.jqtree-title-folder {margin-left: 0;}
            span.jqtree-dragging {background: #79B7E7;}
            ul.jqtree-tree li.jqtree-selected > .jqtree-element,ul.jqtree-tree li.jqtree-selected > .jqtree-element:hover {background: -webkit-gradient(linear, left top, left bottom, from(#BEE0F5), to(#79B7E7));}
    </style>
</head>
<body>
    <div id="navgrid">
      <div id="header">Header</div>
        <div id="tree1"></div>
    </div>  
</body>

stackoverflow-2.js

$(document).ready(function(){
$.ajax({                            /*Makes a ajax call and gets the contents from the json file*/
    method:"get",
    url:"json/stackoverflow-2.json"
}).success(function(data){

    $('#tree1').tree({
    data: jQuery.parseJSON(data.tree),
    autoOpen: true,
    dragAndDrop: true
});

});
    $('#tree1').bind(
    'tree.move',
    function(event) {
        event.preventDefault();
        // do the move first, and _then_ POST back.
        event.move_info.do_move();
         $.post('php/stackoverflow-2.php', {tree: $(this).tree('toJson')}); //this will post the json of the latest tree structure.
    }
);

    });

Initial stackoverflow-2.json

{
    "tree": [
        {
            "label": "node1",
            "id": 1,
            "children": [
                {
                    "label": "child1",
                    "id": 2
                },
                {
                    "label": "child2",
                    "id": 3
                }
            ]
        },
        {
            "label": "node2",
            "id": 4,
            "children": [
                {
                    "label": "child3",
                    "id": 5
                }
            ]
        }
    ]
}

stackoverflow-2.php

<?php
file_put_contents("../json/stackoverflow-2.json", json_encode($_POST)); //calls the file and enters the new tree structure.

Code tested in my localhost.

Upvotes: 1

Alaksandar Jesus Gene
Alaksandar Jesus Gene

Reputation: 6883

I think earlier i got your question wrong. This will be your answer.

$(document).ready(function(){

//var data is a dynamic json file that should be created in the backend.
var data = [
    {
        label: 'node1', id: 1,
        children: [
            { label: 'child1', id: 2 },
            { label: 'child2', id: 3 }
        ]
    },
    {
        label: 'node2', id: 4,
        children: [
            { label: 'child3', id: 5 }
        ]
    }
];
$('#tree1').tree({
    data: data,
    autoOpen: true,
    dragAndDrop: true
});


console.log($('#tree1').tree('toJson')); //This will give you the loading jqtree structure.

    $('#tree1').bind(
    'tree.move',
    function(event) {
        event.preventDefault();
        // do the move first, and _then_ POST back.
        event.move_info.do_move();
        console.log($(this).tree('toJson')); //this will give you the latest tree.
//        $.post('your_url', {tree: $(this).tree('toJson')}); //this will post the json of the latest tree structure.
    }
);


});

Upvotes: 2

Alaksandar Jesus Gene
Alaksandar Jesus Gene

Reputation: 6883

Referring to the jqtree documentation you can have your code like this.

var lastOpenedByAUser = 0; // make a ajax call to get this value. This value is also stored in database or any file in your server end if the last user clicked another node.

$('#tree1').tree({
data: data,
autoOpen: lastOpenedByAUser //shall be 0 for node-1, 1 for node-2
 });

Make sure, you run this $('#tree') code only after the code your ajax code is completed.

Upvotes: 0

Related Questions