如何保存树的顺序？

Question

解释起来有点复杂。我想保存树被重新定位的位置，然后当用户再次打开页面时，它会以用户离开它的方式出现（我不想只为一个用户制作它，而是为所有用户制作它，因为无论如何只有管理员才能访问它）。听起来难以理解，这就是为什么我在下面做了一个例子：

Simplifying:

1 - 获取用户离开的树元素的顺序

2 - 将其作为文本文件发送到我的服务器（可能 Ajax）

因此，当我重新加载页面时or/and清理缓存，它仍然会在我离开的那个位置。我希望使用 ajax 将 "position" 作为文本文件发送到我的服务器。有办法吗？

提前致谢。

<!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>

Answer 1

参考 jqtree 文档，您可以得到这样的代码。

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
 });

请确保，您运行此 $('#tree') 代码仅在您的 ajax 代码完成后才进行。

Answer 2

我想之前我把你的问题弄错了。这就是您的答案。

$(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.
    }
);


});

Answer 3

使用 HTML/JS/PHP 和

更新代码

文件夹结构

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

Whosebug-2.html //与您的参考相同。仅更改了库文件的映射。

<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/Whosebug-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>

Whosebug-2.js

$(document).ready(function(){
$.ajax({                            /*Makes a ajax call and gets the contents from the json file*/
    method:"get",
    url:"json/Whosebug-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/Whosebug-2.php', {tree: $(this).tree('toJson')}); //this will post the json of the latest tree structure.
    }
);

    });

初始Whosebug-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
                }
            ]
        }
    ]
}

Whosebug-2.php

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

在我的本地主机上测试的代码。

如何保存树的顺序？

How can I save the order of the tree?

javascript

ajax

jquery

jqtree